3 колонки у каждой получается своя высота

klara7 · August 29, 2010

Доброе время суток! В верстке не сильна, поэтому спрашиваю. У меня сайт из 3 колонок. Они должны быть одинаковой высоты и заканчиваться у футера. Но проблема в том, что они растягиваются по содержимому и обрываются.

Пробовала ставить высоту 100%, все равно не получается.

Если укажите также ошибки, буду очень благодарна.

css

/* Основные элементы для всей страницы */

body {

color: #000000; /* Цвет шрифта */

margin: 0px auto; /* Отступы и положение */

font-family: Arial, Verdana, 'Times New Roman'; /* Шрифт */

font-size: 14px; /* Размер шрифта */

}

/* Все для ссылок: активных, наведенных, посещенных */

A {

FONT-SIZE: 11px; /* Размер шрифта */

FONT-FAMILY: Tahoma, Verdana, sans-serif; /* Шрифт */

COLOR: #067f9e; /* Цвет шрифта*/

}

A:active {

COLOR: #067f9e

}

A:visited {

COLOR: #660066

}

A:hover {

COLOR: #067f9e

}

A:hover {

TEXT-DECORATION: none

}

/* Таблица */

table {

BORDER #CC0000 1px solid; /* Граница: цвет, ширина, тип линии */

border-collapse: collapse; /* Отображать одинарные линии между ячейками */

}

/* Заголовки ячеек - 1 строка в шапке таблицы */

th {

text-align: center; /* Выравнивание */

background: #FFFACD; /* Цвет фона ячеек */

FONT-SIZE: 80%; /* Размер шрифта */

padding: 5px; /* Поля вокруг содержимого ячеек */

border: 1px solid black; /* Граница вокруг ячеек */

}

/* Ячейки */

td {

FONT-FAMILY: Arial, Verdana, sans-serif; /* Шрифт */

FONT-SIZE: 13px; /* Размер шрифта */

padding: 5px; /* Поля вокруг содержимого ячеек */

border: 1px solid black; /* Граница вокруг ячеек */

background: #F0F8FF; /* Цвет фона ячеек */

}

/* Шапка */

#header {

height: 120px; /* Высота*/

width: 1024px; /* Ширина */

}

/* Параметры поля страницы 1024 */

#container {

background: #FFFFFF;

background-position: center bottom;

margin: 0 auto;

width: 1024px;

}

/* Левая колонка баннеров */

#banner {

background: #F0F8FF;

float: left;

width: 170px;

}

img.banner{

padding: 5px 0px 5px 0px;

}

#content {

float: left;

width: 684px;

height: auto; /* Высота полосы*/

}

#text p {

font-family: Arial, Verdana, sans-serif;

font-size: 10pt;

text-align: justify;

text-indent: 1.5em;

margin: 0;

padding: 5px 10px;

}

/* Картинки выравнивается справа и слева от текста */

.img1 {

margin: 10px 10px;

float:right;

}

.img2 {

margin: 10px 10px;

float: left;

}

/* Заголовки h1-h4*/

h1 {

color: #f60; /* цвет шрифта */

font-size: 180%; /* размер в процентах */

font-weight: normal; /* без жирности */

text-align: center; /* выравнивание по центру */

padding: 5px 15px;

}

h2 {

color: #f60; /* цвет шрифта */

font-size: 150%; /* размер в процентах */

font-weight: normal; /* без жирности */

text-align: center; /* выравнивание по центру */

padding: 5px 10px; /* отступ 1-сверху и снизу, 2 - с права и лева */

}

h3 {

color: #f60; /* цвет шрифта */

font-size: 120%; /* размер в процентах */

font-weight: normal; /* без жирности */

text-align: center; /* выравнивание по центру */

padding: 5px 15px; /* отступ 1-сверху и снизу, 2 - с права и лева */

}

