Question

我在容器内有两个div：其中一个存在溢出： https://codepen.io/anon/pen/LKxdyV （我对网站进行了一些简化，实际上它包含更多内容并具有js插件，因此可以解释额外的-现在看似不必要的div）

但是，当文本超出初始容器时，父级（具有“正确”类的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

Answer 1

使用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>

溢出：滚动属性不包括溢出中的背景

1 个答案: