Как прижать блок к низу другого блока?

Bayanruby · April 12, 2011

Вот есть код.

Как мне "правый блок" сделать высотой в 100%?

Чтобы он растягивался вниз на столько, на сколько изменится "центральный блок"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<style>
*{
 margin: 0;
 padding: 0;
}
#container {
 width: 900px; /* Ширина макета */
 margin: 0 auto; /* Выравнивание по центру */
}
#nav {
 width: 200px; /* Ширина левой колонки */
 float: left;
}
#aside {
 width: 300px; /* Ширина правой колонки */
 float: right;
}
#content {
 margin: 0 300px 0 200px; /* Отступ на ширину левой и правой колонки*/
}
</style>
</head>

<body>
<div id="container">
 <div id="nav">Левая колонка</div>
 <div id="aside">Правая колонка</div>
 <div id="content"><p>asd</p>
   <p> </p>
   <p> </p>
 </div>
</div>
</body>
</html>

Gaspode · April 12, 2011

Как вариант:

1. Добавить в #container position: relative;

2. Убрать float у #aside и добавить

position: absolute;
right: 0;
top: 0;
bottom: 0;

Но меня чо-т сомнения терзают на счёт стрессоустойчивости такой раскладки.

Searcher · April 13, 2011

Это не проблемы верстки, это её основы. Ищите в интернете "колонки одинаковой высоты". От себя могу посоветовать такой вариант.

Bayanruby · April 13, 2011

Вот нашёл, немного странный но рабочий, способ.

К дуву который я хочу прижать прописал


padding-bottom: 20000px; 
margin-bottom: -20000px;
display: inline;

Вроде всё работает как я и хотел, а главное не надо много чего переделывать в коде.

Вот только валидный ли так сказать этот способ?

Во всех ли браузерах он работает?

Спасибо =)

psywalker · April 13, 2011

Вот нашёл, немного странный но рабочий, способ.
К дуву который я хочу прижать прописал
padding-bottom: 20000px; 
margin-bottom: -20000px;
display: inline;
Вроде всё работает как я и хотел, а главное не надо много чего переделывать в коде.
Вот только валидный ли так сказать этот способ?
Во всех ли браузерах он работает?
Спасибо =)

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

Bayanruby · April 15, 2011

Спасибо

psywalker · April 15, 2011

Спасибо

Пожалуйста

Sign In

Как прижать блок к низу другого блока?

Question

Bayanruby

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Gaspode

Link to comment

Share on other sites

Searcher

Link to comment

Share on other sites

Bayanruby

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Bayanruby

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information