Переполнение: свойство прокрутки, не включающее фон в переполнении - PullRequest
Новая
       25

Переполнение: свойство прокрутки, не включающее фон в переполнении

0 голосов
/ 20 июня 2019

У меня есть два элемента div внутри контейнера: один из них переполнен: https://codepen.io/anon/pen/LKxdyV (я немного упростил сайт, на самом деле он содержит больше контента и имеет плагин js, что объясняет дополнительные- теперь, казалось бы, ненужные - divs)

Однако, когда текст превышает исходный контейнер, родительский элемент (div с классом 'right') не растет вместе с ним.В идеале и .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;
}

Я нашел этот вопрос и ответ на него, но решение, похоже, не помогает.Вероятно, это связано с тем, что у меня переполнение по высоте, и вопрос о ширине?

Редактировать: обновленный код вырезан с изображением слева.https://codepen.io/gibbok/pen/YoNaJZ

1 Ответ

1 голос
/ 20 июня 2019

Используйте 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>
...