Question

所以问题是我有标题和页面内容，我想给标题设置150px的高度并给出容器的所有剩余空间，所以我将它设置为100％。但是当我这样做时，包含页眉和页面内容的容器会增加它的高度。

我不想在标题中使用百分比，我希望这可以在各种屏幕上使用（如果可能的话）。

这是我的代码：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    height: 100%;
    width: 100%;
    min-width: 1000px;
    max-width: 100px;
    margin: auto;
}

#header {
    width: 100%;
    min-height: 150px;
    max-height: 150px;

}

.content {
    height: 100%;
}

如果需要，我还可以包含jquery

Answer 1

您可以使用css3 calc function，这是实例

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    height: 100%;
    width: 100%;
    min-width: 1000px;
    max-width: 100px;
    margin: auto;
}

#header {
    width: 100%;
    min-height: 150px;
    max-height: 150px;

}

.content {

    height: calc(100% - 150px);
}

您可以check浏览器支持JSBin Demo

Answer 2

嗯，你知道身高百分比在css中是个棘手的事情。高度看向父容器，直到theres px或某个有形高度测量，然后可以应用％。在你的例子中，我开始寻找高度，并看到最大100px但最小1000px。我认为这是一场冲突。

接下来，我想你不知道屏幕的高度，对吗？所以你可能想从jquery获得这个$（窗口）.height（）

然后设置.content的高度（减去150px）。 var theHeight = $（window）.height（）; $（＆＃34;。内容＆＃34）。高度（theHeight）

CSS - 高度100％比页面大

2 个答案: