浏览器窗口调整两个div底部div

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

让div填充剩余屏幕空间的高度31个答案

---

尝试使用这样的代码

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

---

你有几个选择来实现你想要的布局。

有很多解决这个类似问题的问题的答案：使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允许你做一些基本的数学运算，所以下面的代码可以帮助你：

鉴于你的头部固定高度为60px：

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

编辑：你也有一些额外的填充和边框，你可能想在计算时考虑。 尽管我不喜欢硬编码这样的价值观。

链接地址: http://www.djcxy.com/p/88241.html

上一篇: Two divs bottom div to height adjust with browser window

下一篇: How to make a div fill its container with 100% width and height?