h4 {

color: #f60; /* цвет шрифта */

font-size: 100%; /* размер в процентах */

font-weight: bold; /* жирный */

text-align: center; /* выравнивание по центру */

padding: 5px 15px; /* отступ 1-сверху и снизу, 2 - с права и лева */

}

/* Цитата */

q {

border: 0px; /* параметры границы */

background-color: #FFFACD; /* цвет фона */

margin: 10px 30px;

color: #C00; /* цвет шрифта */

font-size: 90%; /* размер в процентах */

font-style: italic; /* курсив */

line-height: 1; /* межстрочный интервал */

}

#menu {

background: #F0FFFF;

float: right;

width: 170px;

height: 100%; /* межстрочный интервал */

}

ul.menu {

list-style-image: url('pict/_5.gif'); /* Путь к фоновому изображению */

list-style-position: outside; /* Маркер обтекается текстом */

}

p.menu {

text-indent: 0em;

}

table.menu {

border: 0px; /* параметры границы */

background-color: #FFA500; /* цвет фона */

color: #C00; /* цвет шрифта */

font-size: 80%; /* размер в процентах */

font-style: italic; /* курсив */

width: 170px;

padding: 5px;

}

th.menu

{

padding: 8px;

border: solid 1px #CCCCCC;

background-color: #FFC0CB; /* цвет фона */

vertical-align: top;

text-align: center;

font-size: 100%; /* размер в процентах */

color: #000; /* цвет шрифта */

}

td.menu

{

padding: 2px 0 2px 0;

border: solid 1px #CCCCCC;

vertical-align: top;

font-size: 100%; /* размер в процентах */

text-align: left;

color: #8B4513; /* цвет шрифта */

}

#clear {

clear:both; /* Отмена обтекания элемента */

}

/* Подвал*/

#footer {

color: #fff; /* Цвет шрифта */

font-family: Arial, Helvetica, sans-serif; /* Семейство шрифта */

text-align: right; /* Выравнивание текста относительно страницы */

font-size: 9pt; /* Размер шрифта */

padding: 15px; /* Отступ*/

width: 1024px; /* Ширина*/

clear: both;

margin: 0 auto;

}

#footer a {

color: #ff0;

}

#footer a:hover {

color: #f00;

}

/*CSS sabrosus style pagination*/

DIV.sabrosus {

PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center

}

DIV.sabrosus A {

BORDER-RIGHT: #9aafe5 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #9aafe5 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #9aafe5 1px solid; COLOR: #2e6ab1; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #9aafe5 1px solid; TEXT-DECORATION: none

}

DIV.sabrosus A:hover {

BORDER-RIGHT: #2b66a5 1px solid; BORDER-TOP: #2b66a5 1px solid; BORDER-LEFT: #2b66a5 1px solid; COLOR: #000; BORDER-BOTTOM: #2b66a5 1px solid; BACKGROUND-COLOR: lightyellow

}

DIV.pagination A:active {

BORDER-RIGHT: #2b66a5 1px solid; BORDER-TOP: #2b66a5 1px solid; BORDER-LEFT: #2b66a5 1px solid; COLOR: #000; BORDER-BOTTOM: #2b66a5 1px solid; BACKGROUND-COLOR: lightyellow

}

DIV.sabrosus SPAN.current {

BORDER-RIGHT: navy 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: navy 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; BORDER-LEFT: navy 1px solid; COLOR: #fff; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: navy 1px solid; BACKGROUND-COLOR: #2e6ab1

}

DIV.sabrosus SPAN.disabled {

BORDER-RIGHT: #929292 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #929292 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; BORDER-LEFT: #929292 1px solid; COLOR: #929292; MARGIN-RIGHT: 2px; PADDING-TOP: 2px; BORDER-BOTTOM: #929292 1px solid

}

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w1.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<title>Идеи для Дома и Офиса</title>

</head>

<body>

</div>

<tr>

<th class="menu">Для бизнеса и карьеры</th></tr>

<li>Коллекция бизнесс-визиток</li>

</ul>

</td></tr>

