在CSS的现代时代,我如何创建一对面板(例如,Outlook中的预览窗口,或主/详细视图)？理想情况下顶部(主)窗格将获得滚动条等？
预期的用例是,用户可以在顶部窗口中滚动,同时始终能够看到预览/详细信息窗口(我打算通过jQuery将所选行的数据加载到底部面板中).
在旧世界(表格布局)中,我可能有类似的东西:
<html>
<body>
<table height="100%" border="1" width="100%">
<tr height="*"><td>master</td></tr>
<tr height="100"><td>detail</td></tr>
</body>
</html>
那么这如何转化为CSS呢？(特别是,在两个窗口上获取滚动条).
好吧,如果你真的使用的是Windows,那么听起来就像你在谈论帧甚至是iFrame.
不过,我的假设是,当你说"窗口"时,你只是指可滚动区域的想法.为此,可以将css属性"overflow"设置为"scroll",如果包含的元素大小大于其自身的大小,它将滚动.
一个简单的代码示例:
#window-one, #window-two {
width: 100%;
height: 50%;
overflow: scroll;
}<html>
<body>
<div id="window-one">
<p>Content for window one goes here.</p>
</div>
<div id="window-two">
<p>Content for window two goes here.</p>
</div>
</body>
</html>这将创建两个"窗格"(窗口)占据高度的50%,但跨越窗口的整个宽度.即使不需要,也会在窗格上自动设置滚动条(在这种情况下,它们会被禁用).
| 归档时间： |
|
| 查看次数： |
4053 次 |
| 最近记录： |