Question

我正在尝试创建一个简单的布局，问题在于自动溢出，内容 div 确实像我想要的那样滚动，并且所有内容都放置在我想要的位置，当我调整屏幕尺寸时，它也会响应接缝。问题整个内容 div 滚动，尽管其他 3 个 div 也设置为自动溢出，我想要的是每个 div 能够独立于其他 div 滚动，所有这些都在内容 div 的高度和宽度内。

这里是图片的链接，以防它不显示在这里 https://imgur.com/a/2LaWcYL

原谅草图，但如果可能的话，这就是我想要完成的。如果我使用 iframes 而不是 div 可能是可能的，但我试图避免在 iframes 之间传递数据的复杂 ajax 解决方案。希望只用 div 就可以做到。

<html>
<head>
<style type="text/css">
h2 {
text-align:center;
margin-top:3px;
margin-bottom:4px;
}
#content {
border-radius: 15px;
background-color:#999999;
border-style:groove;
border-color:#000000;
border-width:thick;
position: absolute;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 62%;
height: 74%;
overflow:auto;
}
#lpanel {
float:left;
width: 66%;
padding:5px;
overflow:auto;
}
#prev {
padding:5px;
overflow:auto;
}
#info {
padding:5px;
overflow:auto;
}
</style>
</head>
<body>

<div id="container">
    <div id="content">
        <div id="lpanel">
            <h2>some content goes here</h2>
            <p>content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content </p>            

            <p>content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content </p>            

            <p>content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content </p>            

            <p>content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content </p>            

            <p>content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content </p>            

            <p>content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content </p>            

            <p>content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content 
            content content content content content content content content content content content content content content content content content content content content content content content content </p>            
        </div>
        <div id="rpanel">
            <div id="prev">
                <h2>some more content goes here</h2>
                <p> maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image
                 maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image
                  maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image </p>            
            </div>
            <div id="info">
                <h2>information or ads can go here</h2>
                <p>information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? </p>            

                <p>information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? </p>            

                <p>information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? </p>            

                <p>information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? </p>            

                <p>information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? </p>            

                <p>information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? 
                information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? </p>            

            </div>
        </div>
    </div>
</div>                      

</body>
</html>

Answer 1

您需要在元素上设置高度。为了使溢出生效，块级容器必须设置高度（高度或最大高度）或将空白设置为 nowrap。

#lpanel {
    float: left;
    width: 66%;
    padding: 5px;
    overflow: auto;
    height: 100vh;
}
#prev {
    padding: 5px;
    overflow: auto;
    height: 25vh;
}
#info {
    padding: 5px;
    overflow: auto;
    height: 75vh;
}

Answer 2

规则 overflow: auto 要求高度。

首先，为选择器 overflow: hidden 设置 #content。这将防止出现此选择器的滚动条。

接下来，通过为选择器 #rpanel 指定 height 将其添加到您的 css 中。像这样：

#rpanel {
    height: 100%;
}

并在 #rpanel 内为每个选择器设置高度。像这样：

#prev {
    ...
    height: 35%;
}

#info {
    ...
    height: 65%;
}

片段：

h2 {
    text-align: center;
    margin-top: 3px;
    margin-bottom: 4px;
}

#content {
    border-radius: 15px;
    background-color: #999999;
    border-style: groove;
    border-color: #000000;
    border-width: thick;
    position: absolute;
    margin: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62%;
    height: 74%;
    /*overflow: auto;*/
    overflow: hidden;
}

#lpanel {
    float: left;
    width: 66%;
    height: 100%;
    padding: 5px;
    overflow: auto;
}

#rpanel {
    height: 100%;
}

#prev {
    padding: 5px;
    overflow: auto;
    height: 35%;
}

#info {
    padding: 5px;
    overflow: auto;
    height: 65%;
}

<div id="container">
    <div id="content">
        <div id="lpanel">
            <h2>some content goes here</h2>
            <p>
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content
            </p>

            <p>
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content
            </p>

            <p>
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content
            </p>

            <p>
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content
            </p>

            <p>
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content
            </p>

            <p>
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content
            </p>

            <p>
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content content content content content content content content content content content content content content content content content content content content content
                content content content content content content content content
            </p>
        </div>
        <div id="rpanel">
            <div id="prev">
                <h2>some more content goes here</h2>
                <p>
                    maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an
                    image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image maybe an image
                    maybe an image maybe an image maybe an image maybe an image maybe an image
                </p>
            </div>
            <div id="info">
                <h2>information or ads can go here</h2>
                <p>
                    information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we
                    all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right?
                    information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we
                    all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right?
                    information ads, we all hate ads right?
                </p>

                <p>
                    information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we
                    all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right?
                    information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we
                    all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right?
                    information ads, we all hate ads right?
                </p>

                <p>
                    information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we
                    all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right?
                    information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we
                    all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right?
                    information ads, we all hate ads right?
                </p>

                <p>
                    information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we
                    all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right?
                    information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we
                    all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right?
                    information ads, we all hate ads right?
                </p>

                <p>
                    information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we
                    all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right?
                    information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we
                    all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right?
                    information ads, we all hate ads right?
                </p>

                <p>
                    information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we
                    all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right?
                    information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we
                    all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right? information ads, we all hate ads right?
                    information ads, we all hate ads right?
                </p>
            </div>
        </div>
    </div>
</div>

具有独立滚动的 CSS 布局问题 div

2 个答案: