Как я могу сделать макет границы с помощью css?

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

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

Чтобы пояснить, я хочу указать, например, высоту всего дизайна в пикселях 600px . Затем я хочу, чтобы боковая панель и центральные <div> теги расширялись вниз, чтобы заполнить доступное пространство, даже если их содержимое недостаточно велико, чтобы заполнить пространство.

Здесь также можно использовать аналогию с веб-браузером. Даже если страница, которую вы просматриваете в браузере, не выше окна браузера, размер браузера не изменяется.

Есть ли способ сделать это с помощью CSS?

Ответов (5)

попробуйте flexbox, работает с firefox и webkit

http://www.html5rocks.com/en/tutorials/flexbox/quick/

текущая реализация не обновлена, но достаточно хороша

но вы, вероятно, можете сделать это с помощью таблиц (которые похожи на flexbox)

надеюсь это поможет

div { border : 1px solid #d3d3e3 }

#north    { margin:0;  padding:1em;  }        
#south    { margin:0;  padding:1em;  }        
#east     { margin:0;  padding:1em;  width:6em; height:22em; float:left; margin-right:1.1em }        
#west     { margin:0;  padding:1em;  width:6em; height:22em; float:right; margin-left:1.1em }        
#center   { margin:0;  padding:1em;  padding-bottom:0em; }        
#center:after    { content:' '; clear:both; display:block; height:0; overflow:hidden }

<div id="north">North</div >
<div id="east">East</div>
<div id="west">West</div>
<div id="center">Center</div>
<div id="south">South</div>

Живая ссылка: http://jsfiddle.net/marrok/dGw6K/2/

Макет таблицы CSS прекрасно справляется с этим.

.borderLayout {
  display: table;  
  width: 100%
}

.borderLayout .top {
    display: table-row;
}

.borderLayout .left {
    display: table-cell;
    vertical-align: middle;
    width: 10%;
  }

.borderLayout .center {
    display: table-cell;
    vertical-align: middle;
}

.borderLayout .right {
    display: table-cell;
    vertical-align: middle;
    width: 10%;
  }

.borderLayout .bottom {
    display: table-row; 
}

JSFiddle

Мне не удалось найти ответ на этот вопрос, который работал у меня, поэтому я пробовал разные попытки. Это простое решение, которое мне удалось собрать с помощью flexbox.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>

/*div { border : 1px solid #d3d3e3 }*/

html { height: 100%; }
body { height: 100%; }

.borderLayout {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
}

.borderLayout .top {
  width: 100%;
}

.borderLayout .middle {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
}

.borderLayout .middle .side {
}

.borderLayout .middle .center {
  vertical-align: middle;
  flex-grow: 1;
}

.borderLayout .bottom {
    width: 100%;
}

</style>
</head>
<body>
    <div class="borderLayout" style="width: 100%; height: 100%; background-color: cyan;" >
        <div class="top" id="north" style="height: 150px; background-color: red;">North</div >
        <div class="middle" style="background-color: magenta;" >
            <div class="side borderLayout" id="west" style="width: 10%; background-color: yellow;">
                <div class="top" style="height: 100px; background-color: #FF8000;">West 1</div>
                <div class="middle">West 2</div>
                <div class="bottom"  style="height: 75px; background-color: #FF8080;">West 3</div>
            </div>
            <div class="center" id="center" style="background-color: white;">Center</div>
            <div class="side" id="east" style="width: 20%; background-color: green;">East</div>
        </div>
        <div class="bottom" id="south" style="height: 50px; background-color: blue;">South</div>
    </div>
</body>
</html>

Метод, о котором вы говорите, звучит как работа для нижнего колонтитула - он уже старый, но все еще работает ... человек в синем - footerStickAlt

Аналогичный вопрос здесь.

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