Боковая панель Div расширяет всю высоту контейнера

Question

У меня есть один контейнерный блок, содержащий две боковые панели с каждой стороны и поле для содержимого в середине. Стандартный макет блога. Контент проходит мимо боковых панелей, а высота боковой панели останавливается в моем последнем предложении. Как я могу увеличить высоту так, чтобы автоматическое расширение дошло до конца страницы, то есть до конца поля содержимого в середине?

Answer 1

Вот как это сделать:

HTML:

<div id="container">
    <div id="main">
        Content...
    </div>
    <div id="sidebar">
        Content...
    </div>
</div>

CSS:

#container {
   width: 1000px;
   background: url(http://yourwebsite.com/images/dot.jpg) repeat;
   overflow: auto;
}
#main {
   width: 70%;
   float: left;
}
#sidebar {
   width: 30%;
   float: right;
}

Как сделать "dot.jpg":

1. открыть фотошоп или любой графический редактор
2. создайте новое изображение высотой 1px и шириной 1px.
3. раскрасьте его в любой цвет, какой хотите, чтобы ваш фон был.
4. сохраните изображение как "dot.jpg" и загрузите в папку "images" на своем веб-сайте.

---

не работает?

Посетите http://yourwebsite.com/images/dot.jpg и посмотрите если вы видите точечное изображение. Если вы видите ошибку «404 not found», то вы используете неправильный URL. Зафиксируйте URL, и он будет работать.

ПРИМЕЧАНИЕ:

Измените yourwebsite.com на ваш сайт.

Удачи!

Answer 2

Взгляните на CssPlay.co.uk

Answer 3

Ты прав! Хороший улов - декларации о высоте 100% не нужны! спасибо :) две самые важные вещи - это то, что фоновое изображение или цвет боковой панели такой же, как у контейнера, и что нижний элемент div (в данном примере «нижний колонтитул») имеет свойство «clear: both». Я думаю, что все остальное можно редактировать сколько угодно ...

Answer 4

Я сталкивался с этой проблемой несколько раз в разных проектах, но я нашел решение, которое работает для меня. Вы должны использовать четыре тега div - один, который содержит боковую панель, основное содержимое и нижний колонтитул.

Сначала создайте элементы стиля в вашей таблице стилей:

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
height: 100%;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
height: 100%;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

Вы можете редактировать различные элементы по своему усмотрению, просто убедитесь, что вы не изменили свойство нижнего колонтитула «clear: both» - это очень важно оставить.

Затем просто настройте свою веб-страницу следующим образом:

<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>

Я написал более подробное сообщение в блоге об этом по адресу http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container. Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы. Надеюсь, это поможет!

Answer 5

В принципе, вы не можете. Если вы пытаетесь заставить элемент дизайна (скажем, фоновое изображение) расширяться до самого дна, лучший способ - подделать его. Под этим я подразумеваю создание оболочки, которая оборачивает все ваши боковые панели и контент, и делает фоновое изображение фоном этой оболочки. Затем он простирается до самого дна.

Еще один способ сделать это, если вы действительно хотите (съежиться), это использовать таблицы. Но, пожалуйста, не надо.

Answer 6

К сожалению, нет надежного способа добиться этого.

Одним из способов сделать следующее без использования JavaScript является метод Faux-Columns .

В основном это включает применение background-image к родительским элементам плавающих элементов, что заставляет вас верить, что два элемента имеют одинаковую высоту.

Более подробная информация доступна по адресу:

Список отдельно: Статьи: Искусственные колонны