我实际上是在设计我的网站,它将是一个使用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/

10-12 12:20
查看更多