Overflow:scroll属性在overflow中不包含背景
Overflow:scroll属性在overflow中不包含背景
提问于 2019-06-21 02:57:25
我在一个容器中有两个-now :其中一个有overflow: div(我对网站进行了一些简化，实际上它包含了更多的内容，并且有一个js插件，所以这就解释了额外的div看起来不必要-div)
但是，当文本超出初始容器时，父容器(带有“right”类的div )不会随之增长。理想情况下，.left和.right都会在溢出文本中使用背景色(这样绿色和红色都会延伸到页面底部)。
<div class="container">
<div class="bb-custom-wrapper">
<div class="bb-item">
<div class="content">
<div class="scroller">
<div class="left">
<h2>LEFT</h2>
</div>
<div class="right">
<h2>RIGHT</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus hendrerit sodales. Nullam sed lobortis sem. Curabitur ac orci lorem. Suspendisse potenti. Aenean ac commodo mauris. Fusce odio arcu, vestibulum faucibus dapibus laoreet, sollicitudin et mauris. Pellentesque at tellus id ex dictum pretium. Nullam lorem metus, ullamcorper sed molestie sed, maximus feugiat massa. Ut eleifend, neque eu euismod pulvinar, lacus mauris facilisis felis, rhoncus mattis odio odio in velit.
</p>
</div>
</div>
</div>
</div>
</div>
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
min-height: 100% !important;
height: 100%;
width:100%;
}
body {
font-family: 'Roboto', sans-serif;
background: #fff;
font-size: 100%;
color: #000000;
}
.container {
position: relative;
left: 0px;
}
.container, .bb-custom-wrapper {
width: 100%;
height: 100%;
}
.content {
position: absolute;
left: 0;
width: 100%;
height:100%;
}
.content h2 {
font-family: 'Playfair Display', serif;
font-weight:normal;
font-size: 4em;
padding: 0 6% 10px;
color: #333;
margin: 60px 1% 40px;
text-align: left;
box-shadow: 0 10px 0 rgba(223,137,167,0.02);
}
.scroller {
padding: 10px 5% 10px 5%;
height:100vh;
width:100%;
position:relative;
overflow:scroll;
}
.scroller .left, .scroller .right{
width:50%;
height:100% !important;
position:absolute;
top:0;
}
.left{
left:0;
float:left;
background-color:red;
}
.right{
float:right;
right:0;
background-color:green;
}我已经找到了this question和它的答案，但解决方案似乎没有帮助。可能与我的高度溢出有关，问题是宽度？
编辑:更新了左侧带有图片的代码。https://codepen.io/gibbok/pen/YoNaJZ
回答 1
Stack Overflow用户
发布于 2019-06-21 03:02:07
使用overflow: auto;使其跟随其父对象的高度。
此处的结果：https://codepen.io/gibbok/pen/YoNaJZ
.right{
float:right;
right:0;
background-color:green;
overflow: auto;
}
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:900&display=swap');
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
html, body {
min-height: 100% !important;
height: 100%;
width:100%;
}
body {
font-family: 'Roboto', sans-serif;
background: #fff;
font-size: 100%;
color: #000000;
}
.container {
position: relative;
left: 0px;
}
.container, .bb-custom-wrapper {
width: 100%;
height: 100%;
}
.content {
position: absolute;
left: 0;
width: 100%;
height:100%;
}
.content h2 {
font-family: 'Playfair Display', serif;
font-weight:normal;
font-size: 4em;
padding: 0 6% 10px;
color: #333;
margin: 60px 1% 40px;
text-align: left;
box-shadow: 0 10px 0 rgba(223,137,167,0.02);
}
.scroller {
padding: 10px 5% 10px 5%;
height:100vh;
width:100%;
position:relative;
overflow:scroll;
}
.scroller .left, .scroller .right{
width:50%;
height:100% !important;
position:absolute;
top:0;
}
.left{
left:0;
float:left;
background-color:red;
}
.right{
float:right;
right:0;
background-color:green;
overflow: auto;
}<div class="container">
<div class="bb-custom-wrapper">
<div class="bb-item">
<div class="content">
<div class="scroller">
<div class="left">
<h2>LEFT</h2>
</div>
<div class="right">
<h2>RIGHT</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus hendrerit sodales. Nullam sed lobortis sem. Curabitur ac orci lorem. Suspendisse potenti. Aenean ac commodo mauris. Fusce odio arcu, vestibulum faucibus dapibus laoreet, sollicitudin et mauris. Pellentesque at tellus id ex dictum pretium. Nullam lorem metus, ullamcorper sed molestie sed, maximus feugiat massa. Ut eleifend, neque eu euismod pulvinar, lacus mauris facilisis felis, rhoncus mattis odio odio in velit.
</p>
</div>
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56692275
复制相关文章
相似问题