Html 使用CSS自动调整div高度_Html_Css

Html 使用CSS自动调整div高度

html css

Html 使用CSS自动调整div高度,html,css,Html,Css,假设有六个div，一个在另一个上第一、第二和第三分区具有固定高度，例如25px、100px和25px。第四个分区是内容区，应该是自动调整分区。第五分区有一些内容，最小高度为100px（高度不固定）。第六部分是具有固定高度的页脚，例如25px 第5和第6个div应始终位于页面底部（无粘性）当第四个div（div_auto_height）有很多内容并且页面与屏幕一样长或更长时，就没有问题了当页面比屏幕短，并且第六个div后面出现空白时，就会出现问题。然后第五个和第六个div就不是它们应该

假设有六个div，一个在另一个上

第一、第二和第三分区具有固定高度，例如25px、100px和25px。第四个分区是内容区，应该是自动调整分区。第五分区有一些内容，最小高度为100px（高度不固定）。第六部分是具有固定高度的页脚，例如25px

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

当第四个div（div_auto_height）有很多内容并且页面与屏幕一样长或更长时，就没有问题了

当页面比屏幕短，并且第六个div后面出现空白时，就会出现问题。然后第五个和第六个div就不是它们应该在的位置了

如果可以自动调整第四个div（div_auto_height）的高度以填充空白空间，则问题将得到解决

我一直试图用很多方法来解决这个问题，但没有一个像样的解决方案

无效解决方案：

屏幕分辨率不同，所以最小高度不起作用使用大屏幕，而不使页面对于小屏幕或小屏幕来说非常长大屏幕
我无法使顶部和底部定位属性正常工作因为它使第5和第6分区位于第4分区之上（分区自动高度）

以下是供您修改的模板：

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


没有头衔
html{
身高：100%；
}
身体{
身高：100%；
保证金：0；
}
#第一组{
高度：25px；
背景色：#123456；
}
#第二组{
高度：100px；
背景色：#345678；
}
#第三组{
高度：25px；
背景色：#567890；
}
#div_自动高度{
高度：自动；
背景色：#789012；
}
#第五组{
最小高度：100px；
背景色：#901234；
}
#第六组{
高度：25px；
背景色：#123456；
}
第一组
第2组
第3组
该div应自动调整
第5组
第6组

CSS无法为属性指定值“总屏幕高度-某些固定像素”。使用Javascript。

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

你应该做什么：

给你的部门一个身份证
使用这些ID查找您的div（第四个除外），并计算其高度
得到窗户的高度
通过从其他div高度的总和中减去窗口高度来设置第四个div的高度

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

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

这可能不是您最可行的解决方案，但如果您知道第五和第六分区的

最大高度

，您可以使用

位置：绝对

和

填充

（设置为

最大高度

值）来实现您的结果：

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

预览：更改

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

到

或者你需要这个：

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

引用：“…六个分区，一个在另一个分区上”。这到底是什么意思？也许你可以提供一张你想做什么的图片。为什么你不能为“div_auto_height”提供一个mi高度？我发现你的问题不够清楚。我正准备用表格来解决这个问题，这样它将尽可能具有普遍性…这当然解决了问题。它也可以通过使用表格轻松解决。我只是想知道是否有一个纯粹的CSS解决方案来做这件事。如果您的文件中已经有javascript代码，我非常感谢您的帮助。已经谢谢你了！或者您可以使用

display:table

等来模拟表格，并将整个表格的高度设置为100%。但是，所有六行都将获得相同数量的额外垂直填充。当然。请接受这个答案，如果你觉得它解决了你的问题：）它是接近，但仍然不完全存在。。。如果第五版的内容有一定的高度，这个解决方案是非常脆弱的。不能说我知道一个更好的解决方案。我同意李斯特先生的回答

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

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