Пустой div со 100% высотой в CSS

Я играл с этим кодом почти половину дня, и я, наконец, решил передать его вам. Я хотел бы разместить три элемента div рядом друг с другом с левым и правым, окружающим основной. Я хотел бы, чтобы оба внешних divs содержали только фоновое изображение и, следовательно, занимали ту же высоту, что и средний div. Я играл с решениями из других сообщений, как это, но все мои попытки не увенчались успехом.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>  
</head>
<body>
<div id="container">
    <div id="left"></div>
    <div id="content">
        <p> Lorem ipsum dolor<br/><br/>sit amet<br/><br/>consectetur adipiscing elit</p>
    </div>
    <div id="right"></div>
</div>
</body>

CSS

body {
    text-align: center;
}

div#container {
    width: 954px;
    margin: 0px auto;
    height: 100%;
    border: 1px solid lime;
    overflow: hidden;
    position: relative;
}

div#left {
    margin: 0px auto;
    width: 5px;
    border: 1px solid red;
    float: left;
    display: block;
}

div#right {
    margin: 0px auto;
width: 5px;
float: left;
border: 1px solid blue;
}

div#content {
    width: 920px;
    margin: 0px auto;
    text-align: left;
    background: #ffffff;
    padding: 0px 10px;
    float: left;
}
p {
    font: normal 16px/18px 'Trebuchet MS', Helvetica, sans-serif;
    margin: 20px 0px;
}

Заранее благодарим за помощь.

Ответы

Ответ 1

Вам нужно добавить height: 100% в теги body и html, а также ваши классы div:

html {
    height: 100%; /* <------------ */
}

body {
    text-align: center;
    height: 100%; /* <------------ */
}

div#container {
    width: 954px;
    margin: 0px auto;
    height: 100%;
    border: 1px solid lime;
    overflow: hidden;
    position: relative;
}

div#left {
    margin: 0px auto;
    width: 5px;
    border: 1px solid red;
    float: left;
    display: block;
    height: 100%; /* <------------ */
}

div#right {
    margin: 0px auto;
    width: 5px;
    float: left;
    border: 1px solid blue;
    height: 100%; /* <------------ */
}

div#content {
    width: 920px;
    margin: 0px auto;
    text-align: left;
    background: #ffffff;
    padding: 0px 10px;
    float: left;
    height: 100%; /* <------------ */
}

Ответ 2

Я знаю, что это на самом деле не отвечает на ваш вопрос, но я предпочитаю метод, который использует position:relative для родителя и position:absolute для элементов capping. Это гарантирует, что динамически меняющийся ящик не сбросит ваш макет. Мне также нравится использовать: before: after attributes (IE 8+) из-за семантических причин, но вместо этого вы можете использовать дочерние элементы. Работает так же хорошо. Я также выбрал размер окна (FF-синтаксис -moz), поэтому границы не выглядят неестественно. (вероятно, не нужно в настройках производства, поскольку вместо этого вы использовали бы фон).

И теперь, код!

CSS

div#container:before {
    content:"";
    width: 5px;
    border: 1px solid red;
    display: block;
    position:absolute;
    height:100%;
    left:0px;
    top:0px;
    box-sizing:border-box; /* careful... FF needs -moz if you need that compatibility */
}

div#container:after {
    content:"";
    width: 5px;
    border: 1px solid blue;
    display: block;
    position:absolute;
    height:100%;
    right:0px;
    top:0px;
    box-sizing:border-box;
}

HTML

<div id="container">
    <div id="content">
        <p> Lorem ipsum dolor<br/><br/>sit amet<br/><br/>consectetur adipiscing elit</p>
    </div>
</div>

DEMO

http://jsfiddle.net/f7yL6/
http://jsfiddle.net/f7yL6/show

Ответ 3

Запросы СМИ могут использоваться для достижения большей части% предложений без какой-либо боли. Это не так гладко, но при использовании для интро-баннеров это вполне приемлемо.

Сначала используя объявления для мобильных устройств, вы должны использовать что-то вроде этого.

.banner { height: 200px; }

@media all and (min-width: 500px) {
  .banner { height: 400px; }
}

@media all and (min-width: 1000px) {
  .banner { height: 500px; }
}

Изменить: я использовал min-width, но min-height также можно использовать. Чтобы действительно хорошо выглядеть на всех устройствах, необходимо использовать сочетание минимальной и минимальной высоты.