60

次のレイアウトを作成しようとしています。

  +-------------------------------------------------+
  |       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 は期待どおりに動作しません。height = 100% - magin にすればいいと思ったのですが、コンテナを動かすだけです。

私はグーグルで、StackOverflowに関する多くの質問を見てきました。それらにはすべて、JavaScript または位置 (絶対および手動の位置) が含まれます。私見は、解決策というよりもハックです。この問題を解決するには、よりシンプルでエレガントなクロスブラウザの方法が必要だと思います。

では、上記のレイアウトを作成するにはどうすればよいでしょうか。たぶんBootstrapが私を助けることができますか（私はドキュメントを調べましたが、このようなケースについての言及はありません）？

4

4 に答える 4

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>
ファイル内容/Site.css
body {
    padding-bottom: 70px;
    padding-top: 70px;
}

于 2014-09-27T13:55:09.060 に答える