it-swarm.com.ru

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

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

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

Моя текущая реализация здесь: http://jsfiddle.net/Mwkrw/3/ .

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

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

Спасибо за помощь!

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

21
mck

Магия в 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>

скрипка

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;}

скрипка

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

13
st-boost

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

Вот демонстрационная версия макета: http://jsfiddle.net/andresilich/gbzTN/1/show , edit здесь .

И код:

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>

Edit: заметил, что это решение не работает должным образом в 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]-->
9
Andres Ilich

Теперь, когда Bootstrap 4 вышел, я подумал, что некоторые могут извлечь выгоду из этого макета, который теперь немного проще благодаря flexbox.

Bootstrap 4 Demo

<body class="container-fluid d-flex flex-column h-100 align-items-center px-0">
 <div class="row grow w-100">
    <div class="header col-12 bg-primary py-2">
        Header
    </div>
    <div class="side col-3 bg-light py-3 pl-0">
        Menu
    </div>
    <div class="main col bg-warning py-3">
        Main
    </div>
 </div>
 <div class="row w-100 footer bg-danger">
    <div class="col-12 py-3">
        Footer
    </div>
 </div>
</body>

.grow {
    flex: 1;
    overflow: hidden;
}

.main,.side {
    overflow-y: auto;
    height:calc(100% - 55px);
}

.footer,.header {
    height: 55px;
}
0
Zim