html页面div高度相减,关于html：两个div底部div到高度调整与浏览器窗口

本问题已经有最佳答案，请猛点这里访问。

我在它下面有一个头分区和一个分区。我需要在头DIV下面的DIV根据浏览器窗口大小的高度进行调整。

在CSS中，当我添加height:100%时，它会在页面的侧面创建一个滚动条。当我调整宽度的百分比时，页面底部的间距会不断变化，因为它是用百分比完成的。

我希望标题下面的DIV总是随窗口的高度而调整，底部没有间距。

我该怎么做？

这是小提琴

JS小提琴我不知道为什么，但在jfiddle中底部的DIV没有延伸高度：100%

代码如下：HTML

Header

Bottom Div

CSS

.main {

width:100%;

height:60px;

border: solid;

}

.left {

height: 100%;

width: 300px;

border:solid;

}

尝试使用类似于此代码的内容

HTML：

Header

Bottom Div

CSS：

* {

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

}

html, body {

height:100%;

}

body {

padding:60px 0 0 0; /* 60 — header height*/

margin:0;

}

.main,

.left {

border:1px solid #000;

}

.main {

width:100%;

height:60px;

margin-top: -60px;  /* 60 — header height*/

}

.left {

height: 100%;

width: 300px;

}

正是我要找的！非常感谢。

您有几个选项来实现您想要的布局。

从这个类似的问题中，有很多答案可以解决您的问题：使一个DIV填充剩余屏幕空间的高度

但是，我的解决方案是：只需稍微更改您的CSS

body, html {

height: 100%;

padding: 0;

margin: 0;

}

.main {

width:100%;

height:60px;

border: solid;

position: absolute;

background-color: #fff;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

.left {

height: 100%;

width: 300px;

border:solid;

-moz-box-sizing: border-box;

box-sizing: border-box;

padding-top: 60px;

}

框大小调整将阻止填充顶部和边框将尺寸推到浏览器窗口之外。身体，HTML高度：100%，需要允许其他项目100%的高度(为什么你的小提琴不工作)。

在样式表中试试这个

CSS

.left {

height: 100vh;

width: 100%;

border:solid;

}

参考链接https://stackoverflow.com/questions/1622027/percentage-height-html-5-css

CSS允许您进行一些基本的数学运算，因此以下内容将帮助您：

假设您的收割台固定高度为60px：

.left {

height: calc(100% - 60px);

}

编辑：在计算时，您可能还需要考虑一些额外的填充和边框。虽然我不太喜欢这样的硬编码值。

这对我来说是一个可能的解决方案，但并没有完全按照我想要的方式来解决，但非常感谢你的帮助！