HTML и CSS + Twitter Bootstrap: полный макет страницы или высота 100% - Npx

Я пытаюсь сделать следующий макет:

  +-------------------------------------------------+
  |       Header + search (Twitter navbar)          |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content column             |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+
  |              Footer                             |
  +-------------------------------------------------+

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

HTML выглядит так:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
    <link href="css/app.css" rel="stylesheet" media="screen">
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/app.js"></script>
  </head>
  <body>
    <div class="container-fluid">   
      <div class="navbar">
        <!-- navbar content -->
      </div>

      <div class="row-fluid columns"> 
        <div class="span2 article-tree">
          <!-- navigation column -->
        </div>
        <div class="span10 content-area">
          <!-- content column -->
        </div>
      </div>

      <div class="footer">
        <!-- footer content -->
      </div>
    </div>
  </body>
</html>

CSS



body, html, .container-fluid { /// take all available height
  height: 100%;
}

.article-tree {
  color: #DCE6E5;
  background: #2F323B;
}

.content-area {
  overflow: auto;
  height: 100%; /// explicit height to make scrolling work
}

.columns {
  height: 100%; /// columns should take all height
  margin-top: 42px; /// minus header
  margin-bottom: 20px; // minus footer
}

.columns > div {
    height: 100%; // make each column to take all available height
}

.footer {
  background: red;
  height: 20px;
}

В теории это должно работать, но columns.margin не работает, как я ожидаю. Я думал, что он должен сделать высоту = 100% - magin, но он просто перемещает контейнер.

Я столкнулся с Google и увидел многочисленные вопросы о StackOverflow. Все они включают JavaScript или позицию: абсолютное и ручное позиционирование. ИМХО, они больше хаки, чем решения, я думаю, что для решения этой проблемы должен быть более простой и элегантный и кросс-браузерный способ.

Итак, как мне сделать макет, описанный выше? Может быть, Bootstrap может мне помочь (я просмотрел документацию, но нет упоминаний о таких случаях)?

Ответ 1

Я нашел сообщение здесь в Stackoverflow и внедрил ваш дизайн:

http://jsfiddle.net/bKsad/25/

Здесь исходное сообщение: fooobar.com/questions/112477/...

Это то, что вы ищете?

HTML:

<div class="container-fluid wrapper">

  <div class="row-fluid columns content"> 

    <div class="span2 article-tree">
      navigation column
    </div>

    <div class="span10 content-area">
      content column 
    </div>
  </div>

  <div class="footer">
     footer content
  </div>
</div>

CSS

html, body {
    height: 100%;
}
.container-fluid {
    margin: 0 auto;
    height: 100%;
    padding: 20px 0;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.columns {
    background-color: #C9E6FF;
    height: 100%;   
}

.content-area, .article-tree{
    background: #bada55;
    overflow:auto;
    height: 100%;
}

.footer {
    background: red;
    height: 20px;
}

Ответ 2

Я знаю это в конце дня, но может помочь кому-то еще!

body,html {
  height: 100%;
}

.contentarea {

 /* 
  * replace 160px with the sum of height of all other divs 
  * inc padding, margins etc 
  */
  min-height: calc(100% - 160px); 
}

Ответ 3

если вы используете Bootstrap 2.2.1, возможно, это то, что вы ищете.

Пример файла index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
    <link href="Content/Site.css" rel="stylesheet" />
</head>
<body>
    <menu>
        <div class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">Application name</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="/">Home</a></li>
                        <li><a href="/Home/About">About</a></li>
                        <li><a href="/Home/Contact">Contact</a></li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="/Account/Register" id="registerLink">Register</a></li>
                        <li><a href="/Account/Login" id="loginLink">Log in</a></li>
                    </ul>

                </div>
            </div>
        </div>
    </menu>

    <nav>
        <div class="col-md-2">
            <a href="#" class="btn btn-block btn-info">Some Menu</a>
            <a href="#" class="btn btn-block btn-info">Some Menu</a>
            <a href="#" class="btn btn-block btn-info">Some Menu</a>
            <a href="#" class="btn btn-block btn-info">Some Menu</a>
        </div>

    </nav>
    <content>
       <div class="col-md-10">

               <h2>About.</h2>
               <h3>Your application description page.</h3>
               <p>Use this area to provide additional information.</p>
               <p>Use this area to provide additional information.</p>
               <p>Use this area to provide additional information.</p>
               <p>Use this area to provide additional information.</p>
               <p>Use this area to provide additional information.</p>
               <p>Use this area to provide additional information.</p>
               <hr />
       </div>
    </content>

    <footer>
        <div class="navbar navbar-default navbar-fixed-bottom">
            <div class="container" style="font-size: .8em">
                <p class="navbar-text">
                    &copy; Some info
                </p>
            </div>
        </div>
    </footer>

</body>
</html>

Ответ 4

Это то, что вы ищете? Вот сценарий demo.

Макет основан на процентах, цвета для ясности. Если столбец содержимого переполнен, появится полоса прокрутки.

body, html, .container-fluid {
  height: 100%;
}

.navbar {
  width:100%;
  background:yellow;
}

.article-tree {
  height:100%;
  width: 25%;
  float:left;
  background: pink;
}

.content-area {
  overflow: auto;
  height: 100%;
  background:orange;
}

.footer {
   background: red;
   width:100%;
   height: 20px;
}