CSS 100% высота

Я знаю, что это своего рода общая проблема, и я искал некоторые решения, но не смог найти именно то, что искал.

Я хотел бы преобразовать этот в таблицу без таблиц.

Примечание. Верхний и нижний колонтитулы должны быть установлены на фиксированную высоту в пикселях (50px в порядке).

Основная проблема, с которой я сталкиваюсь, заключается в том, что я не могу получить эту "большую коробку" посередине, чтобы вести себя так же, как это происходит с таблицами. Существуют решения, которые работают нормально для содержимого переменной длины (текст, изображения), но я бы хотел, чтобы этот ящик выглядел и вел себя как коробка - с границами, закругленными углами и всеми.

Ответ 1

Вы можете сделать это с помощью свойств CSS стиля таблицы, но при этом сохранить таблицу с меньшим разметкой (которая по-прежнему выигрывает).

Пример

HTML

<div id="container">
    <div id="header"><div>header</div></div>
    <div id="content"><div>content</div></div>
    <div id="footer"><div>footer</div></div>
</div>

CSS

html,
body {
    height: 100%; 
    padding: 0;
    margin: 0;
}

#container {
    display: table; 
    width: 100%;
    height: 100%;
    border: 1px solid red;   
    text-align: center;
}

#container > div {   
    display: table-row;   
    width: 100%;
}

#container > div > div {   
    display: table-cell;   
    width: 100%;
    border-radius:10px; 

}

#header > div {
    height:50px; 
    border:solid 2px #aaa;
}

#content > div {
    height: 100%;    
    background:#f0f4f0; 
    border:solid 2px #5a5;
}

#footer > div {
    height:50px; 
    border:solid 2px #a55;
}

jsFiddle.

Ответ 2

"Множественные абсолютные координаты" - прекрасный способ достичь этого. Это когда вы абсолютно позиционируете коробку, а затем даете ей как верхнюю, так и нижнюю координаты. Не указывая высоту, вы получаете поле, которое должно быть 10px сверху, и 10px от нижних краев его родителя.

Вот пример

Существует особый стиль IE6, который вам нужно будет добавить, если вам это нравится.

Здесь статья об этой технике (плюс исправление IE6) - это хорошо знать, даже если вы ее не используете для этой проблемы.

Ответ 3

Вы ничего не сказали о высотах ваших подэлементов, поэтому мне пришлось сделать некоторые презумпции. Вы можете использовать проценты, если хотите.

<style>
html,body {margin:0;padding:0;
}
#mainContainer {
height:100%;
width:100%;
}

#header {
height:15%;
width:100%;
background-color:red;
}

#center {
height:75%;
width:100%;
background-color:blue;
}

#footer {
height:10%;
width:100%;
background-color:pink;
}
</style>

    <body>
    <div id="mainContainer">
    <div id="header">Header</div>
    <div id="center">Center</div>
    <div id="footer">Footer</div>

</div>

    </div>
    </body>