|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<div style="float: left; width: 50%; overflow-y: auto; height: 100%; word-break: break-all ;background-color: #ffcccc;"> 左サイド<br /> 高さ：画面サイズ<br /> 幅：画面サイズ半分<br /> <hr /> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br /> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br /> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br /> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br /> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br /> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br /> </div> <div style="float: left; width: 50%; position: relative;"> <div style="height: 200px; width: 100%; position: absolute; top: 0; left: 0; overflow-y: auto; word-break: break-all; background-color: #ccffcc;"> 右サイド上<br /> 高さ：200px固定<br /> 幅：画面サイズ半分<br /> <hr /> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br /> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br /> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br /> </div> <div style="padding-top: 200px; height: 100%; box-sizing: border-box; word-break: break-all; background-color: #ccccff;"> <div style=" height:100%; overflow-y: auto;"> 左サイド下<br /> 高さ：可変（100%-右サイド上分の高さ（200px））<br /> 幅：画面サイズ半分<br /> <hr /> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br /> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br /> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br /> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br /> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br /> ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○<br /> </div> </div> </div> <div style="clear:left;"></div> |
一画面にコンテンツを収めるの多段レイアウト（サンプル）
※確認ブラウザ
IE 10 (10.0.9200.16736)
google Chrome (31.0.1650.57 m)