Разделение HTML-страницы на горизонтальные разделы без вертикальных полос прокрутки

Я пытаюсь создать что-то вроде этого:

http://jsfiddle.net/S6FUQ/

HTML-код:

<div id="container">
    <header></header>
    <main>
        <section class="half"></section>
        <section class="half"></section>
    </main>
</div>

и CSS:

* {
    margin: 0; padding: 0;
}
html, body, #container {
    height: 100%;
}
header {
    height: 50px;
    background: gray;
}
main {
    height: 100%;
    background: green;
}
.half {
    height: 50%;
}
.half:first-child {
    background: blue;
}
.half:last-child {
    background: yellow;
}

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

пробовал margin-bottom: 50px; на main, но это не сработало. Что мне делать?

6
css css3 html layout

3 ответов

Высота "main" должна быть 100% - 50px. Вот это скрипка.

main{height: calc(100% - 50px);}
17

чтобы заставить его работать на старых браузерах, вы можете использовать абсолютное позиционирование.

демо

#container {
    position: relative;
}
main {
    position: absolute;
    width: 100%;
    top: 50px;
    bottom: 0;
    background: green;
}
4

вы уже используете % для установки высоты... Почему бы вам не использовать его снова, чтобы решить вашу проблему?

header {
    height: 10%;
    background: gray;
    max-height:50px; //this will ensure your header will never go bigger than 50px
}
main {
    height: 90%;
    background: green;
}

PS: единственный раз, когда ваш заголовок будет меньше 50px, - это когда браузер меньше 500px (который будет только в некоторых ландшафтных мобильных устройствах)

пример

3