gpt4 book ai didi

html - 如何使用 HTML 和 CSS 编写预览 Pane (主/详细信息)

转载 作者:搜寻专家 更新时间:2023-10-31 21:58:43 24 4
gpt4 key购买 nike

在 CSS 的现代时代,我将如何创建一对面板(例如,像 Outlook 中的预览窗口,或主视图/详细 View )?理想情况下,顶部(主) Pane 的滚动条等在哪里?

预期的用例是用户可以在顶部窗口中滚动,同时始终能够看到预览/详细信息窗口(我打算通过 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>

这将创建两个“ Pane ”(窗口),它们占据 50% 的高度,但跨越窗口的整个宽度。滚动条将自动设置在 Pane 上,即使不需要(在这种情况下它们被禁用)。

关于html - 如何使用 HTML 和 CSS 编写预览 Pane (主/详细信息),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/425661/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com