-2

パーセンテージに基づいて 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 の上でスクロール可能にする必要があります。コンテンツでサイズを拡張しないでください。誰でもこれのサンプル デモを作成できますか。

4

3 に答える 3

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/

アップデート

絶対配置を防ぐには、次の float ベースのレイアウトを試してください。

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

于 2013-06-08T09:33:58.410 に答える
0

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

デモをご覧ください。

于 2013-06-08T09:46:36.500 に答える
0

次のフィドルを参照してください。

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;
}
于 2013-06-08T09:31:50.123 に答える