Макет с фиксированным верхним и нижним колонтитулом, боковой панель с фиксированной шириной и гибким контентом

Я пытаюсь настроить макет, который будет выглядеть так:

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

Я попытался настроить фиксированную боковую панель с помощью Исправлена боковая панель навигации в жидкостной twitter bootstrap 2.0 и несколько других подобных ответов на переполнение стека, но все они ломаются, когда боковая панель длиннее содержимого, и насколько я знаю, нет возможности дать ей независимый свиток.

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

EDIT: Таким образом, мой заголовок явно не должен был фиксироваться. Вот новая и улучшенная версия: http://jsfiddle.net/Mwkrw/4/ Я все еще борется с двумя прокручиваемыми divs.

Ответы

Ответ 1

Магия находится в box-sizing:border-box;. Для совместимости с Firefox, chrome < 10 и safari < 5.1 добавьте -webkit- и -moz-префиксы. IE поддерживает его с 8.0.

<!doctype html>
<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <title>very structured layout</title>
        <style type='text/css'>
            *      {margin:0; padding:0;}
            body   {background:#fff; position:absolute; width:100%; height:100%;}
            #main  {background:#888; height:100%; padding:60px 0 40px; box-sizing:border-box;}
            #head  {background:#f8f; position:absolute; width:100%; height:60px;}
            #left  {background:#ff8; float:left; width:250px; height:100%; overflow:scroll;}
            #right {background:#8f8; height:100%; overflow:scroll;}
            #foot  {background:#f88; position:absolute; bottom:0; width:100%; height:40px;}
        </style>
    </head>
    <body>
        <div id='head'>header: width = 100%, height = 40px</div>
        <div id='main'>
            <div id='left'>left: width = 250px, height = 100%</div>
            <div id='right'>right: width = 100% - 250px, height = 100%</div>
        </div>
        <div id='foot'>foot: width = 100%, height = 60px</div>
    </body>
</html>

fiddle

edit: после решения Andres я понял, что могу добиться большей совместимости, я немного испортил и придумал альтернативное решение, которое, я думаю, более интуитивное. Он не работает в IE7, но он работает в IE8.

Страница такая же, как и выше, при этом единственным изменением является то, что CSS заменяется следующим:

*      {margin:0; padding:0;}
body   {background:#fff;}
#main  {background:#888; position:absolute; top:40px; bottom:60px; width:100%;}
#head  {background:#f8f; position:absolute; width:100%; height:40px;}
#left  {background:#ff8; position:absolute; width:250px; height:100%; overflow:scroll;}
#right {background:#8f8; margin-left:250px; height:100%; overflow:scroll;}
#foot  {background:#f88; position:absolute; bottom:0; width:100%; height:60px;}

fiddle

Обратите внимание, что для обеих версий #head и #foot должно быть свойство overflow, отличное от visible, если их содержимое в противном случае будет удалено с страницы.

Ответ 2

Мне удалось получить макет, который вы высмеивали в своем посте, сначала создав основной контейнерный класс, который растягивается на 100% как по вертикали, так и по горизонтали, таким образом мы можем полностью растянуть содержимое на всю высоту вашего окна просмотра. Внутри этого контейнера div я создал другой контейнер и позиционировал его абсолютно, растягивая его во всех направлениях, top, left, bottom, right, я чувствовал, что этот метод был чистым, поэтому я могу легко разместить верхний и нижний колонтитулы без необходимости отрицательных полей (попробовал как это, но это не сработало).

Ниже приведена демонстрация макета: http://jsfiddle.net/andresilich/gbzTN/1/show, отредактируйте здесь.

И код:

CSS

html, body {
    height: 100%;
}

.main {
    *zoom:1;
}

.main, .row-fluid {
    height: 100%;
}

.main:before, .main:after,
.column:before, .column:after {
    content: "";
    display: table;
}

.main:after,
.column:after {
    clear: both;
}

.column {
    height: 100%;
    overflow: auto;
    *zoom:1;
}

.column .padding {
    padding: 20px;
}

.box {
    bottom: 40px;
    left: 0;
    position: absolute;
    right: 0;
    top: 40px;
}

.span9.full {
    width: 100%;
}

.footer {
    height: 40px;
    width: 100%;
    z-index: 100;
    background-color: red;
    bottom: 0;
    left:0;
    right:0;
    position: fixed;
}

HTML

<div class="navbar navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">Project name</a>
      <div class="btn-group pull-right">
        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
          <i class="icon-user"></i> Username
          <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
          <li><a href="#">Profile</a></li>
          <li class="divider"></li>
          <li><a href="#">Sign Out</a></li>
        </ul>
      </div>
      <div class="nav-collapse">
        <ul class="nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>
<div class="main clearfix">
    <div class="box">
        <div class="row-fluid">
            <div class="column span3">
                <div class="padding">
                    .. content ..
                </div>
            </div>
            <div class="column span9">
                <div class="padding">
                    <div class="full span9">
                        .. content ..
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="footer clearfix">
    <h3>footer</h3>
</div>

Изменить: заметил, что это решение работает не так, как ожидалось, в IE7 (отлично работает в IE8 и выше), поэтому здесь есть условный комментарий, предназначенный для всех ниже IE8, который должен устранить проблему и заставить ее работать как ожидалось:

CSS

<!--[if lt IE 8]>
    <style type="text/css">
        html {
            margin: 40px 0px;
            overflow: hidden
        }

        .main {
            zoom:1;
        }

        .column {
            overflow-x: hidden !important;
            overflow-y: scroll !important;
            zoom: 1;
        }

        .box {
            position: relative !important;
            min-height: 100%;
            height:100%;
            zoom: 1;
            top:0 !important;
        }

        .main {
            margin: 40px 0px;
        }
    </style>
<![endif]-->