Проблема с верстокой блоками - HTML и CSS

Moulder · 04.01.2015, 12:25

Добрый день!

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

Делаю блочную верстку сайта. Странице присвоил серый фон. Блок 1 родительский с фиксированной шириной, выравниванием по средине и белым фоном. В нем блок 2 - хидер, по всей ширине, блок 3 и 4 - сайтбар и контент, расположены в одной строке и внизу подвал - блок 5.

Блоки с 2 по 5 без фонового цвета, они должны показывать фон родительского блока. Родительский блок растянул по высоте на 100%, предварительно прописав эту высоту в теги html и body. При этом если содержимое на странице не влазит по высоте и появляется скрллинг вертикальный - родительский блок при этом не растягивается по содержимому, а хочу чтобы он занимал всю высоту страницы независимо от количества содержания. Как этого достичь?

Код HTML:

 <!DOCTYPE html>
 <html>
	<head>
		<meta charset="utf-8">
		<title>Блочная верстка</title>
		<style type="text/css">
			html, body {
				padding:0;
				margin:0;
				height: 100%;
				background-color: #bbb;
			}
			.body {
				width: 960px;
				margin: auto;
				height: 100%;
				padding: 0;
				background-color: #fff;
			}
			.header {
				height: 50px;
				background-color: #8f8;
			}
			.lsb {
				float: left;
				width: 180px;
				background-color: #f88;
			}
			.content {
				float: right;
				width: 780px;
				background-color: #88f;
			}
			.footer {
				height: 60px;
				clear: both;
				background-color: #ff8;
			}
		</style>
	</head>
	<body>
	<div class="body">
		<div class="header">Хидер</div>
		<div class="lsb">Левая панель</div>
		<div class="content">Контент</div>
		<div class="footer">Подвал</div>
	</div>
	</body>
 </html>

Naive · 04.01.2015, 14:00

у .body height замени на min-height

04.01.2015, 12:25	#1
Moulder Новичок Джуниор Регистрация: 04.01.2015 Сообщений: 1	Проблема с верстокой блоками Добрый день! Столкнулся не проблемой, которая на первый взгляд мелочная, но решить её не могу, потому прошу помощи у опытных товарищей. Делаю блочную верстку сайта. Странице присвоил серый фон. Блок 1 родительский с фиксированной шириной, выравниванием по средине и белым фоном. В нем блок 2 - хидер, по всей ширине, блок 3 и 4 - сайтбар и контент, расположены в одной строке и внизу подвал - блок 5. Блоки с 2 по 5 без фонового цвета, они должны показывать фон родительского блока. Родительский блок растянул по высоте на 100%, предварительно прописав эту высоту в теги html и body. При этом если содержимое на странице не влазит по высоте и появляется скрллинг вертикальный - родительский блок при этом не растягивается по содержимому, а хочу чтобы он занимал всю высоту страницы независимо от количества содержания. Как этого достичь? Код HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Блочная верстка</title> <style type="text/css"> html, body { padding:0; margin:0; height: 100%; background-color: #bbb; } .body { width: 960px; margin: auto; height: 100%; padding: 0; background-color: #fff; } .header { height: 50px; background-color: #8f8; } .lsb { float: left; width: 180px; background-color: #f88; } .content { float: right; width: 780px; background-color: #88f; } .footer { height: 60px; clear: both; background-color: #ff8; } </style> </head> <body> <div class="body"> <div class="header">Хидер</div> <div class="lsb">Левая панель</div> <div class="content">Контент</div> <div class="footer">Подвал</div> </div> </body> </html>

04.01.2015, 14:00	#2
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	у .body height замени на min-height Alar, верни репу!

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Проблема с блоками в шаблоне	Seidgin	HTML и CSS	12	17.01.2012 22:36
Арканоид. Проблема с блоками.	xeoni	Помощь студентам	1	11.05.2011 01:50
Считывание из файла блоками. Си	Pecho	Помощь студентам	6	20.02.2011 20:41
Проблема с блоками	Vendetta-V	HTML и CSS	1	22.09.2010 20:44
сортировка текста блоками	Andruha_An	Microsoft Office Word	5	19.04.2010 20:28