Div width=100% более ширины окна браузера

pivkos · February 9, 2011

Здравствуйте!

Уже часа 2 ломаю голову и никак не могу найти решение:

Есть страница, контент, шире окна браузера.

Внизу есть футер, в стилях стоит width: 100%

Но футер тянется не на всю ширину страницы, а только на ширину окна браузера.

Doctype - strict.

Вот пример кода с описанной выше проблемой:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Див по ширине страницы</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		  <style type="text/css">
			html, body {
				margin: 0px;
				padding: 0px;
				width: 100%;
				height: 100%;
			}
			#wrap1 {
				margin: 0 auto;
			}
			#content1 {
				position: relative;
				width: 1200px;
				height: 1000px;
				background-color: blue;

			}
			#content2 {
				position: relative;
				margin-left: 1200px;
				width: 200px;
				height: 200px;
				background-color: green;				
			}
			#footer {
				width: 100%;
				background-color: red;
			}
		  </style>
	</head>
<body>
	<div id="wrap1">
		<div id="content1">Content 1
			<div id="content2">Content 2</div>
		</div>
	</div>
	<div id="footer">Footer</div>
</body>
</html>

Подскажите, как растянуть футер на всю страницу?

Заранее спасибо!

swetlana · February 9, 2011

убрать width: 100%

pivkos · February 9, 2011

Убирал, увы не помогает

Я уже ка только не выкручивал...поэтому и пришёл сюда.

Vlad · February 9, 2011

У вас установлена ширина body как 100% и футера тоже, вот и получается что он занимает не всю доступную ширину, а соответствует своему родителю, который в свою очередь равен ширине окна. Путаница, одним словом. Решение простое — не мучайте страницу и браузеры, уберите эти width: 100% отовсюду.

contact · February 9, 2011

ну как бы все логично width:100% - это ширина окна браузера. а не ширина всего твоего документа.

#footer {

width: 1400px; все исправит!

Edited February 9, 2011 by contact

swetlana · February 9, 2011

а всё потому что конструкция какая-то излишне навороченная.

Что я здесь наблюдаю:

Две колонки фиксированной ширины.

Следовательно у документа фиксированная ширина. И это отнюдь не 100% от ширины окна браузера. Точнее, 100% получается в одном частном случае, когда ширина окна 1400px. Так и надо указывать.

position: relative — если честно, совсем непонятно зачем.

Вот код, который работает, как вы ожидаете:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Див по ширине страницы</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		  <style type="text/css">
			html, body {
				margin: 0px;
				padding: 0px;
				width: 1400px;
/*				 height: 100%; */
			}
			#wrap1 {
				margin: 0 auto;
			}
			#content1 {
/*				 position: relative; */
				width: 1200px;
				height: 1000px;
				background-color: blue;

			}
			#content2 {
/*				 position: relative; */
				margin-left: 1200px;
				width: 200px;
				height: 200px;
				background-color: green;				
			}
			#footer {
/*				 width: 100%; */
				background-color: red;
			}
		  </style>
	</head>
<body>
	<div id="wrap1">
		<div id="content1">Content 1
			<div id="content2">Content 2</div>
		</div>
	</div>
	<div id="footer">Footer</div>
</body>
</html>

pivkos · February 9, 2011

ну как бы все логично width:100% - это ширина окна браузера. а не ширина всего твоего документа.
#footer {
width: 1400 px; все исправит!

Исправит, но тут гвоздь в другом.

Вот модифицирую исходный код вот так:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Див по ширине страницы</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		  <style type="text/css">
			html, body {
				margin: 0px;
				padding: 0px;
				height: 100%;
			}
			#wrap1 {
				margin: 0 auto;
				width:1200px;
			}
			#content1 {
				position: relative;
				width: 1200px;
				height: 1000px;
				background-color: blue;

			}
			#content2 {
				position: relative;
				margin-left: 1200px;
				width: 200px;
				height: 200px;
				background-color: green;				
			}
			#footer {
				width: 1400px;
				background-color: red;
			}
		  </style>
	</head>
<body>
	<div id="wrap1">
		<div id="content1">Content 1
			<div id="content2">Content 2</div>
		</div>
	</div>
	<div id="footer">Footer</div>
</body>
</html>

P.S. #content1 нужно центровать по горизонтали.

swetlana · February 9, 2011

