CSS 将页脚贴在底部
CSS Stick Footer to Bottom
这是我将页脚粘贴到页面底部的代码:
#footer {
background-color: #0F2157;
width: 100%;
bottom: 0px;
min-height: 35px;
padding-top: 5px;
}
当我设置高度时,它工作得很好,但是当我尝试设置最小高度时,它在页脚下留下一点 space。猜猜如何解决这个问题?
您使用的最小高度为 35 像素。我认为您的内容在页脚内的高度超过 35 像素。因此,请检查所有页脚元素的边距或填充。
如果能做一个jsfiddle demo就更好了。
使用 Flexbox 怎么样? IE>=10.
支持
要使用它,您必须至少将页面分成两个独立的元素:"upper"-一个 (.content
) 包含页面的全部内容和页脚。
"upper"-one 获取值 flex: 1,这是一个 shorthand for:
flex-grow: 1
flex-shrink: 1
flex-basis: auto
这意味着,"upper" 元素可以增长到 maximum,而页脚仅保留实际需要的元素 space。
代码片段
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
<!doctype html>
<html>
<head>
</head>
<body>
<div class="content"></div>
<footer class="footer">
Hey footer!
</footer>
</body>
</html>
首先,body、html 和容器(见 class 'container' 的元素)的高度必须 height: 100%;
在这个解决方案中,我使用了 flex box。所有现代浏览器和 IE11 都支持它。
有必要将以下属性添加到容器中:
display: flex;
flex-direction: column; /*the flex items are placed in column, by default it is in row*/
要将页脚移动到底部,只需添加到弹性项目
margin-top: auto; /* it grabs all free space between flex items and put it before this flex item */
html, body {
height: 100%;
}
.container {
height: 100%;
background-color: green;
display: flex;
flex-direction: column;
}
.header {
height: 20%;
background-color: yellow;
}
.content {
background-color: white;
}
.footer {
min-height: 20%;
background-color: blue;
margin-top: auto;
}
<div class="container">
<div class="header">Header</div>
<div class="content">It's content</div>
<div class="footer">Footer in bottom</div>
</div>
[已解决]
我发现这适用于我的示例:
#footer {
position: absolute;
bottom: 0;
width: 100%;
}
这是我将页脚粘贴到页面底部的代码:
#footer {
background-color: #0F2157;
width: 100%;
bottom: 0px;
min-height: 35px;
padding-top: 5px;
}
当我设置高度时,它工作得很好,但是当我尝试设置最小高度时,它在页脚下留下一点 space。猜猜如何解决这个问题?
您使用的最小高度为 35 像素。我认为您的内容在页脚内的高度超过 35 像素。因此,请检查所有页脚元素的边距或填充。
如果能做一个jsfiddle demo就更好了。
使用 Flexbox 怎么样? IE>=10.
支持要使用它,您必须至少将页面分成两个独立的元素:"upper"-一个 (.content
) 包含页面的全部内容和页脚。
"upper"-one 获取值 flex: 1,这是一个 shorthand for:
flex-grow: 1
flex-shrink: 1
flex-basis: auto
这意味着,"upper" 元素可以增长到 maximum,而页脚仅保留实际需要的元素 space。
代码片段
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
<!doctype html>
<html>
<head>
</head>
<body>
<div class="content"></div>
<footer class="footer">
Hey footer!
</footer>
</body>
</html>
首先,body、html 和容器(见 class 'container' 的元素)的高度必须 height: 100%;
在这个解决方案中,我使用了 flex box。所有现代浏览器和 IE11 都支持它。
有必要将以下属性添加到容器中:
display: flex;
flex-direction: column; /*the flex items are placed in column, by default it is in row*/
要将页脚移动到底部,只需添加到弹性项目
margin-top: auto; /* it grabs all free space between flex items and put it before this flex item */
html, body {
height: 100%;
}
.container {
height: 100%;
background-color: green;
display: flex;
flex-direction: column;
}
.header {
height: 20%;
background-color: yellow;
}
.content {
background-color: white;
}
.footer {
min-height: 20%;
background-color: blue;
margin-top: auto;
}
<div class="container">
<div class="header">Header</div>
<div class="content">It's content</div>
<div class="footer">Footer in bottom</div>
</div>
[已解决]
我发现这适用于我的示例:
#footer {
position: absolute;
bottom: 0;
width: 100%;
}