Question

请参阅以下网址以获取我的示例。

http://wiredbeast.com/bordermenu/test.html

代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div style="position:absolute;top:0;right:0;left:0;bottom:0;background:green;overflow-y: auto;">
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <p>overflowing content</p>
        <div style="position:absolute;top:0;right:0;width:227px;bottom:0;background:red;"></div>
    </div>
</body>
</html>

基本上，当我收缩窗户以便激活绿色容器上的溢流时，红色侧边栏不会一直向下拉伸。即使有溢出，如何让侧边栏跨越其父级的整个高度？

Answer 1

首先，使用外部样式表或内部样式表将有助于使这个更整洁，更容易使用。您也不需要设置溢出，因为大多数浏览器都会自动调整。

我还会将红色div的宽度设置为20%，以便随窗口缩小。

您可以将其更改为固定位置并将高度设置为100％

Answer 2

您正在设置外部div的bottom:0;。这导致了问题。

通过设置它，它将div的高度设置为屏幕的底部。因此，每次展开窗口时，红色div就会在您离开的位置消失。

从外部div样式中删除bottom:0;。

给高度总是更好。

将height:100%添加到红色div

希望这会有所帮助。

如何使用overflow：auto来使元素跨越父元素的整个高度

2 个答案: