我有 4 个 div。一个是外包装,另外三个分别是页眉、内容和页脚。所有都是相同(固定)的宽度。但是外包装和内容 div 的高度是可变的。
无论这些大小如何,我都希望页脚 div 贴在外包装的底部。我尝试使用以下 CSS
position: relative;
bottom: 0px;
但它没有用。有人知道解决方案吗?
我有 4 个 div。一个是外包装,另外三个分别是页眉、内容和页脚。所有都是相同(固定)的宽度。但是外包装和内容 div 的高度是可变的。
无论这些大小如何,我都希望页脚 div 贴在外包装的底部。我尝试使用以下 CSS
position: relative;
bottom: 0px;
但它没有用。有人知道解决方案吗?
要将 div 与底部对齐,首先必须使父 div 的位置相对,然后将所需 div 的位置设置为绝对并将bottom
属性设置为零。
<div style="position: relative; height: 100px; border: solid;">
<div style="position: absolute; height: 10px; border: solid; bottom: 0; right: 0; left: 0; ">
</div>
</div>
页脚 div需要是:
position:absolute;bottom:0;
; 这会将其推到其容器的底部,但是,当您向下滚动经过容器时,页脚将随之滚动。
position:fixed;bottom:0;
; 这更常用于粘性页脚。这会将页脚放置在bottom:0
您的屏幕上。所以无论你在哪里滚动,所见即所得(滚动时它不会四处移动)
position:relative;bottom:0;
; 可以使用,但它将相对于它的兄弟姐妹(即除非内容 div将其推到底部,否则它不会去那里),或者,我相信如果容器是相对的,那么它可能会起作用(但请更正如果我错了我)。
根据您的问题:i want the footer div to stick at the bottom of outer wrapper.
听起来您想对absolute
页脚使用定位,以便它始终粘在其容器的底部......
如果您希望无论用户滚动到哪里,页脚都保持在屏幕底部,那么我建议fixed
定位。
一定要看看一些......教程,最重要的是,自己动手做实验!
你可以让我们成为一个jsfiddle,也许它会更清楚地说明你想要完成的事情。祝你好运!
您可以让包装器的位置是相对的,而内部 Divs 的位置是绝对的。
<div style="position: relative; height: 200px">
<div style="position: absolute; top: 0px; height: 20px; background-color:red">
header
</div>
<div style="position: absolute; top: 20px; bottom: 20px; overflow-y: auto">
content
</div>
<div style="position: absolute; bottom: 0px; height: 20px; background-color:red">
footer
</div>
</div>
使用 clear 获取内容下方的页脚。
简单地 -
#header {
clear:both;
}
#footer {
clear: both;
}
这应该迫使页眉位于顶部,而页脚位于浮动元素下方。
<div>
<div style="position: relative; height: 10%; top: 90%; ">
</div>
</div>
[更新]
这是CSS
始终将页脚粘在底部的那个。
*演示*
CSS-
* {
margin: 0;
}
html, body {
height: 100%;
}
#ou {
position:relative;
background-color:grey;
min-height: 100%;
height: auto !important;
height: 100%;
width:400px;
margin: 0 auto -30px; /* the bottom margin is the negative value of the footer's height */
}
#he
{
height:30px;
background-color:red;
}
#fo{
background-color:yellow;
height: 30px; /* .push must be the same height as .footer */
position:relative;
width:400px;
margin:0 auto;
}