次のように3列レイアウトを行いたい：
- 左の列には固定/スティッキー リスト項目が含まれます
- 左と中央の列は既知の固定幅です
- 3 列目は残りのスペースにする必要があります。横棒なし
- 3 番目の列には複数の列があり、グリッドに Foundation フレームワークを使用したい (以下の例では、2 つの大きな 6 を青色で示しています)
- すべての列を上から下に展開する必要があります
Zurb Foundation フレームワークを活用し、グリッド フレームワークをできるだけ再利用したいと考えています。
理想的なレイアウトは次のとおりです。
これはこれまでの私のコードです: http://jsfiddle.net/qhoc/UUfSF/
<body>
<div class='row'>
<div class='col1 columns'>
<ul class='sticky'>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
<div class='col2 columns'>
<div>Some text 2</div>
</div>
<div class='col3 columns'>
<div class='row'>
<div class='large-6 columns'>Left</div>
<div class='large-6 columns'>Right</div>
</div>
</div>
</div>
</body>
CSS:
body {
position: relative;
}
.sticky{
position:fixed;
z-index:999;
}
.col1 {
position: absolute;
left: 0;
background: yellow;
}
.col2 {
position: absolute;
left: 150px;
top: 0;
bottom: 0;
}
.col2 div {
background: red;
}
.col3 {
position: absolute;
left: 300px;
top: 0;
right: 0;
bottom: 0;
}
.col3 div {
background: blue;
}
いくつかの問題があります:
- 3列目は画面幅いっぱいに拡大
- 一番下まで展開する列はありません
- large-6 を使用した 3 列目の内側の列が機能しないようです
レイアウトの問題の修正にご協力ください。ありがとうございました！！