Вопрос по вёрстке

28 сообщений

#15 лет назад

Товарищи фрилансеры верстальщики!)
Вот такой вопрос:
как сверстать страничку из трёх столбцов



________

|  baner |

|_ __ ___|

| content|

|______  |

| footer |

|_ _____ |

вот такую

Tак чтобы футер был прижат к низу страницы.
Вроде всё стандартно, никаких сложностей, но нужно чтобы средний столбец был с фоном градиентом.
Соответственно растягивался на всё пространство между банером и футером.

сейчас такой код

#wrapper {
width: 1000px;
margin: 0 auto;
min-height: 100%;
height: auto !important;
height: 100%;
}

#header {
height: 150px;
background: #FFE680;
}

#content {
padding: 0 0 100px;
}

#footer {
width: 1000px;
margin: -100px auto 0;
height: 100px;
background: #BFF08E;

<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
</div>
<div id="footer"></div>

279 сообщений

#15 лет назад

Почитай ссылка

28 сообщений

#15 лет назад

_VersouL_
спасибо. почитал, попробовал. не совcем то что мне нужно.
центральная ячейка должна тянуться на 100%. Как в старой доброй табличной верстке c height="100%"

2195 сообщений

#15 лет назад

1. что мешает задать фон не для content, а для wrapper?
2. Если ну очень хочется для content, то, например, так:



#wrapper {overflow:hidden}

#content {

background:url(ссылка);

margin-bottom:-32767px;

padding-bottom:32867px;

}

28 сообщений

#15 лет назад

Sir_Michael
в IE и в Chrome такой трюк не работает(

28 сообщений

#15 лет назад

Вот такой код сейчас

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>


<body>


<div id="wrapper">

	<div id="header">Header</div>

	<div id="content">Content</div>

</div>

<div id="footer">Footer</div>


</body>

</html>



* {

	margin: 0;

	padding: 0;

}

html {height: 100%}

body {

	font: 12px/18px Arial, Tahoma, Verdana, sans-serif;

	width: 100%;

	height: 100%;

}

#wrapper {

	width: 1000px;

	margin: 0 auto;

	min-height: 100%;

	height: auto !important;

	height: 100%;

	overflow:hidden;

}


#header {

	height: 150px;

	background: #FFE680;

}


#content {

	padding: 0 0 100px;

	background: url(ссылка);

	margin-bottom:-32767px;

	padding-bottom:32867px;

}


#footer {

	width: 1000px;

	margin: -100px auto 0;

	height: 100px;

	background: #BFF08E;

}

2195 сообщений

#15 лет назад

medviktor, это в каком Chrome не работает? Все должно работать. Даже специально ваш пример запустил и в Chrome и в Chromium.
В IE же проблема не с этим трюком, а с hasLayout, можно полечить с #content {zoom:1} (такое лучше писат в conditional comments).

28 сообщений

#15 лет назад

Хром 0.2.153.1. Тут контент наезжает на футер, тем самым скрывая его.
В 3 версии работает

ладно с ним всё хорошо.

Другая проблема. При большом количестве контента и в Опере на футер текст заезжает...

28 сообщений

#15 лет назад

#content {

	padding: 0 0 100px;

	background: #aaaaaa;

	margin-bottom:-32767px;

	padding-bottom:32867px;

	<!-->

	zoom: 1;

	<!-->

}

вот так проблема только в Опере при большом количестве контента (когда не помещается на страницу, наезжает на футер) и в IE при малом количестве (див content не тянется)

2195 сообщений

#15 лет назад

Ну так измените способ приклеивания футера, там как минимум три общеизвестных варианта.
Цитата:

Э... Это как?

28 сообщений

#15 лет назад

Цитата ("Sir_Michael"):

Э... Это как?

ну я имел ввиду для IE)) сократил запись

это не в css