[問題] CSS div positioning
最近在做 UI, 有一個問題一直沒辦法解決。
我想要做一個 lightbox window，讓頁面不管怎麼捲都不會亂跑。
window 裡面有一個 Info 顯示圖片和文字資訊，有一個 Editor 可以捲動
填一些 form 之類的。最下面有個 Cancel 和 Save 的按鈕。如下圖：
______________________________
| Window |
| ____________________ |
| | Info | |
| |____________________| |
| __________↑_____________ |
| | || |
| | || |
| | Editor || |
| | overflow: auto; || |
| |________________________|| |
| ↓ |
| (Cancel) (Save) |
|______________________________|
為了達成讓 window 固定不動，我用 position: fixed;
為了讓 window 能夠隨著瀏覽器視窗縮放而自動 resize 以更有效利用空間，
我用了 top: 30px; left: 30px; right: 30px; bottom: 30px;
也就是說 window 是一個比瀏覽器視窗四邊都少 30px 的一個區域。
然後呢，Info 有可能高有可能低，隨著裡面的物件不同而不同。
接下來問題就來了。我的 Editor 想要隨著 Window 縮放而改變大小。
我希望他上面緊跟著 Info ，而下面距離 (Cancel) (Save) 固定。
我還沒找到能成功符合我需求的方法。目前的作法是讓 editor 也是
position: fixed; 然後算好絕對位置。但是這樣子的問題就是 Info 如果
太高，兩塊就會互相重疊；Info 長太矮，Info 和 Editor 之間就會留出
一片浪費的空白區域。（因為 Editor 的位置固定）
目前的 html code 大概是這樣：
<div class="window">
<div class="info">some information</div>
<div class="editor">
form that may very long, need scrolling...
</div>
<div class="buttons">(Cancel) (Save)</div>
</div>
CSS:
div.window {
position: fixed;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
}
div.info {
}
div.editor {
position: fixed;
overflow: auto;
top: 200px;
left: 60px;
right: 60px;
bottom: 100px;
}
有沒有辦法可以達成
1. window 隨瀏覽器視窗縮放
2. info 有可能很高或很矮，高度不定
3. editor 緊跟著 info，和 info 距離固定
4. editor 隨著 window 縮放
呢？感謝。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 140.112.31.3
推
05/07 22:34, , 1F
05/07 22:34, 1F
推
05/07 23:17, , 2F
05/07 23:17, 2F
→
05/07 23:20, , 3F
05/07 23:20, 3F
討論串 (同標題文章)
以下文章回應了本文：
完整討論串 (本文為第 1 之 3 篇)：