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需要可滚动，所以我建议使用绝对位置：

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

请查看demo。

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

3 个答案: