Как растянуть контент до подвала

s100 · May 19, 2012

Здравствуйте! Не получается растянуть .content до #footer при отсутствии содержимого или когда мало текста. Подскажите что не так.

http://sl100s.narod.ru

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="style.css" type="text/css" media="all">
</head>
<body>
<div id="page">
<div id="sheet">
<div id="header"></div>
<div class="content"><div class="vmenu"></div><div class="pagecontent"></div></div>
<div id="footer_cleaner"></div>
</div>
</div>
<div id="footer"></div>
</body>
</html>

CSS

html, body {margin:0;padding:0;height:100%;width:100%;}
#page {min-height: 100%;margin-bottom:-100px;}
#sheet {width: 900px;margin: 0 auto;position: relative;min-height: 100%;margin-bottom:-100px;}
#header {height:140px;margin:0 auto;width:900px;position: relative;top: 5px;background:#333;}
.content {width:900px;margin: 0 auto;min-height:100%;float:left;margin-top: 10px;margin-bottom:10px;background:#555;}
.vmenu {float: left;;width:190px;min-height:100%;margin-bottom:150px;margin-left:10px;}
.pagecontent {float:right;width:680px;min-height:100%;padding:10px;margin-bottom: 150px;}
#footer_cleaner {height: 100px;clear: both;}
#footer {position:relative;height: 100px;margin-top:-100px;margin:0 auto;width:900px;background: #4c4e5a;bottom:5px;}

Edited May 22, 2012 by s100

igon · May 20, 2012

background:#555; повесь на #sheet

s100 · May 21, 2012

background:#555; повесь на #sheet

Это не решает моей проблемы. Мне нужно чтобы присвоенный min-height:100% блоку .content работал. Подскажите пожалуйста где запутался и что неправильно выставил.

Edited May 21, 2012 by s100

ceil100 · May 21, 2012

#sheet {width: 900px;margin: 0 auto;position: relative;min-height: 100%;height: 100%;margin-bottom:-100px;}

s100 · May 21, 2012

#sheet {width: 900px;margin: 0 auto;position: relative;min-height: 100%;height: 100%;margin-bottom:-100px;}

И так не работает, к сожалению (

Catherine · May 21, 2012

Можно попробовать через display: table. Как-нибудь так.

Edited May 21, 2012 by Catherine

s100 · May 21, 2012

Можно попробовать через display: table. Как-нибудь так.

Спасибо, не подходит, весь контент внутри плывёт

Платно может кто помочь? ссылку на сайт или полностью код в личку скину. А то чувствую ещё месяц ждать буду.

P.S. Сделал на народ.ру.

Edited May 22, 2012 by s100

Catherine · May 22, 2012

Спасибо, не подходит, весь контент внутри плывёт

Где контент плывет и как? Что конкретно не так? Как должно быть?

По описанию видно, что:

- есть шапка и футер, прижатый книзу

- есть контент, который должен растягиваться на всю оставшуюся ширину экрана, если текста мало

- внутри контента два блока: сайдбар (.vmenu) и основной блок(.pagecontent)

Мне пока приходит на ум всего три варианта:

- смотреть в сторону display:table

- рассчитывать минимальную высоту блоку .content, исходя из текущих размеров экрана средствами js

- верстать таблицей

А присвоенный min-height:100% блоку .content работать в конкретно этом случае не будет. Почитайте про блочную модель и ее особенности. Высота родителя не вычисляется, ее надо указывать явно.

Edited May 22, 2012 by Catherine

ceil100 · May 22, 2012

Объяснил же: У всех родителей height: 100%; у .content {min-height: 100%;}

Всё

Sign In

Как растянуть контент до подвала

Question

s100

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

igon

Link to comment

Share on other sites

s100

Link to comment

Share on other sites

ceil100

Link to comment

Share on other sites

s100

Link to comment

Share on other sites

Catherine

Link to comment

Share on other sites

s100

Link to comment

Share on other sites

Catherine

Link to comment

Share on other sites

ceil100

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information