</table><br />

<tr>

<th class="menu">Для бизнеса и карьеры</th></tr>

<li>Коллекция бизнесс-визиток</li>

</ul>

</td></tr>

</table>

</div>

<h1>Заголовок 1</h1>

<h2>Заголовок 2</h2>

<h3>Заголовок 3</h3>

<h4>Заголовок 4</h4>

<p>

И.Г.: А вот чем раньше задуматься, тем лучше. Чаще всего говорят про морщины. Но «плывет», как правило, низ: подбородок, шея, уголки губ, носогубный треугольник. Эта область быстрее выдает возраст. Какое универсальное упражнение можно выполнять, чтобы держать мышцы этой области лица в тонусе? </p>

<p>Сильно натяните нижнюю губу на верхнюю, потом растяните уголки губ к ушам, задержите на счет пять, затем верните в исходное положение.

Или еще одно простое упражнение. Подставьте руку к подбородку вот так (как на фото – прим. автора). Вы хотите открыть рот, но кулак вам не дает этого сделать. И вот вы сейчас 30 секунд вряд ли высидите, потому что вы не занимались: скорее всего, у вас сведет мышцы. И таких нужно сделать три подхода. Это упражнение тренирует мышцы шеи и подбородка. </p>

<p>Дальше: вы открыли рот и хотите его закрыть с помощью этого же кулака, но челюсть вам этого сделать не дает. И точно так же три подхода по 30 секунд. Вот у вас три минуты – но вы уже область шеи и носогубного треугольника себе проработали. </p>

<p>

<p>Дальше идут упражнения на щеки, на глаза. На лоб, на все поперечные морщины. Если к этому еще присоединить самомассаж – вообще отлично! Конечно, массаж лучше проводить у косметолога, поскольку самомассаж уступает массажу у профессионала. </p>

</div>

<q>Эта область быстрее выдает возраст. Какое универсальное упражнение можно выполнять, чтобы держать мышцы этой области лица в тонусе?</q>

<ul>

<li>Коллекция бизнесс-визиток</li>

</ul>

</th>

</tr>

<tr>

<td>Нефть</td><td>5</td><td>7</td><td>2</td><td>8</td>

</tr>

<tr>

<td>Золото</td><td>3</td> <td>6</td><td>4</td><td>6</td>

</tr>

<tr>

<td>Дерево</td><td>5</td><td>8</td><td>3</td><td>4</td>

</tr>

</table>

</div>

<div id="footer">Идеи для дома и офиса</div>

</div>

</body>

</html>

v.asya · August 29, 2010

Можно попробовать высоту в пикселях, а не процентах.

Searcher · August 30, 2010

1. Обрамляйте публикуемый тут код в спецтэги при помощи кнопочки "код" над формой ввода сообщения.

2. Вы сверстали макет блоками, а они и не должны выравниваться по высоте. Они не предназначены для такого и не знают высоту соседних блоков.

3. Есть способы создать иллюзию равных колонок на блоках, но вам лучше эти 3 колонки поместить не в блоки, а в ячейки таблицы. С таблицей вы справитесь.

klara7 · August 30, 2010

Можно попробовать высоту в пикселях, а не процентах.

Можно, но это очень не удобно

1. Обрамляйте публикуемый тут код в спецтэги при помощи кнопочки "код" над формой ввода сообщения.
2. Вы сверстали макет блоками, а они и не должны выравниваться по высоте. Они не предназначены для такого и не знают высоту соседних блоков.
3. Есть способы создать иллюзию равных колонок на блоках, но вам лучше эти 3 колонки поместить не в блоки, а в ячейки таблицы. С таблицей вы справитесь.

1.Прошу прощения, не знала.

2-3. Наверное, придется так и делать. А почему нельзя задать им высоту 100%?

Great Rash · August 30, 2010

http://www.master-web.info/equal-height-co...ss-browser-css/

Searcher · August 30, 2010

А почему нельзя задать им высоту 100%?

