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

Question

我有一个标题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;
}

Answer 1

尝试使用这样的东西代码

\n\n

html:

\n\n

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

\n\n

CSS：

\n\n

* {\n    -webkit-box-sizing:border-box;\n    -moz-box-sizing:border-box;\n    box-sizing:border-box; \n}\nhtml, body {\n    height:100%;\n} \nbody {\n    padding:60px 0 0 0; /* 60 \xe2\x80\x94 header height*/\n    margin:0;\n}\n.main,\n.left {\n    border:1px solid #000;\n}\n.main {\n    width:100%;\n    height:60px;\n    margin-top: -60px;  /* 60 \xe2\x80\x94 header height*/\n}\n\n.left {\n    height: 100%;\n    width: 300px;\n}\n

\n