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

Question

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

Answer 1

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

Один из способов сделать следующее без использования JavaScript - это метод, называемый Колонки.

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

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

A List Apart: Articles: Faux Columns

Answer 2

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

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

Answer 3

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

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; 
} 

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

Тогда просто создать свой веб-страницы, как это:

<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

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

Answer 6

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

В 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» и загрузите его в папку «изображения» на своем веб-сайте.

---

не работает?

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

Примечание:

Изменить "yourwebsite.com" на свой веб-сайт.

Удачи вам!