Jump to content
  • 0

Футер я прижал, появился вопрос

html_root

Asked by html_root,

 Share

Question

html_root Explorer

html_root

Posted
Posted (edited)

Ребят, я новичок в html изучаю базис.

В общем у меня макет header content footer

Footer я прижал к низу браузера. А как можно растянуть блок div с контентом от шапки до подвала?

Макет резиновый по вертикали.

Edited by html_root
Link to comment
Share on other sites
  • Answers 87
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

87 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted
Дык я же сам подсказал тебе решение...

Но признаю что я поленился так сделать, а ты не :)

Все это окончательный вариант, обжалованию неподлежит B)

Нее, это решения я придумал сам исходя из своей прежней идеи, а насчёт подсказки даже не понял, если честно B)

Может не окончательный, я щас прорабатываю ещё план(хотя я уже 1000 идей перепробывал B) ), если удастся, то будет точно окончательный вариант, а пока даа, вот этот :)

Link to comment
Share on other sites
  • 0
html_root Explorer

html_root

Posted
  • Author
Posted

Оу! А тема живее всех живых :) Радует

Парни я вот поверстал и подумал, если всё так сложно, и макет так сказать не стандартный, может проще будет бэкграунды шапку и подвал в таблицу запихнуть, а в центре уже работать дивами? Чтобы меньше было дивов и браузеры с ума не сходили?

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

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted

http://psywalker.ru/Forum/Column/main6.html

Если ты это считаешь сложным - то готовся к еще большим трудностям :)

На самом деле это только сразу сложным кажется.

Я несоветую делать это таблицей. Таблицам табличное, или если действительно решение дивами будет слишком сложным, а таблицей можна сделать проще, то тогда можна и таблицей.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

Это не сложно, это интересно, особенно когда уже появляется спортивный интерес. Спасибо медведю :)B)

А насчёт таблиц - НЕ В КОЕМ СЛУЧАЕ, даже не вздумай, эту задачу можно решить разными способами на дивах, мало того они крепкие

Link to comment
Share on other sites
  • 0
Scrum Explorer

Scrum

Posted
Posted

css for ie6

  #carrier {
	width: expression((documentElement.clientWidth||document.body.clientWidth)<1024?'800px':'auto');
	/*height: expression((documentElement.clientHeight||document.body.clientHeight)<768?'768px':'100%');*/
  }

Css

  html, body {
	height: 100%;
	margin:0;
	padding:0;
	border: none;
  }
  html {
	overflow: auto;
  }
  #carrier {
	height: 100%;
	min-width: 800px;
	max-height: 100%;
  }
  #head, #footer {
	height: 113px;
	position: relative;
	background: orange;
  }
  #footer {
	clear: both;
  }
  .substrate {
	height: 113px;
  }
  html>body #content {
	height: auto !important;
  }
  #content {
	height: 100%;
	min-height: 100%;
	margin: -113px 120px;
	background: gray;
  }

Html

<!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" xml:lang="en" lang="en">

<head>
<link rel="stylesheet" href="css/style.css" type="text/css" />
  <!--[if IE 6]>
<link rel="stylesheet" href="css/ie6.css" type="text/css" />
  <![endif]-->
</head>

<body>
	<div id="carrier">
		<div id="head">
			head
		</div>
		<div id="content">
			<div class="substrate"></div>
				content
			<div class="substrate"></div>
		</div>
		<div id="footer">
			footer
		</div>
	</div>

</body>

</html>

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted (edited)
хуже. Что будет если в контенте появиться текст ? Почему футтер наезжает на хеад ?

Гонево, что на что наезжает? всё проверено 20 раз, заполни контейнер .wrap и сам всё увидишь.

Медведь бы меня убил, если бы это было так :)

Edited by psywalker
Link to comment
Share on other sites
  • 0
Scrum Explorer

Scrum

Posted
Posted
Гонево, что на что наезжает? всё проверено 20 раз, заполни контейнер .wrap и сам всё увидишь.

Медведь бы меня убил, если бы это было так :)

Точно, гонево. Эх давненько не разминался.

Итак начнем.

1.

А как можно растянуть блок div с контентом от шапки до подвала?

1.1 Шапка в Вашем примере отсутствует. (но это не столь уж важно.)

1.2 Скрин № 1

1.3 Скрин № 2 (уже без текста)

Пока читаете. Пишу много букв и делаю еще много скринов.

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted (edited)

Дааа, скрин номер адин зачетный ))) только флоат этому блоку спасет

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

Edited by Justnewone
Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)

это реально баг оперы!!!

