两个div底部div通过浏览器窗口调整高度[重复]

Posted 2023-03-06

【中文标题】两个div底部div通过浏览器窗口调整高度[重复]

【英文标题】：Two divs bottom div to height adjust with browser window [duplicate]

【发布时间】：2014-09-19 18:29:32

【问题描述】：

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

在 CSS 中，当我添加 height: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;

【参考方案1】：

在你的样式表中试试这个

CSS

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

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

【参考方案2】：

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

有很多答案可以从这个类似的问题中解决您的问题： 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;

box-sizing 将防止 padding-top 和边框将尺寸推到浏览器窗口之外。正文，html高度：100%；需要让其他项目达到 100% 的高度（为什么你的小提琴不起作用）。

【参考方案3】：

尝试使用类似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;

【讨论】：

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

【参考方案4】：

CSS 允许您做一些基本的数学运算，因此以下内容会对您有所帮助：

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

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

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

【讨论】：

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