gpt4 book ai didi

html - 使用 *page-level* 滚动条滚动 DIV(其高度设置为可见区域)

转载 作者:太空宇宙 更新时间:2023-11-04 03:27:01 25 4
gpt4 key购买 nike

这是一张丑陋的图片,显示了我正在努力实现的目标。基本上我需要使用页面滚动条来滚动 DIV(其高度设置为可见区域)。

screenshot

这在纯 html5/CSS 中是否可行,如果可行,如何实现?

最佳答案

用一堆固定位置的边框元素来构建你的 div 怎么样?像这样:

<!-- don't forget to declare a doctype -->
<body>
<!-- leave these empty -->
<div id="frameTop"></div>
<div id="frameBottom"></div>
<div id="frameLeft"></div>
<div id="frameRight"></div>

<!-- put stuff in these -->
<div id="top">Content here</div>
<div id="content">
<h3>Page title</h3>
<p>Text here.</p>
</div>
<div id="bottom">Tabs</div>
</body>

将 borderTop 设置为底部边框样式,将 borderBottom 设置为顶部边框样式,然后将 borderLeft 和 borderRight 设置为纯色背景以隐藏 Angular 处的边框线。

fiddle


编辑: I found another method这可能更可取。 HTML 肯定更干净。不要对 frameTop、frameBottom 等使用空 div,而是在 body:before 和 body:after 上使用 css psuedo 元素。然后你的 HTML 看起来更像这样:

<body>

<div id="top">Content here</div>

<div class="tab">
<input type="radio" id="tab1" name="tab" class="radioTab" checked="checked" />
<div class="content">
<h3>Tab title</h3>
<p>Text here.</p>
</div>
<label for="tab1">Tab 1</label>
</div>

<div class="tab">
<input type="radio" id="tab2" name="tab" class="radioTab" />
<div class="content">
<h3>Tab title 2</h3>
<p>Different text here.</p>
</div>
<label for="tab2">Tab 2</label>
</div>

</body>

See this fiddle对于使其工作的 CSS。我对那个 fiddle 中的边距定义有点懒惰,但它足以证明概念。

关于html - 使用 *page-level* 滚动条滚动 DIV(其高度设置为可见区域),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26952919/

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