У меня есть два div/столбца. Один плавал влево, а другой плавал вправо (так должно быть для страницы с адаптивным дизайном, которую я делаю). Содержимое левого div выходит далеко за область просмотра/левый div, в то время как правое содержимое короче и остается в пределах области просмотра/правого div.
Мне нужно, чтобы цвета фона расширялись до нижней части содержимого левого div (или содержимого правого div, если оно было более длинным).
Вместо этого он вырезает фоновые цвета / div прямо в нижней части окна просмотра. Я пробовал очищать: оба, clearfix и элементы управления переполнением, но безрезультатно. Я предполагаю, что я неправильно их реализую для этой настройки. Может ли кто-нибудь отредактировать мою скрипку, чтобы показать мне, что мне нужно сделать, чтобы они дошли до дна?
Вот скрипка (вам нужно будет прокрутить вниз в маленьком окне просмотра, чтобы увидеть, как она обрезает цвета):
Вот код, который я использую в скрипке:
<html><head></head><body><style>
html, body {height:100%;}
#content {
height:100%;
border:thin solid red;
}
#innerdiv {
height:100%;
float:left;
background-color: #eee;
width: 60%;
}
#innerdiv2 {
height:100%;
float:right;
background-color: blue;
width: 40%;
}
#textdiv {
height: 100%;
padding-left: 40px;
}
#textdiv2 {
height: 100%;
padding-left: 40px;
colo: white;
}
</style>
<div id="content">
<div id="innerdiv">
<div id="textdiv">
Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />
</div>
</div>
<div id="innerdiv2">
<div id="textdiv2">
Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />Filler<br />
</div>
</div>
</div>
</body></html>
