用浏览器窗口调整两个div底部div到高度[复制]

Posted 2021-04-12

这个问题在这里已有答案：

• Make a div fill the height of the remaining screen space 31回答

我有一个标题div和一个div。我需要在标题div下面的div根据浏览器窗口大小的高度进行调整。

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

我希望标题下方的div始终根据窗口大小调整，底部没有间距。

我该怎么做呢？

这是小提琴

JS Fiddle我不知道为什么但是在JSFiddle中底部div没有扩展高度：100％

这是代码：html

 <div class = "main">
  Header
 </div>
 <div class="left">
  Bottom Div
 </div>

CSS

.main {
width:100%;
height:60px;
border: solid;
}

.left {
height: 100%;
width: 300px;
border:solid;
}

答案

尝试使用像这样的code

HTML：

<div class = "main">
     Header
</div>
<div class="left">
    Bottom Div
</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;
}

另一答案

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

从这个类似的问题中有很多答案可以解决你的问题：Make a div fill the height of the remaining screen space

但是，这是我的解决方案：只需更改一下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允许您进行一些基本的数学运算，因此以下内容可以帮助您：

鉴于您的标题具有60px的固定高度：

.left {
  height: calc(100% - 60px);
}

编辑：您还可以在计算时考虑一些额外的填充和边框。虽然我不是那种硬编码值的忠实粉丝。

另一答案

在样式表中试试这个

CSS

.left {
height: 100vh;
width: 100%;
border:solid;
}

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