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


Two divs bottom div to height adjust with browser window

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

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

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

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

我该怎么做？

这是小提琴

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

代码如下：HTML

1
2
3
4
  Header
 
 
  Bottom Div

CSS

1
2
3
4
5
6
7
8
9
10
11
.main {
width:100%;
height:60px;
border: solid;
}

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

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

HTML：

1
2
3
4
     Header


    Bottom Div

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
* {
    -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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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

1
2
3
4
5
.left {
height: 100vh;
width: 100%;
border:solid;
}

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

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

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

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

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

相关讨论