оказывается, всё ещё интереснее.

А давайте-ка всю задачу целиком.

pivkos · February 9, 2011

а всё потому что конструкция какая-то излишне навороченная.

Потому что сам макет сложнее, я попросту постарался воспроизвести проблемную часть, выбросив шелуху.

Вот код, который работает, как вы ожидаете:

Увы, нет.

Сорри, я сразу не уточнил, что необходимо блок #content1 отцентровать.

оказывается, всё ещё интереснее.
А давайте-ка всю задачу целиком.

#content1 - основной блок, он главный, тут вся контентная составляющая, поэтому он должен быть по центру окна браузера.

#content2 - несёт только декоративный эффект, прилеплен справа к #content1.

swetlana · February 9, 2011

pivkos, это явно ещё не вся задача. Должен ли этот декоративный блок показываться всегда? К примеру, когда размер окна меньше 1400

pivkos · February 9, 2011

pivkos, это явно ещё не вся задача. Должен ли этот декоративный блок показываться всегда? К примеру, когда размер окна меньше 1400

Да, должен быть. Если не помещается целиком, допустимо его обрезание справа.

Если же он не вмещается вообще, то впринципе он не нужен(и при таком раскладе, разумеется желательно его убрать).

Edited February 9, 2011 by pivkos

swetlana · February 9, 2011

так должен быть или допускается обрезание?

pivkos · February 9, 2011

так должен быть или допускается обрезание?

1)При ширине экрана от 0 до 1999 - доп. блок не нужен. Центральный блок прижат к левому краю(центровать нечего, т.к. он не вмещается), есть горизонатальный скрол(для возможности обозрения всего основного блока).

2)При ширине 1200. Центральный блок также прижат к левому краю, горизонтального скролла нет. Доп. блока тоже нет.

3)При ширине экрана от 1200 до 1400, доп. блок нужен, но может быть обрезан справа. Центральный блок строго по середине окна браузера. Горизонтального скролла нет.

4)При ширине >1400 - центральный блок также строго по центру. Дополнительный отображается целиком. Горизонтального скролла нет.

Вот как-то так

Edited February 9, 2011 by pivkos

swetlana · February 9, 2011

1)При ширине экрана от 0 до 1999 - доп. блок не нужен. Центральный блок прижат к левому краю(центровать нечего, т.к. он не вмещается), есть горизонатальный скрол(для возможности обозрения всего основного блока).

такая ширина у подавляющего большинства современных мониторов.

2)При ширине 1200. Центральный блок также прижат к левому краю, горизонтального скролла нет. Доп. блока тоже нет.

это частый случай пункта 1.

3)При ширине экрана от 1200 до 1400, доп. блок нужен, но может быть обрезан справа. Центральный блок строго по середине окна браузера. Горизонтального скролла нет.

входит в противоречие с пунктом 1, согласно которому при этой ширине дополнительный блок не нужен.

4)При ширине >1400 - центральный блок также строго по центру. Дополнительный отображается целиком. Горизонтального скролла нет.

При ширине 1500 (а это более 1400) центральный блок располагается по центру, оставляя по сторонам по 150px.

Ширина дополнительного блока 200px.

Каким образом 200px могут уместиться в 150px так, чтобы быть показанными целиком, да ещё и без скролла?

pivkos · February 9, 2011

входит в противоречие с пунктом 1, согласно которому при этой ширине дополнительный блок не нужен.

Сорри, внесём правки, от 1201 до 1600.

При ширине 1500 (а это более 1400) центральный блок располагается по центру, оставляя по сторонам по 150px.
Ширина дополнительного блока 200px.
Каким образом 200px могут уместиться в 150px так, чтобы быть показанными целиком, да ещё и без скролла?

А здесь получется >1600

Добавлено:

Сделал всё из своего списка, но не могу убрать горизонтальный скролл при размере экрана от 1201 до 1600.

В ФФ/хроме всё ок, лишнего горизонтального скролла нет, следовательно и футер за пределами экрана не нужен.

А как быть с ослом?

Добавлено 2:

Ура! Ура! Ура! Всё работает, всё красиво, как на 10-и дюймовом нетбуке, так и на широкоформатном большом монике.

Всем спасибо!

Edited February 9, 2011 by pivkos

Sign In

Div width=100% более ширины окна браузера

Question

Link to comment

Share on other sites

14 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

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information