如何扩展 div 以使用所有可能的区域

【问题标题】：how to expand a div to use all the possible area如何扩展 div 以使用所有可能的区域
【发布时间】：2017-10-29 02:57:54
【问题描述】：

无论浏览器大小和 div 内容如何，我如何告诉 div 使用标有红色箭头的整个区域？

我试过：<div style='height:100%;width:'100%'>...</div> 但它只占用水平区域，而不是垂直区域。有没有办法做到这一点？

【问题讨论】：

语法应该是<div style="height:100%; width:100;">...</div>。（冒号，不 = 符号）
@Laura 它不管用

标签： css height width

【解决方案1】：

看看这个小提琴 https://jsfiddle.net/o7u9hxou/

html
<body>
<div id="sidebar"></div>
<div id="wrapper">
  <div id="topbar"></div>
  <div id="else"></div>
</div>
</body>

css
body {
  box-sizing: border-box;
  height: 100vh;
  margin: 0px;
  padding: 0px;
}
#else {
  background-color: green;
  height: 90vh;
}
#sidebar {
  background-color: pink;
  display: inline-block;
  float: left;
  height: 100%;
  min-width: 50px;
  width: 10%;
}
#topbar {
  background-color: yellow;
  height: 10vh;
  min-height: 20px;
}
#wrapper { 
  display: inline-block;
  float: right;
  height: 100%;
  width: 90%;
}

【讨论】：