Макет содержимого верхнего и нижнего колонтитула с div inline-block, занимающим оставшееся пространство (без плавающих или переполненных: скрыто)

Question

Макет содержимого верхнего и нижнего колонтитула с div inline-block, занимающим оставшееся пространство (без плавающих или переполненных: скрыто)

0

У меня есть (относительно) простой макет с фиксированными разделителями заголовка и нижнего колонтитула. Содержимое div разделено на два "полных высоты" divs с display: inline-block; , Левый div используется для навигации и справа для фактического содержимого и имеет overflow-y: scroll; , Проблема в том, что я не могу установить ширину правого div для заполнения оставшегося пространства. Я пробовал использовать float (в крайнем случае), но правый div был сдвинут вниз и, честно говоря, я бы предпочел не использовать поплавки.

Является ли заполнение оставшейся ширины возможной в моем сценарии? Мне очень хотелось бы не жестко кодировать ширину правого div.

Вот пример JSFiddle.

Простая структура HTML:

<html>
<head></head>
<body
<div id="container">
    <div id="header">This is the header area.</div>
    <div id="content">
        <div id="leftContent">&nbsp;</div>
        <div id="textContent">
            <p>Hello world (and other content)</p>
        </div>
    </div>
    <div id="footer">This is the footer area.</div>
</div>
</body>
</html>

Выдержка из CSS:

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

#container { position:relative; margin:0 auto; width:750px; overflow:hidden;
             height:auto !important; height:100%; min-height:100%; }

#header { border-bottom:1px solid black; height:30px; }

#content { position:absolute; top:31px; bottom:30px; overflow-y:none; width:100%; }

#leftContent { display:inline-block; height:100%; width:200px;
              border-right:1px solid black; vertical-align:top; }

#textContent { display:inline-block; height:100%; vertical-align:top; overflow-y:scroll;
              width:540px; /*would like to not have it hardcoded*/ }

#footer { position:absolute; width:100%; bottom:0; height:30px; }

Изменить:

Спасибо Прашанту, я смог добиться того, чего хотел. Решение заключалось в том, чтобы установить

display:flex; flex-direction:row; на div #content и
width: 100%; в div #textContent.

~~Тестирование на IE 11 (и в режиме совместимости) не вызывало нежелательных результатов.~~ * Новая версия находится здесь.

* Редактировать: этот метод работает правильно в IE11. В IE10 полосы прокрутки не отображаются, если для содержимого #content div требуется прокрутка. Макет работает. В IE <10 он вообще не работает.

Andrei V 18 фев. 2014, в 10:02

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Prasanth · Accepted Answer · 2014-02-18T06-24-00.000Z

Вы можете использовать Flexbox для достижения этого

Пройдите это, и вы получите то, что вам нужно

.content{ display:flex  } .content > div { flex: 1 auto; }

и остерегайтесь поддержки браузеров