Div height CSS problem

Я пытаюсь установить размер моего оберточного div, чтобы быть по крайней мере на высоте страницы, а затем настраивать в соответствии с содержимым, если оно перекрывается.Div height CSS problem

У меня сейчас есть min-height:100%;, но это не превышает высоты страницы, когда контент превышает его.

Каков наилучший способ исправить это?

EDIT: Вот мой соответствующий CSS.

#wrapper{width:1000px;min-height:100%;margin:0px auto;background:#F2F2F2;} 

header{width:1000px;height:50px;margin:0px auto;} 

h1#logo{float:left;margin:5px 5px 0px;padding:0px;font:bold 30px 'Russo One', sans-serif;line-height:32px;} 
h1#logo a, h1#logo a:visited{text-decoration:none;color:#005883;} 
h1#logo a:hover, h1#logo a:visited:hover{color:#BAE5E9;} 
img#logo-badge{vertical-align:middle;margin:-3px -5px 0px -10px;} 


nav{float:right;font:20px 'Lato', sans-serif;} 
nav ul{float:right;margin:0px;padding:0px;list-style:none;} 
nav li{float:left;} 
nav li:hover{} 
nav a, nav a:visited{height:100%;padding:0px 20px 0px;display:block;text-decoration:none;color:#FFFFFF;} 
nav a:hover, nav a:visited:hover{background:;color:#BAE5E9;} 

#content{min-height:100%;float:left;margin:0px auto;} 

#main-content{width:700px;min-height:100%;float:left;padding:0px 15px;} 
#main-content h1{color:#515151;margin:0px;padding:0px;border:1px solid #515151;border-top:0px;border-right:0px;border-left:0px;} 

#demo-src{border-top:1px solid #D7C7B2;border-bottom:1px solid #D7C7B2;text-align:right;} 
#sidebar{width:270px;min-height:100%;float:left;} 

#footer{width:100%;float:left;}

источник

2012-04-09 justanotherhobbyist

Вы пытаетесь сделать DIV, который охватывает высоту экрана, или вы пытаетесь, чтобы соответствовать его с другим DIV? Если вы можете прояснить, что именно вы пытаетесь сделать, я думаю, мы могли бы помочь вам лучше. – saluce

Я * думаю * вам нужно использовать 'html, body {height: 100%;}' для этого. – bfavaretto

У меня уже есть html и body до 100%, это странная вещь, @saluce, я хочу, чтобы внешний div обертывал весь контент, прямо сейчас текст во внутренних divs переполняет его, я хочу, чтобы он расти вместе с ними. – justanotherhobbyist

Там ваша проблема. #content плавает влево, что позволяет ему течь за пределы контейнера div. Посмотрите на this Stack Overflow question, чтобы узнать, как это исправить.

Предлагаемые ответы в этом вопросе должны были использовать плагин jQuery EqualHeights или использовать Equal Height Columns для решения CSS.

источник

2012-04-09 19:03:38 saluce

Да, вы правы. Thx рассмотрит ответы там. – justanotherhobbyist

Ответы должны быть самодостаточными, чтобы стоять самостоятельно. Читателям не нужно ссылаться на другие ответы SO, чтобы увидеть решение. Пожалуйста, исправьте это, разместив полное релевантное решение в рамках своего собственного ответа. – Sparky

Я нашел что-то еще проще в google, http://nicolasgallagher.com/micro-clearfix-hack/ решил все правильно. Никогда не понимал использование clearfix до сих пор. – justanotherhobbyist

Попробуйте установить Max-высоту на нем, если это не работает попробуйте использовать только высоту и ширину

источник

2012-04-09 18:50:25

Проблема в том, что высота слишком велика. Вы имеете в виду настройку как max-height: 5000px? – justanotherhobbyist

Если высота варьируется до этой степени, тогда да –

попробовал, ничего не изменилось. – justanotherhobbyist

Если кто-то работает с той же проблемой, я нашел эту простую clearfix http://nicolasgallagher.com/micro-clearfix-hack/

источник

2012-04-09 20:01:17 justanotherhobbyist

Div height CSS problem

ответ

Смежные вопросы