Question

假设另一个有六个div。

第1，第2和第3 div具有固定高度，例如25px，100px和25px。第4个div是内容区域，应该是自动调整div。第5个div有一些内容，最小高度为100px（高度不固定）。第6个div是一个具有固定高度的页脚，例如25像素。

第5和第6个div应始终位于页面底部（不粘）

当第4个div（div_auto_height）包含大量内容并且页面与屏幕一样长或更长时，没有问题。

当页面比屏幕短并且第6个div之后出现空白空间时，会出现问题。然后第5和第6分区不是他们应该的位置。

This is the normal case

如果可以自动调整第4个div（div_auto_height）的高度以填充空白区域，问题就会解决。

This is what we need to have

我一直试图在没有合适解决方案的情况下以多种方式解决这个问题。

无效解决方案：

有不同的屏幕分辨率，因此最小高度不起作用大屏幕没有使页面很长的小或宽屏。
我无法让顶部和底部定位属性正常工作因为它使得div 5和6成为第4个div（div_auto_height）

以下是您修改的模板：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>No title</title>
<style type="text/css">

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
}

#div1 {
    height: 25px;
    background-color: #123456;
}

#div2 {
    height: 100px;
    background-color: #345678;
}

#div3 {
    height: 25px;
    background-color: #567890;
}

#div_auto_height {
    height: auto ;
    background-color: #789012;
}

#div5 {
    min-height: 100px;
    background-color: #901234;
}

#div6 {
    height: 25px;
    background-color: #123456;
}

</style>
</head>
<body>
    <div id="div1">Div 1</div>
    <div id="div2">Div 2</div>
    <div id="div3">Div 3</div>
    <div id="div_auto_height">This div should adjust automatically</div>
    <div id="div5">Div 5</div>
    <div id="div6">Div 6</div>
</body>
</html>
</body>
</html>

Answer 1

我相信你应该用javascript来解决这个问题。有很多易于使用的javascript框架，比如jquery。

你应该做什么：

给你的div一个id。
使用这些ID找到你的div - 除了第四个 - 并计算他们的身高
获取窗口的高度
通过从其他div高度的总和中减去窗口高度来设置第4个div的高度

就是这样！如果你需要一些代码，请告诉我。

编辑：我没有找到代码，但我记得我使用了jquery dimensions。你可以在那里找到示例代码！

Answer 2

没有CSS方法为属性赋予值“总屏幕高度 - 一些固定像素”。使用Javascript。

Answer 3

这对您来说可能不是最可行的解决方案，但如果您知道第5和第6 div的max-height，则可以使用position: absolute和padding（设置为{ {1}}值）来实现你的结果：

max-height

CSS：

<div id="wrapper">
    <div class="div-25"></div>
    <div class="div-100"></div>
    <div class="div-25"></div>
    <div id="content">
        <div class="fluid">

        </div>
    </div>
</div>
<div id="container">
    <div class="footer">
        <div class="div-25"></div>
    </div>
</div>

预览：http://jsfiddle.net/Wexcode/jzdDU/

Answer 4

变化

#div_auto_height {
   height: auto ;
   background-color: #789012;
}

到

#div_auto_height {
   height: 100% ;
   background-color: #789012;
}

或者你可能需要这个：

#div_auto_height {
   height: calc(100% - 275px); ;
   background-color: #789012;
}

使用CSS自动调整div高度

4 个答案: