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

“六个div一个在另一个上面”,这是什么意思呢?也许你可以提供一张你想要做的图片。 - Sparky
为什么你不能给'div_auto_height'一个中间高度?我觉得你的问题不够清晰。 - Sandeep
我正前往解决表格问题,以使其尽可能通用... - Johnny
4个回答

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

这肯定解决了问题。也可以通过使用表格轻松解决。我只是想知道是否有纯CSS的解决方案来完成这件事。如果您已经在文件中拥有JavaScript代码,我将非常感激从您那里获取它。先谢谢您! - Johnny

2

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


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

0

这可能不是最可行的解决方案,但如果您知道第5和第6个div的max-height,您可以使用position: absolutepadding(设置为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
它接近了,但还不够完美... 如果第五个 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;
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,