如何在相对类CSS中设置最小高度？ [英] How to put a min-height in a relative class css?

问题描述

我实际上是在设计我的网站，它将是一个使用javascript在一个部门之间切换的HTML页面。

我正在使用一个包装部门，其中横幅/标题，文本容器和我的页脚相对放置。

当内容不足时，我希望页脚至少位于窗口底部，因此我试图在文本容器中插入最小高度。
这样，网站将至少占据其高度中的所有窗口。

I'm actually designing my website, it's going to be a one HTML page using javascript to switch between divisions.
I'm using a wrap division where my banner/header, text container and my footer are relative positioned.
I want my footer to be at least to the bottom of the window when there is not enough content, so I'm trying to put a min-height to my text container. Like this the website would occupy at least all the windows in it's height.

我的HTML代码（^^部分）

My HTML code (a part ^^)

    <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 不管其中的内容是什么。

Since #wrap is a positioned element and you've already applied bottom:0 for the footer, all you've to do is Simply apply position:absolute to the footer, so that it'll stay at the bottom of #wrap regardless of the content inside it.

侧面说明：您可能还希望应用 padding -底部到 #wrap 等于页脚的高度，这样内容就不会隐藏在页脚后面

Side note: you also might want to apply padding-bottom to #wrap equal to the height of footer so that content won't get hidden behind the footer

这篇关于如何在相对类CSS中设置最小高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！