Ограничения высоты тега CSS для видимой области - PullRequest
1 голос
/ 10 октября 2011

Я занимаюсь редизайном этого сайта: http://puffandpass.co.za/

с этим дизайном:

http://puffandpass.co.za/incubator/ (это не полностью, эй ..)

Дизайн имеет следующую структуру:

 <html>

     <body>
            <div id="wrapper">
                     <div id="page">
                             *//content goes here*
                      </div>
            </div>
   </body>
</html>

Теперь вот мой CSS для каждого из приведенных выше тегов:

html, body          { 
color: #000;background: #3B5998; 
font:  10px Helvetica, Arial, Verdana,sans-serif; 
height: 100%; 
line-height: 1.5em;
text-align:center; 
}

#wrapper            { 
background: none repeat scroll 0 0 #123569;    
border: 0.5em solid #123569;   
 height: 100%;    
margin: 0 auto;    
width: 102.4em;
}


#page               { 
background: none repeat scroll 0 0 #FFFFFF;   
float: left;  
text-align: center;    
width: 102.4em;
 }

[Проблема] Высота тегов html, body (и, следовательно, #wrapper) ограничивается видимой областью экрана.Это означает, что содержимое тега #page выходит за пределы #wrapper. Высота становится хуже (меньше), когда у меня открыт Firebug.

Вопрос: Что я делаю не так?

Заранее спасибо.

М

1 Ответ

2 голосов
/ 10 октября 2011

Вкл. #wrapper, изменить height на min-height.

Из-за наличия height: 100% на родительских элементах, это заставит #wrapper иметь минимальную высоту , равную 100%, вместо высоты, равной 100%, без учета увеличения.

Затем, на #page удалить position: absolute и float: left.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...