作者yllan (蓝永伦)
看板Web_Design
标题[问题] CSS div positioning
时间Wed May 7 22:09:54 2008
最近在做 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
1F：推 Canboo:虽然看不太懂 不过应该只能用js解决 用纯css不可能 05/07 22:34
2F：推 ateclean:div.editor {margin-bottom:30px;} 或是padding试试? 05/07 23:17
3F：→ yllan:margin-bottom 没有用，这样 editor 会变得很长而没有scroll 05/07 23:20