如何在不使用绝对位置的情况下将页脚推到底部？
在不使用绝对位置的情况下将页脚推到底部，可以使用以下方法：
- 使用Flexbox布局：将页面的主要内容放在一个flex容器中，将页脚放在容器外部。设置容器的flex-direction为column，这样主要内容会自动占据剩余的空间，页脚会被推到底部。示例代码如下：
<style>
html, body {
height: 100%;
margin: 0;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
}
.content {
flex: 1;
}
.footer {
background-color: #f5f5f5;
padding: 20px;
}
</style>
<div class="container">
<div class="content">
<!-- 主要内容 -->
</div>
<div class="footer">
<!-- 页脚内容 -->
</div>
</div>- 使用Grid布局：将页面的主要内容放在一个grid容器中，将页脚放在容器外部。设置容器的grid-template-rows为"auto 1fr"，这样主要内容会自动占据剩余的空间，页脚会被推到底部。示例代码如下：
<style>
html, body {
height: 100%;
margin: 0;
}
.container {
display: grid;
grid-template-rows: auto 1fr;
min-height: 100%;
}
.content {
/* 主要内容 */
}
.footer {
background-color: #f5f5f5;
padding: 20px;
}
</style>
<div class="container">
<div class="content">
<!-- 主要内容 -->
</div>
</div>
<div class="footer">
<!-- 页脚内容 -->
</div>这两种方法都可以实现将页脚推到底部的效果，具体选择哪种方法取决于项目的需求和布局结构。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云Flexbox布局指南：https://cloud.tencent.com/document/product/1148/40263
- 腾讯云Grid布局指南：https://cloud.tencent.com/document/product/1148/40264
相关·内容
2回答
如何在css中使用网格容器填充剩余空间？
html、css、css-grid
我是个新手。我正在尝试做一个100vh高的网页，其中页眉和页脚将分别采用80px和50px。中间剩下的任何空间都应该被网格容器完全占据。到目前为止，我确实成功了，但中间容器只接受其内容所需的内容。请参考下图：
另外，我的印象是页脚标签会自动将部分放在视口的底部。但这也不会发生。我必须使用绝对定位吗？
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
html {
font-size: 10px;
}
body {
height: 100vh;
overflow-x: hidden;
}
浏览 10提问于2021-09-05得票数 2
1回答
嵌套柔性盒和CSS网格布局中的空间分布问题
html、css、flexbox、css-grid
据我所知，我的aside元素和div.content应该占用div.container中可用空间的一半。此外，div.content中的网格应该占用所有可用的垂直空间。
问题是网格项无法获得任何高度(如果不是硬编码的话)。此外，网格所占用的所有垂直空间(因为grid-gap)都来自aside元素和div.content，这意味着div.content窃取了aside的垂直空间，这两个元素不再是相同的高度。
aside的高度等于div.content的高度减去网格的高度。
总之，禁止使用柔性箱为div.content设定高度。添加到div.content中的子元素的行为更像它的兄弟类。
*
浏览 0提问于2019-05-11得票数 1
回答已采纳
1回答
在Chrome 83中，网格模板行不再按预期运行
html、css、google-chrome、flexbox、css-grid
在以前的Chrome版本中，您可以定义grid-template-rows，这样某些行的高度是固定的，而其他行将像flex模型一样扩展。这似乎不再是这种情况，我已经提供了一个小提琴作为示例。 header和footer div的高度设置为100px，模板行值设置为auto。template- main div没有定义高度，它的模板行值设置为1fr。预期的行为是main div应该填充800px的剩余高度，但是它的客户端高度是零。 我的问题是，关于小提琴，为什么main div不能扩展以填充grid div的剩余高度？ .container {
display: flex;
min
浏览 8提问于2020-07-21得票数 2
2回答
显示高度为100%的Div :栅格
html、css
我有一个容器div，它有一个页眉、一个内容区域和一个页脚。我希望页脚总是贴在底部，而内容区域总是填充剩余的空间。我不知道该怎么做。
这是我目前所拥有的：
.container {
display: grid;
/*position: relative;*/
grid-template-columns: 1fr;
border: 1px solid black;
}
.header {
background-color: yellow;
display: grid;
grid-template-columns: 3fr 3fr 3fr 1fr;
paddin
浏览 0提问于2018-12-03得票数 0
1回答
网格布局-从页眉和页脚分配边条和主conent与完全高度休息？
html、css、css-grid
我正在尝试做一个布局，它应该占据页眉和页脚的高度，将rest留给主容器。(边栏，内容)。但不能把这个存档。有人帮我吗？
对于页眉和页脚，我没有固定的高度。(它只应占据内容高度)
.container {
display: grid;
grid-template-rows: auto auto auto;
grid-template-columns: 100px auto;
grid-template-areas:
"header header"
"sidebar content"
"footer foote
浏览 1提问于2020-10-21得票数 0
回答已采纳
1回答
如何使用Flex垂直中心和视图端口单元vh？
html、css、flexbox
我有一个简单的页面布局与垂直居中的内容框使用flex。
我使用min-height: 70vh;扩展容器高度，允许内容框垂直中心。
我也有一个页脚，它的高度差距是拉伸到底部的页面使用flex: 1;。
问题
如果内容框有足够的内容使其比页面更高，那么页脚不会被推到底部并与页面一起滚动。示例：height: 2000px;
如果我删除了min-height: 70vh;，那么页脚就会按它应该看到的方式推到页面的底部。
HTML/
<!DOCTYPE html>
<html>
<head>
&l
浏览 1提问于2017-02-25得票数 2
回答已采纳
1回答
当使用“对齐内容:间隔”和粘性标题时，CSS网格项溢出网格容器。
html、css、safari、css-grid
我有一个基本的布局，在这个布局中，我的CSS网格位于一个flex布局中，这样网格就可以占用除页脚之外的所有可用空间。
标头用position: sticky;定位。
网格中的项目是，而不是，占据了网格中所有可用的高度。
在我的CSS网格布局中，我使用了align-content: space-between;，这样两个项都位于网格的顶部和底部，中间有一些空格。
这在Chrome和FF上看起来不错，但是在Safari (Mac & iOS)上，第二个网格项被放置在网格之外(根据我的粘性标题的高度)。
body {
margin: 0;
padding: 0;
font-f
浏览 1提问于2019-01-15得票数 2
1回答
如何使用css网格显示特定区域的组件
html、css
这是我的html代码
<div>
<div id="navbar" class="box">Navbar</div>
<div id="sidenav " class="box">Side Navbar</div>
<div id="main " class="box">Main</div>
<div id="footer " class="box">Foo
浏览 1提问于2022-10-31得票数 0
回答已采纳
3回答
有2列2行的布局
html、css、flexbox
我有一个带有2列的.container，在第二列.right中，我希望有2行，但是第一行.content应该使用剩余的空间
这是HTML标记
<div class="container">
<div class="left">left</div>
<div class="right">
<div class="content">content</div>
<div class="footer"
浏览 2提问于2019-05-31得票数 1
回答已采纳
1回答
如何使用网格模板区域使内容占用旁边的区域？
html、css、css-grid
网格模板区域在这里被使用。然而，主要的区域并没有占用其余的区域，我不需要留出我的项目。
我怎样才能使主要区域占据其余的区域？
.container {
display: grid;
grid-template-areas: "header header header" "nav content side" "footer footer footer";
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
grid-gap: 1
浏览 3提问于2022-07-11得票数 0
2回答
如何使用网格布局强制页脚位于空白/完整页的页底
css、css-grid、footer
我有几页内容不多。整个网站都采用网格布局-基本页眉、主页和页脚：
这样做的目的是将页脚设置到屏幕底部，并在内容中添加空格，如果页面上没有像这样的内容，那么：
为了演示起见，我在本页中使用了50 of的页边距。
但是，例如，如果博客帖子大于100 on，那么页脚仍然应该出现在底部-当然，没有空格：
用户需要滚动才能看到页面底部的页脚。
实现这种行为的“最佳实践”(-way)是什么(最好没有JS(?))？
可能想查看网页结构的人的一些代码：
/* inside this class the content is wrapped into the grid layou
浏览 3提问于2021-09-17得票数 1
回答已采纳
2回答
如何创建带有2x3网格的侧边栏
html、css、flexbox、grid、sidebar
我想创建一个侧栏和网格，有2行和3列(旁边的侧栏)。我已经有了一个导航栏和一个页脚(只是一个布局，链接不应该起作用)
我不知道如何使用flexbox创建侧边栏和主内容网格。
哦，还有超人标志:由于某些原因，我不能将它垂直居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>web1</title>
<link rel="stylesheet" hr
浏览 11提问于2019-11-20得票数 0
回答已采纳
2回答
IE11计算父flex容器高度错误
html、css、flexbox、internet-explorer-11
我正在尝试使用基于flexbox的布局来显示带有粘性页脚的页面。这适用于所有浏览器中的短页面(小于窗口高度)。然而，同样的方法也适用于Firefox中的长页面，但是IE11将容器元素减少到子元素的25%左右。
下面是示例：
html {
height: 100%;
}
body {
height: 100vh;
display: flex;
flex-direction: column;
}
div.container {
max-width: 600px;
background-color: #aaa;
flex-grow: 1;
display: fle
浏览 9提问于2016-09-06得票数 5
回答已采纳
1回答
如何删除网格布局底部的空空间
html、css
网格模板区域是导致我的网站底部有一个空的空格，我已经尝试使用网格模板行生成6行，但它也不工作。纵观控制台，它似乎也不是任何页脚的元素填充/边距的错误。
HTML
body{
display: grid;
grid-template-areas:
"header header"
"headingImage headingImage"
"container container"
"mainConten
浏览 1提问于2021-03-26得票数 0
回答已采纳
3回答
为什么此网格中的第三个元素与页面底部对齐？
html、css、grid
CodenPen link <body>
<container>
<nav></nav>
<main>
<section></section>
<section></section>
<section></section>
<section></section>
...
</main>
<footer></foot
浏览 21提问于2019-12-15得票数 0
回答已采纳
2回答
flex设置项位于彼此下方
css、flexbox
我正在尝试从中间到左边的布局，如图所示。我怎样才能让灰色的div使用flex来提升自己呢？我应该只使用固定位置吗？我想更改html来为橙色和灰色的盒子创建容器div，但我想看看如何在不更改html的情况下做到这一点。
@import 'general.css';
@import 'reg.css';
@import "768.css" screen and (min-width : 992px);
@import "992.css" screen and (min-width : 1200px);
/*gene
浏览 0提问于2018-10-06得票数 1
1回答
为什么我的页脚没有留在Gatsby站点的底部？
css、gatsby
因此，我将内容包装在布局组件中，所有其他页面都将页脚压到底部，因为内容比实际屏幕大。然而，我有一个内容较少的页面，现在如果我在一个更高的屏幕上查看它，我的页脚会尴尬地位于中间。
下面是我的页脚css
export const FooterContainer = styled.div`
background-color: #101522;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
浏览 0提问于2020-10-06得票数 1
2回答
CSS网格布局问题-内容重叠模板区域
html、css、css-grid
我刚刚开始学习CSS网格，而不是使用bootstrap等。 我已经为header，nav，main，aside，footer创建了行和列。 但是当我在header内部创建<div>时，它会与边界重叠，我不知道为什么。行高应该随着内容的增加而增加...这就是我使用minmax(150px,auto)的原因。 html为： <nav>Nav</nav>
<header><div class="header-image"></div></header>
<main>Main</ma
浏览 27提问于2020-09-16得票数 0
3回答
在这个灵活的布局中添加浮点div。
html、css
我和一起工作。
我想在content div旁边添加一个div。我试过：
HTML:
<div class="container">
<header>here is the header </header>
<div class="sidebar">my sidebar content</div>
<div class="content">
/my text
</div>
<footer>
and the footer
&
浏览 2提问于2014-08-30得票数 1
回答已采纳
1回答
CSS页眉和页脚，可滚动的内容
html、css、scroll
我正在与CSS斗争，以创建具有固定页眉和页脚以及可滚动内容的可滚动“窗口”。接受的答案是我解决这个问题的最接近的答案，但这需要设置"content“类div的高度。
<!DOCTYPE html>
<head>
<style>
html, body {
height: 100%;
margin: 0;
}
.wrapper {
max-height: 100%;
display: flex;
flex-direction: column;
}
.header, .footer {
background: silver;
}
.
浏览 5提问于2020-01-18得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
