CSS 100% макет высоты - PullRequest
Новая
       5

CSS 100% макет высоты

36 голосов
/ 28 мая 2011

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

Я хотел бы преобразовать this в макет без таблицы.

enter image description here

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

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

Ответы [ 3 ]

46 голосов
/ 28 мая 2011

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

Пример

Example

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 .

29 голосов
/ 28 мая 2011

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

Вот пример

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

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

1 голос
/ 28 мая 2011

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

<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>
...