0

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

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>

基本上，当我缩小窗口以激活绿色容器上的溢出时，红色侧边栏不会一直向下延伸。即使溢出，我怎样才能让侧边栏跨越其父级的整个高度？

4

2 回答 2

0

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

我还将红色的宽度设置为div，20%这样也会随着窗口缩小。

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

于 2013-11-06T23:00:40.850 回答
0

您正在bottom:0;为外部 div 设置。这就是问题所在。

通过设置它，它将 div 的高度设置为屏幕底部。所以每次你展开窗口时，红色的 div 就会在你离开它的地方消失。

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

给出一个高度总是更好的。

  • 添加height:100%到红色 div

希望这可以帮助。

于 2013-11-06T23:27:44.150 回答