Подвал и position:absolute

lolka84 · July 2, 2011

Как правильно расположить подвал, что б он всегда был под дивом main ?

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

Хелп плз, заранее спасибо!


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Документ без названия</title>

<style type="text/css">

body,html {
	width:100%; 
	height:100%; 
	min-width:780px;
	position:absolute;
}
#main {
	width:94%;
	height:auto;
	min-height:370px;
	margin:0 3%;
	position:absolute;
	background-color:#eee;
}
#menu {
	width:100%;
	height:50px;
	position:absolute;
	background-color:#ddd;
}
#center {
	width:100%;
	height:auto;
	min-height:320px;
	position:absolute;
	top:50px;
	background-color:#ccc;
}
#footer {
	width:100%;
	height:80px;
	background-color:#bbb;
}

</style>

</head>

<body>

    <div id="main">

    	<div id="menu">



        </div>

        <div id="center">



        </div>

    </div>

    <div id="footer">



    </div>

</body>
</html>

Edited July 2, 2011 by lolka84

Softlink · July 2, 2011

так тут же куча всяких примеров http://forum.htmlbook.ru/index.php?showtopic=5870&st=0

lolka84 · July 2, 2011

Тему смотрел, случаев, похожих на мой, не увидел

Softlink · July 2, 2011

Тему смотрел, случаев, похожих на мой, не увидел

так, а в чем у вас кардинальное отличие? Тем, что вы все на абсолютах построили?

lolka84 · July 2, 2011

Угу. Если вас не затруднит, дайте линк, где об этом почитать можно. Заранее спасибо!

Softlink · July 2, 2011

Угу. Если вас не затруднит, дайте линк, где об этом почитать можно. Заранее спасибо!

по-моему вы этим сами себе проблемы создаете. Все блоки выпадают из потока. Как будете бороться с высотой?

Если, допустим, у

<div id="center">

будет высота 2000px, то он в любом случае залезет под футер и пойдет еще ниже. Т.к. футер у вас пляшет от body, у которого высота равна 100%.

Если у вас не будет тянуться ничего, то ставьте фикс высоту всем блокам и футер прибивайте:

position:absolute;
bottom:0px;

но как это будет смотреться на разных разрешениях, я не знаю.

lolka84 · July 2, 2011

Разобрался вроде.

http://jsfiddle.net/dENfJ/11/

Так правильно будет ?

Softlink, спасибо за помощь!

Edited July 2, 2011 by lolka84

Softlink · July 2, 2011

Разобрался вроде.
http://jsfiddle.net/dENfJ/8/
Так правильно будет ?
Softlink, спасибо за помощь!

правильно-то правильно, но попробуйте добавить много текста в блок center. Прям много-много и посмотрите все минусы вашей "абсолютной" верстки

ой, извиняюсь, вы переделали все на релативах.

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

lolka84 · July 2, 2011

Это я уже понял, еще раз спасибо

Softlink · July 2, 2011

Это я уже понял, еще раз спасибо

на здоровье! У вас все получится

Sign In

Подвал и position:absolute

Question

lolka84

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Softlink

Link to comment

Share on other sites

lolka84

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

lolka84

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

lolka84

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

lolka84

Link to comment

Share on other sites

Softlink

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information