Футер наезжает не на шапку(так как там нет хедера!!!), а на бг который на боди расположен. если добавите хедер, или контент(в чем задачи небыло, так как делался только каркас, и неважно что потом будет внутри). Ты когда на боди градиент вешаешь, то указываешь ему(боди) минимальную высоту по градиенту, чтобы он недай бог не ушел за пределы боди?

Единственное что я бы оставил враппер общий, а так вполне рабочий пример.

Ну и минимальную ширину Макс забыл как обычно :)

у тебя неоправданные експрешены. При чем где ты видел высоту окна браузера на монике 17" - 768?

так же как и ширину 1024 в ие

если с твоего примера убрать хедер, то футер тоже на верхний бг заедет при невысоком окне браузера

Edited by mishka2
Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
это реально баг оперы!!!

Футер наезжает не на шапку(так как там нет хедера!!!), а на бг который на боди расположен. если добавите хедер, или контент(в чем задачи небыло, так как делался только каркас, и неважно что потом будет внутри). Ты когда на боди градиент вешаешь, то указываешь ему(боди) минимальную высоту по градиенту, чтобы он недай бог не ушел за пределы боди?

Единственное что я бы оставил враппер общий, а так вполне рабочий пример.

Ну и минимальную ширину Макс забыл как обычно :)

у тебя неоправданные експрешены. При чем где ты видел высоту окна браузера на монике 17" - 768?

так же как и ширину 1024 в ие

Максим уверен. что все F11 нажимают ))))

Link to comment
Share on other sites
  • 0
Scrum Explorer

Scrum

Posted
Posted

Это не баг. В моем примере все прекрасно работает.

Ты когда на боди градиент вешаешь, то указываешь ему(боди) минимальную высоту по градиенту, чтобы он недай бог не ушел за пределы боди?

это кому вопрос ?

у тебя неоправданные експрешены. При чем где ты видел высоту окна браузера на монике 17" - 768?

меняется в зависемости от требований (это всего лишь каркас)

если с твоего примера убрать хедер, то футер тоже на верхний бг заедет при невысоком окне браузера

скрин в студию

Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

Posted
Posted
Ты когда на боди градиент вешаешь, то указываешь ему(боди) минимальную высоту по градиенту, чтобы он недай бог не ушел за пределы боди?

от этого, скажем, от верхней части, отказался совсем. Отучила Битрикс. В залогиненом состоянии вешала в боди в самое начало панель, ну и все ехали вниз, правда за исключением всяких градиентов на боди и хтмл. =)

Link to comment
Share on other sites
  • 0
Scrum Explorer

Scrum

Posted
Posted

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

css

  html, body {
	height: 100%;
	margin:0;
	padding:0;
	border: none;
  }
  html {
	overflow: auto;
  }


  #carrier {
	height: 100%;
	min-width: 800px;
	max-height: 100%;
  }
  #head, #footer {
	height: 113px;
	position: relative;
	background: orange;
  }
  #footer {
	clear: both;
  }
  .substrate {
	height: 113px;
  }
  html>body #content, html>body .box {
	height: auto !important;
  }
  #content {
	height: 100%;
	min-height: 100%;
	margin: 0 120px -113px 120px;
	background: gray;
  }

html

все тот же только без хеда.

Link to comment
Share on other sites
  • 0
mishka Explorer

mishka

Posted
Posted (edited)

ну дык ты используешь пустой блок распорку substrate

в ие6 все развалилось потому что у меня моник 17" и нет в окне браузера ие6 1024px по ширине!

Edited by mishka2
Link to comment
Share on other sites
  • 0
Scrum Explorer

Scrum

Posted
Posted

и чего в нем страшного ? он не кусается.

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

Да собственно чего я настаиваю.

Вам анализировать и выбирать подходящий под ваши требования каркас.

Link to comment
Share on other sites
  • 0
ufs Explorer

ufs

Posted
Posted

Пишу от лица psywalker, так получилось)).

1) Scrum прости, ничего личного, но твой вариант не стоит свеч, куча грязного кода, так же блоков, и експрешаны для ИЕ6 меня поразили. Дело в том, что на ровне с несколькими предложенными вариантами, тем же Медведем - твой вариант просто меркнет, уж извини, но факт.

2) Насчёт подвала, который висит в воздухе в Опере это старая история, дело в том, что это действительно баг всех Опер, и даже 10-ой, что удивительно, причём я лично считаю это уже не проблемой, так как если посмотреть, то все самые нормальные реализации с футером внизу делаются именно на релативе и абсолютном подвале. Поэтому тут уж надо это принять и никуда не деться, игра стоит свеч, ИМХО и не только моё.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept