Верстка div-ми. Как быть с подвалом?

[kozakmamai]

Есть такая проблема.

Есть страничка в ней одна колонка (div). Как сделать так чтобы в случае не полной заполнености колонки, низ ее был в самом низу окна браузера, но в случае добавления материала низ опускался ну и соотвественно в браузере появляется вертикальный скрол.

Буду очень презнателен если подскажите или дадите сылки на материал. На каком ресурсе можна посмотреть варианты верстки в одну, две, три колонки, с подвалом и тд.

[yopopt]

Про подвал: http://webtest.chebykin.ru/articles/footer/

[addicted]

Пример из данной статьи не работает в ИЕ7

[iRina]

Пример из данной статьи не работает в ИЕ7

Есть идеи почему? Или ждем готового ответа?

[Vlad]

Вот ссылки где приводятся идеи и готовые ответы.

http://vk.osvita.org.ua/footer.htm

http://www.xhtml.ru/2005/10/18/footer-stick/

http://www.zakharov.ms/footer/

http://forum.htmlbook.ru/index.php?showtopic=5129

[Mr.Smith]

есть страница http://utorrent.org.ua/about.htm как заполнить пространство между низом и контентом? где ошибка? помогите пожалуйста.

[polecat]

есть страница http://utorrent.org.ua/about.htm как заполнить пространство между низом и контентом? где ошибка? помогите пожалуйста.

Сомневаюсь что всю страницу кто-то будет смотреть целиком, особенно в таком исполнении.. чего стоит половина CSS в отдельном файле, половина прям в .HTML.

Я не гусь, чтобы туда сюда головой мотать.

[Mr.Smith]

Проблему я вроде как решил, поправил стилы, винес в один файл. Но есть небольшая проблемка, после добавления бордера в 1 пиксель и отсупа в 10 пикселей вверху и внизу, появляется вертикальный скролл. Помогите пожалуйста, не пойму как поправить.

Страница: http://utorrent.org.ua/about.htm

Стили: http://utorrent.org.ua/css/style.css

[homm]

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

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

[Mr.Smith]

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

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

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

[Fu-tai]

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

[homm]

Почитайте, полезно будет.

http://htmlbook.ru/css/width.html

[Mr.Smith]

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

подробнее пожалуйста

[Aleko]

Уж и не знаю как ещё можно помочь. Вот здесь представленно несколько версток и у каждой футер прижат к низу страницы. Работают во всех браузерах, может это вам поможет.

[harrids]

Уж и не знаю как ещё можно помочь. Вот здесь представленно несколько версток и у каждой футер прижат к низу страницы. Работают во всех браузерах, может это вам поможет.

Думаю за год они уж как-нить разобрались

[TonKhaO]

Ребят я давно уже года 2 наверное использую метод вот этого человека http://www.themaninblue.com/writing/perspective/2005/08/29/

Работает 100% везде одинаково и в том числе в шестой версии ИЕ, советую всем попробовать а потом напишите комменты

[Lastmmps]

Как привязать фуутер к низу окна браузера написано здесь: первый способ прижать футер к низу экрана и здесь: Второй способ

[Mavrun]

Я пользуюсь постоянно одним кроссбраузерным вариантом, проверил где-то в 15-20 соверменных (и не очень) браузерах различных версий, везде работает (ссылка)

[andronn]

Еще один сайт гдде можна почитать про подвал и не только http://www.prostosait.com.ua/

Edited February 23, 2010 by andronn

[Микель]

Сколько ни гуглил - все примеры про то, как прижать футер к низу страницы, но мне кроме этого необходимо 3 колонки, чтобы они доходили до футера, не оставляя снизу пустых пространств. Нашел пример, где так организовано с одной центральной колонкой. Варианты с заданием псевдоколонок при помощи широких левого и правого бордеров не подходят, т к у левой колонки к низу прибит фон. Спасибо за рецепты.

[PanSoul]

как жаль всех Вас огорчать, НО ни один один из данных методово не работает корректоно в Opera!!! В ней баг, что когда сжимаешь броузер, футер,естественно, находится внизу окна, НО КОГДА НАЧИНАЕШЬ ОБРАТНО РАСШИРЯТЬ ОКНО БРОУЗЕРА- футер продолжает находится на том месте, где был до растягивания. Если же после этого опять начать сжимать броузер- то футер становиться на место, или когда обновишь страницу- то тоже футер становится на место. ВОТ такой вот БАГ в Оpera.

Предлагаю СВОЙ вариант (может кому и пригодиться), тестил во всех популярных броузеров, везде выглядит как надо =)

HTML:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<link rel="stylesheet" href="style-norm.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="style-IE.css" />
<![endif]-->

</head>
<body>
<div class="content">
<div class="menu">
<h1>Menu</h1>
</div>
<h1>Content</h1>

<div style="height:100px;clear:both;">
</div>
</div>
<div class="footer">
<h1>Footer</h1>
</div>

</body>
</html>

style-norm.css:

html, body{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
}

h1{
	margin:0;
	padding:0;
}

.content{ 							
	width:100%;							
	display:table;						
	box-sizing:border-box;				
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	height:100%;						
	background:green;
}


.menu{									
	height:150px;						
	background:red;	
}

.footer{									
	height:100px;						
	background:url("fon.gif") repeat;/* можно просто фон- просто чтобы визульнее было видно что всё норм робит...=) */
	margin-top:-100px;					
}

style-IE.css:

.content{ 								
	display:block;						 
	min-height:100%;
	height:auto;						
	background:green;
}

Вот так вот, успехов всем

вот fon.gif

Edited March 3, 2011 by PanSoul

[eqertil]

Используя сгенерированный шаблон с заданными параметрами: http://img862.imageshack.us/i/83141348.jpg/, наткнулся на такую проблему. Текст в футере некорректно выделяется во всех браузерах (тестил на последних версиях Safari, Mozilla, Chrome), кроме IE - тут все в норме. Подскажите, в чем может быть проблема?

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">

<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title></title>

<meta name="title" content="" />

<meta name="keywords" content="" />

<meta name="description" content="" />

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

</head>

<body>

<div id="wrapper">

<div id="header">

<strong>Header:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tortor. Praesent dictum, libero ut tempus dictum, neque eros elementum mauris, quis mollis arcu velit ac diam. Etiam neque. Quisque nec turpis. Aliquam arcu nulla, dictum et, lacinia a, mollis in, ante. Sed eu felis in elit tempor venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut ultricies porttitor purus. Proin non tellus at ligula fringilla tristique. Fusce vehicula quam. Curabitur vel tortor vitae pede imperdiet ultrices. Sed tortor.

</div><!-- #header-->

<div id="middle">

<div id="container">

<div id="content">

<strong>Content:</strong> Sed placerat accumsan ligula. Aliquam felis magna, congue quis, tempus eu, aliquam vitae, ante. Cras neque justo, ultrices at, rhoncus a, facilisis eget, nisl. Quisque vitae pede. Nam et augue. Sed a elit. Ut vel massa. Suspendisse nibh pede, ultrices vitae, ultrices nec, mollis non, nibh. In sit amet pede quis leo vulputate hendrerit. Cras laoreet leo et justo auctor condimentum. Integer id enim. Suspendisse egestas, dui ac egestas mollis, libero orci hendrerit lacus, et malesuada lorem neque ac libero. Morbi tempor pulvinar pede. Donec vel elit.

</div><!-- #content-->

</div><!-- #container-->

<div class="sidebar" id="sideLeft">

<strong>Left Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.

</div><!-- .sidebar#sideLeft -->

<div class="sidebar" id="sideRight">

<strong>Right Sidebar:</strong> Integer velit. Vestibulum nisi nunc, accumsan ut, vehicula sit amet, porta a, mi. Nam nisl tellus, placerat eget, posuere eget, egestas eget, dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In elementum urna a eros. Integer iaculis. Maecenas vel elit.

</div><!-- .sidebar#sideRight -->

</div><!-- #middle-->

</div><!-- #wrapper -->

<div id="footer">

<strong>Footer:</strong> Mus elit Morbi mus enim lacus at quis Nam eget morbi. Et semper urna urna non at cursus dolor vestibulum neque enim. Tellus interdum at laoreet laoreet lacinia lacinia sed Quisque justo quis. Hendrerit scelerisque lorem elit orci tempor tincidunt enim Phasellus dignissim tincidunt. Nunc vel et Sed nisl Vestibulum odio montes Aliquam volutpat pellentesque. Ut pede sagittis et quis nunc gravida porttitor ligula.

</div><!-- #footer -->

</body>

</html>

CSS:

* {

margin: 0;

padding: 0;

}

html {

height: 100%;

}

body {

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

width: 100%;

height: 100%;

}

a {

color: blue;

outline: none;

text-decoration: underline;

}

a:hover {

text-decoration: none;

}

p {

margin: 0 0 18px

}

img {

border: none;

}

input {

vertical-align: middle;

}

#wrapper {

width: 1000px;

margin: 0 auto;

min-height: 100%;

height: auto !important;

height: 100%;

}

/* Header

—————————————————————————--*/

#header {

height: 200px;

background: #FFE680;

}

/* Middle

—————————————————————————--*/

#middle {

width: 100%;

padding: 0 0 200px;

height: 1%;

position: relative;

}

#middle:after {

content: '.';

display: block;

clear: both;

visibility: hidden;

height: 0;

}

#container {

width: 100%;

float: left;

overflow: hidden;

}

#content {

padding: 0 420px 0 0;

}

/* Sidebar Left

—————————————————————————--*/

#sideLeft {

float: left;

margin-left: -400px;

width: 200px;

position: relative;

background: #B5E3FF;

}

/* Sidebar Right

—————————————————————————--*/

#sideRight {

float: left;

margin-left: -200px;

margin-right: -3px;

width: 200px;

position: relative;

background: #FFACAA;

}

/* Footer

—————————————————————————--*/

#footer {

width: 1000px;

margin: -200px auto 0;

height: 200px;

background: #BFF08E;

}

[Simel]

Есть такая проблема.

Есть страничка в ней одна колонка (div). Как сделать так чтобы в случае не полной заполнености колонки, низ ее был в самом низу окна браузера, но в случае добавления материала низ опускался ну и соотвественно в браузере появляется вертикальный скрол.

Буду очень презнателен если подскажите или дадите сылки на материал. На каком ресурсе можна посмотреть варианты верстки в одну, две, три колонки, с подвалом и тд.

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

[удалец]

ребята, я не все понял про уже имеющиеся решения, но есть такой вариант, который работает в ИЕ6,7;опере; фаерфоксе; гугле; сафари. остальные браузеры проверить не могу. в контейнер добавляется необходимый макет. пожалуйста скажите свое мнение.

css:

body{margin:0!important;padding:0!important;}

html,body{height:100%;}

.footer{margin-top:-60px;height:60px;}

*.container{min-height:100%;}

* html .container{height:100%;}

.container{min-height:100%;}

html:

<div class="container" style="background-color:gold;">

<div style="background-color:#88ff88;padding-bottom:60px;">содержание</div>

</div>

<div class="footer" style="background-color:lime;">подвальчик</div>

Edited June 3, 2011 by удалец

[psywalker]

!important - бред

*.container{min-height:100%;} - звёздочка впереди тоже чушь.

А в чём вопрос собственно?

[удалец]

хорошо, important и * убрал.

css такой:

body{margin:0;padding:0;}

html,body{height:100%;}

.container{min-height:100%;}

* html .container{height:100%;}

.footer{margin-top:-60px;height:60px;}

этот код для страницы с подвалом, который ведет себя вполне корректно как при переполнении основного содержания, так и при малом его содержимом в указанных мною браузерах. хотелось бы знать, корректен ли он в эксплорере 8 и 9, сам проверить не могу.