html - 如何根据百分比高度和宽度创建 div？

Question

给我一个想法，根据百分比创建 div 的高度和宽度。

在这里，我是按表创建的。我想用 div 创建同样的东西。

<table border="1" cellpadding="0" cellspacing="0" width="80%" height="80%">
<colgroup>
   <col width="80%" />
   <col width="20%" />
</colgroup>
<tr>
  <td style="background-color: yellow;">abc</td>
  <td style="background-color: red;">cde</td>
</tr>

以上两个 td 应该是可滚动的。不应随内容扩大其大小。任何人都可以为此创建示例演示。

Answer 1

最大的问题是，你div的 's 需要是可滚动的，所以我建议使用绝对位置：

div {
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: auto
}


.left {
    width: 80%;
    left: 0;
    background: red
}


.right {
    width: 20%;
    left: 80%;
    background: yellow
}

http://fiddle.jshell.net/eZerH/

更新

为了防止绝对定位，试试这个基于浮动的布局：

http://fiddle.jshell.net/eZerH/1/

Answer 2

请看下面的小提琴：

http://jsfiddle.net/itz2k13/64WAW/6/

.inner-box-80{
  width: 80%; 
  float: left;
  background-color: red;    
  height: 100%;
  overflow: auto;
}
.inner-box-20{
  width: 20%;
  float: left;
  background-color: yellow;
  height: 100%;
  overflow: auto;
}

Answer 3

请尝试 css3 flexbox 模块。

html,body { margin: 0; padding: 0; height: 100%; }
body {
  display: -moz-box; /*Safari,  iOS, Android browser, older WebKit browsers. */
  display: -webkit-box;/* Firefox (buggy) */
  display: -ms-flexbox; /*IE 10*/
  display: -webkit-flex;/*Chrome 21+ */
  display: flex;/*Opera 12.1, Firefox 22+ */

  -moz-box-align: stretch;
  -webkit-box-algin: stretch;
  -ms-flex-align: stretch;
  -webkit-align-items: stretch;
  align-items: stretch;
}
.main {
  background: green;
  width: 80%;
  overflow: auto
}
.sidebar {
  background: orange;
  width: 20%;
}

请查看演示。