两个DIV，底部DIV随浏览器窗口高度调整

13 浏览
0 Comments

两个DIV，底部DIV随浏览器窗口高度调整

这个问题已经有答案了:

如何让一个div充满屏幕的剩余空间

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

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

我希望下面的div始终可以根据窗口大小调整高度，而不会在底部留下间隙。

我该怎么做？

这里是Fiddle的链接：

JS Fiddle，但我不确定为什么在JSFiddle中底部的div没有延伸到100%的高度。

以下是代码：

HTML：

 
  Header
  Bottom Div

CSS：

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

admin 更改状态以发布 2023年5月25日
0

2 答案

0 Comments

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

有很多答案都解决了你的问题，可以参考这个类似的问题：
让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;
}

盒模型(box-sizing)将防止padding-top和边框将尺寸推出浏览器窗口。body,html的高度:100%;是必要的，以允许其他项目具有100%的高度(这就是为什么你的fiddle不起作用)。

0
0 Comments

尝试使用类似于这样的代码

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

0