使用CSS自动调整div高度

Question

使用CSS自动调整div高度

6

假设有六个div堆叠在一起。第1、2和3个div的固定高度为25px、100px和25px。第4个div是内容区域，应该是自动调整的div。第5个div有一些内容，最小高度为100px（高度不固定）。第6个div是页脚，高度固定为25px。第5个和第6个div应该始终位于页面底部（非粘性）。当第4个div（div_auto_height）有大量内容且页面长度与屏幕一样长或更长时，没有问题。问题出现在页面短于屏幕并且空白空间在第6个div之后时。这时第5个和第6个div并不在它们应该在的位置。如果能够自动调整第4个div（div_auto_height）的高度以填充空白空间，则问题将得到解决。我已经尝试了很多种方法来解决这个问题，但都没有一个合适的解决方案。以下是无效的解决方案： - 不同的屏幕分辨率，因此最小高度不适用于大屏幕，而使得小屏幕或宽屏幕的页面变得非常长。 - 我无法使上下定位属性正常工作，因为它会使第5个和第6个div出现在第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>

- Johnny

“六个div一个在另一个上面”，这是什么意思呢？也许你可以提供一张你想要做的图片。 - Sparky

为什么你不能给'div_auto_height'一个中间高度？我觉得你的问题不够清晰。 - Sandeep

我正前往解决表格问题，以使其尽可能通用... - Johnny

4个回答

2

没有CSS的方法可以将属性值设置为"总屏幕高度 - 固定像素数"。请使用JavaScript。

- Mr Lister

或者您可以通过使用 display:table 等方式来模拟表格，并将整个表格的高度设置为 100%。但是这样，所有六行都会获得相同数量的额外垂直填充。 - Mr Lister

0

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

<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>

CSS：

html, body { 
    margin: 0; 
    height: 100%; }
div { width: 100%; }
#wrapper { min-height: 100%; }
.div-25 { 
    background: green;
    height: 25px; }
.div-100 { 
    background: grey;
    height: 50px; }
#content { padding: 0 0 150px; } /* Max Height */
.fluid { 
    background: red;
    height: 100px; }
#container { position: relative; }
.footer { 
    background: blue;
    position: absolute;
    bottom: 100%;
    min-height: 100px; }

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

- Wex

当然。如果您觉得它解决了您的问题，请接受这个答案 :) - Wex

它接近了，但还不够完美... 如果第五个 div 的内容增加高度，这个解决方案就会变得非常脆弱。 - Johnny

我不知道有更好的解决方案。我同意@mr lister的答案。 - Wex

0

变更

#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;
}

- crazyjune

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Adam Arold · Accepted Answer

我认为您应该使用JavaScript来解决这个问题。有很多易于使用的JavaScript框架，例如jquery。您需要做的是：给您的div添加一个id。使用这些id找到您的div（除了第四个），并计算它们的高度。获取窗口的高度。通过将其他div的高度总和减去窗口高度来设置第四个div的高度。就是这样！如果您需要一些代码，请告诉我。编辑：我没有找到代码，但我记得我使用了jquery dimensions。您可以在那里找到示例代码！