s100 Posted May 19, 2012 Report Share Posted May 19, 2012 (edited) Здравствуйте! Не получается растянуть .content до #footer при отсутствии содержимого или когда мало текста. Подскажите что не так.http://sl100s.narod.ruhtml<!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>CSShtml, 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 Quote Link to comment Share on other sites More sharing options...
0 igon Posted May 20, 2012 Report Share Posted May 20, 2012 background:#555; повесь на #sheet Quote Link to comment Share on other sites More sharing options...
0 s100 Posted May 21, 2012 Author Report Share Posted May 21, 2012 (edited) background:#555; повесь на #sheetЭто не решает моей проблемы. Мне нужно чтобы присвоенный min-height:100% блоку .content работал. Подскажите пожалуйста где запутался и что неправильно выставил. Edited May 21, 2012 by s100 Quote Link to comment Share on other sites More sharing options...
0 ceil100 Posted May 21, 2012 Report Share Posted May 21, 2012 #sheet {width: 900px;margin: 0 auto;position: relative;min-height: 100%;height: 100%;margin-bottom:-100px;} Quote Link to comment Share on other sites More sharing options...
0 s100 Posted May 21, 2012 Author Report Share Posted May 21, 2012 #sheet {width: 900px;margin: 0 auto;position: relative;min-height: 100%;height: 100%;margin-bottom:-100px;}И так не работает, к сожалению ( Quote Link to comment Share on other sites More sharing options...
0 Catherine Posted May 21, 2012 Report Share Posted May 21, 2012 (edited) Можно попробовать через display: table. Как-нибудь так. Edited May 21, 2012 by Catherine Quote Link to comment Share on other sites More sharing options...
0 s100 Posted May 21, 2012 Author Report Share Posted May 21, 2012 (edited) Можно попробовать через display: table. Как-нибудь так.Спасибо, не подходит, весь контент внутри плывёт Платно может кто помочь? ссылку на сайт или полностью код в личку скину. А то чувствую ещё месяц ждать буду.P.S. Сделал на народ.ру. Edited May 22, 2012 by s100 Quote Link to comment Share on other sites More sharing options...
0 Catherine Posted May 22, 2012 Report Share Posted May 22, 2012 (edited) Спасибо, не подходит, весь контент внутри плывёт Где контент плывет и как? Что конкретно не так? Как должно быть? По описанию видно, что:- есть шапка и футер, прижатый книзу- есть контент, который должен растягиваться на всю оставшуюся ширину экрана, если текста мало- внутри контента два блока: сайдбар (.vmenu) и основной блок(.pagecontent)Мне пока приходит на ум всего три варианта:- смотреть в сторону display:table- рассчитывать минимальную высоту блоку .content, исходя из текущих размеров экрана средствами js- верстать таблицейА присвоенный min-height:100% блоку .content работать в конкретно этом случае не будет. Почитайте про блочную модель и ее особенности. Высота родителя не вычисляется, ее надо указывать явно. Edited May 22, 2012 by Catherine Quote Link to comment Share on other sites More sharing options...
0 ceil100 Posted May 22, 2012 Report Share Posted May 22, 2012 Объяснил же: У всех родителей height: 100%; у .content {min-height: 100%;}Всё Quote Link to comment Share on other sites More sharing options...
Question
s100
Здравствуйте! Не получается растянуть .content до #footer при отсутствии содержимого или когда мало текста. Подскажите что не так.
http://sl100s.narod.ru
html
CSS
html, body {margin:0;padding:0;height:100%;width:100%;}Edited by s100#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;}
Link to comment
Share on other sites
8 answers to this question
Recommended Posts
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.