css - 如何使元素跨越父元素的整个高度并溢出 : auto

标签 css

我的例子请看下面的 url。

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>

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

最佳答案

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

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

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

关于css - 如何使元素跨越父元素的整个高度并溢出 : auto，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19824032/