Относительная величина считается от родительского элемента. Надо у всех родителей тогда указать высоту в 100% в т.ч. и у body и html.

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

Great Rash предложил хороший способ добиться иллюзии одинаковых колонок на блоках. Если разберетесь, можно и его использовать. Но на мой взгляд использование блоков в несвойственных им задачах - нерационально, хотя и полезно для тренировки

klara7 · August 30, 2010

http://www.master-web.info/equal-height-co...ss-browser-css/

Статья действительно очень полезная! Огромная Вам благодарность. буду разбираться

Относительная величина считается от родительского элемента. Надо у всех родителей тогда указать высоту в 100% в т.ч. и у body и html.
А что будет, когда контент какой-нибудь колонки будет больше чем окно броузера? При свойствах по умолчанию контент просто обрежется. Вам такое нужно?

Тут трудно спорить

Great Rash предложил хороший способ добиться иллюзии одинаковых колонок на блоках. Если разберетесь, можно и его использовать. Но на мой взгляд использование блоков в несвойственных им задачах - нерационально, хотя и полезно для тренировки

Тренировка - именно то что мне нужно, потому как только учусь. С таблицами худо, бедно подружилась, а в css пока "плаваю", поэтому решила попробовать Спасибо что не ленитесь объяснять чайникам!

selevit · August 30, 2010

Сталкивался с такой же проблемой - нужно объединить все колонки в один блок, а затем каждой колонке задать максимальный padding и такой же отрицательный margin что то типо -

<div class="container">
<!--Сюда вставляем все блоки колонок -->
</div>

а в css делаем примерно так

.container {
	width: 100%;
	overflow:hidden;
}

.SideLeft {
padding-bottom: 32767px;
margin-bottom: -32767px;
}

свойства Sideleft (Левая колонка) применяем для всех колонок =)

Searcher · August 30, 2010

selevit, приведите пожалуйста полный код макета, а то из обрывков кода тут не все поймут смысл.

selevit · August 30, 2010

selevit, приведите пожалуйста полный код макета, а то из обрывков кода тут не все поймут смысл.

На ХТМЛ примерно так

<div id="wrapper">
<div id="header">
</div> <!--header -->
<div id="container">
<div class="column1"></div>
<div class="column2"></div>
<div class="column3"></div>
</div> <!--container -->
<div id="footer"></div>
</div> <!--wrapper -->

А на CSS что то вроде

#wrapper {
margin: 0 auto;
width: 1000px;
}

#header {
	height: 100px;
	background: blue;
}

#container {
	width: 100%;
	overflow:hidden;
}

.column1 {
float: left;
width: 20%;
background: red;
padding-bottom: 32767px;
margin-bottom: -32767px;
}

.column2 {
float: left;
width: 60%;
background: green;
padding-bottom: 32767px;
margin-bottom: -32767px;
}

.column3 {
float: left;
width: 20%;
background: red;
padding-bottom: 32767px;
margin-bottom: -32767px;
}

Что непонятного то? =)

Edited August 30, 2010 by selevit

Great Rash · August 30, 2010

На ХТМЛ примерно так... А на CSS что то вроде...

Это вам/нам все понятно, а люди с небольшим опытом в верстке нифига не поймут. Поэтому ценность вашего поста снижается. Не проще ли сразу объяснить доступно что к чему или дать ссылку на статью (коих предостаточно), тем более что этот метод старый и много где описан.

Кстати, говорят, что подглючивает в Опере.

mishka · August 30, 2010

Это вам/нам все понятно, а люди с небольшим опытом в верстке нифига не поймут.

Также люди с коекаким опытом скажут - фигня этот метод с паддингами/марджинами. При возможности старайтесь избегать его.

Edited August 30, 2010 by mishka2

Vlad · August 31, 2010

Пора просветительскую работу вести на тему "Используешь слои - скажи нет колонкам одной высоты".

Sign In

3 колонки у каждой получается своя высота

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information