我实际上是在设计我的网站,它将是一个使用javascript在部门之间进行切换的HTML页面。
我正在使用换行分区,其中横幅/页眉,文本容器和页脚相对放置。
当内容不足时,我希望页脚至少位于窗口的底部,因此,我试图在文本容器中添加最小高度。
这样,该网站将至少占据其高度中的所有窗口。
我的HTML代码(^^部分)
<div id="wrap">
<div id="banner"></div>
<div>
<div id="whoami" class="corpus"></div>
<div id="etc" class="corpus">There is different divisions like these, I'm switching through thoose using jQuery, but that's not important there. I'm trying to put a min-height to get the footer at the bottom of the windows if there not enough content. I can't pass the footer in absolute position</div>
</div>
<div id="footer"></div>
</div>
附带的CSS
html, body {
margin:0;
padding:0;
background:#fff;
height:100%;
}
#wrap {
background-color:#ff0;
min-height:100%;
width:1000px;
left:50%;
margin-left:-500px;
position:absolute;
}
#banner {
background-color:blue;
height:150px;
width:1000px;
position:relative;
}
.corpus {
width:800px;
min-height:100%; //I tried this : min-height : calc(100% - 260px); it didn't work.
margin-left:100px;
background-color:grey;
position:relative;
height:auto;
margin-top:5px;
}
#footer {
height:100px;
width:1000px;
background-color:purple;
position:relative;
z-index:1;
bottom:0;
margin-top:5px;
}
道路上的小提琴:http://jsfiddle.net/yoshino78/bn455/1/
最佳答案
由于#wrap
是定位元素,并且您已经为页脚应用了bottom:0
,因此您要做的就是
只需将position:absolute
应用于页脚,无论其内容如何,它都将停留在#wrap
的底部。
Demo
旁注:您可能还想将padding-bottom
应用于#wrap
等于页脚的高度,以使内容不会隐藏在页脚后面
关于html - 如何在相对类CSS中设置最小高度?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24354557/