100% Div высоты без скроллинга

У меня есть макет в две колонок:100% Div высоты без скроллинга

<html> 
<head></head> 
<body> 

    <div id="container"> 
     <div id="header"></div> 
     <div id="sidewrapper"></div> 
     <div id="contentwrapper"></div> 
    </div> 
</body> 
</html>

Я хочу иметь как боковую панель и содержание 100% по высоте, но мин-высота самого верхнего контейнера должна быть 100%.

Я пытался решить с помощью следующего CSS:

* { 
    margin: 0; 
    padding: 0; 
} 

html { 
    font-family: Georgia, serif; 
    color: #000; height:100%; min-height:100px; 
} 

body { 
    background: #fff; height:100%; min-height:100px; overflow:hidden; 
} 

#header { 
width: 100%; 
position: relative; 
float: left; 
height: 23px; 
} 

#container { 
    position:relative; 
    width: 100%; height:100%; 
    margin: auto; background:blue; 
} 

#contentwrapper { 
    float:left; 
    background:red; 
    position: relative; 
    width: 700px; padding:0px; margin:0px; 
    height: auto; 
} 

#sidewrapper { 
    float:left; 
    position: relative; 
    width: 159px; height:100%; 
    padding:0px; margin:0px; 
}

... но я получаю скроллбар из-за высоты 23px заголовка в. Я попытался решить проблему с переполнением: скрытый для элемента body, но я не знаю, является ли это правильным решением.

Любые идеи?

источник

2010-11-25 Lost in OWL

В вашем демо-коде есть некоторые ошибки. Я полагаю, #sidewrapper на самом деле #sidebar, а #contentwrapper на самом деле #content? – Gidon 2010-11-25 08:24:56

да простите, я обновил свой код – 2010-11-25 08:30:45

Если мое предположение я выдвинул на мой комментарий к вопросу правильно, то sidebar является 100% высоко, и на вершине, что у вас есть 23px заголовок, так что causs ваш контейнер будет 100% + 23px высоко.

В будущем у вас будет в css calc()http://hacks.mozilla.org/2010/06/css3-calc/. Это решит вашу проблему.

Теперь, я думаю, вы должны рассчитать высоту боковой панели (= высота контейнера - 23 пикселя), по javascript.

источник

2010-11-25 08:28:30 Gidon

Помните, что `calc()` не будет работать во всех браузерах и что Javascript может быть отключен. – Shikiryu 2010-11-25 08:49:20

На самом деле функция calc() - вещь CSS и не работает почти без браузера. – Gidon 2010-11-25 08:50:16

Высота элемента сравнивается с его элементом-отцом. В вашем случае я рекомендую вам указать ширину бетона & height для «сдерживающего устройства», так как будет трудно изобразить размер экрана на многих машинах.

Если вы настаиваете на использовании процентов, я рекомендую использовать для обоих элементов, таких как высота 25% и высота контента 75%.

источник

2010-11-25 08:29:30

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

#header { 
    position: absolute; 
    width: 100%; height: 23px; 
    top: 0; left: 0; 
} 
#sidewrapper, 
#contentwrapper { 
    float: left; 
    width: 50%; 
    height: 100%; 
} 
#sidewrapper .content, 
#contentwrapper .content { 
    margin-top: 23px; 
}

источник

2010-11-25 08:52:23 vtambourine

100% Div высоты без скроллинга

ответ

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