如何使用HTML和CSS编写预览窗格(主明细)_html-js-css

概述在CSS的现代时代,我将如何创建一对面板(例如,Outlook中的预览窗口,或主/详细视图)？理想情况下顶部(主)窗格将获得滚动条等？预期的用例是,用户可以在顶部窗口中滚动,同时始终能够看到预览/详细信息窗口(我打算通过jQuery将所选行的数据加载到底部面板中). 在旧世界(表格布局)中,我可能有类似的东西： <html><body> <table height="100%" borde 在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％,但跨越窗口的整个宽度.即使不需要,也会在窗格上自动设置滚动条(在这种情况下,它们会被禁用).

总结

以上是内存溢出为你收集整理的如何使用HTML和CSS编写预览窗格(主/明细)全部内容，希望文章能够帮你解决如何使用HTML和CSS编写预览窗格(主/明细)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1049853.html