带引导程序的截面高度答案

【问题标题】：Sections Height with bootstrap带引导程序的截面高度
【发布时间】：2016-01-14 06:47:01
【问题描述】：

我希望网站适合页面而无需滚动。我有 3 个部分：页眉、部分和页脚我试图测试这个： row-lg-1 用于页眉和页脚， row-lg-10 用于该部分，但它不起作用，知道吗？所以最后是必须自动调整大小的“部分”

PS : 必须用 bootstrap 来完成

我的代码：

<!DOCTYPE html>
<html>

  <head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>La maison de l'architecte</title>
    <meta name="description" content="Le site de la maison de l'architecture">

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style type="text/css">

      /* Styles de base */
      body {
        font-family: 'Bitter', serif;
        background-color: #eef;
        color: #259;
      }
      nav img {
        width: 100%;
      }

      /* Styles pour les smartphones */
      #left, #side1, #side2 {
        padding: 10px 10px 0 10px;
      }

      /* Styles pour les tablettes */
      @media (min-width: 768px) {
        #left{
          padding: 0;
        }
        #side1 {
          padding: 10px 5px 0 0;
        }
        #side2 {
          padding: 10px 0 0 5px;
        }
      }

      /* Styles pour les écrans moyens et grands */
      @media (min-width: 992px) {
        #side1, #side2 {
          padding: 0 0 10px 10px;
        }
      }

    </style>

  </head>

  <body>

    <header class="col-lg-12 col-md-12">
      <a href="#"><img src="assets/img/maison.png" alt="logo" class="col-lg-1 col-md-1"></a>
      <h1 class="text-center">La maison de l'architecte</h1>
    </header>

    <nav class="">
      <div id="left" class="col-lg-8 col-md-8">
        <a href="#"><img src="assets/img/city1.jpg" alt="Nos réalisations"></a>
      </div>
      <div id="side1" class="col-lg-4 col-md-4">
        <a href="#"><img src="assets/img/side1.jpg" alt="Nos projets"></a>
      </div>
      <div id="side2" class="col-lg-4 col-md-4">
        <a href="#"><img src="assets/img/side2.jpg" alt="Notre ambition"></a>
      </div>
    </nav>

    <footer class="text-center">
      <a class="btn btn-primary" href="#"><i class="fa fa-twitter fa-2x"></i></a>
      <a class="btn btn-primary" href="#"><i class="fa fa-facebook fa-2x"></i></a>
      <a class="btn btn-primary" href="#"><i class="fa fa-google-plus fa-2x"></i></a>
      <a class="btn btn-primary" href="#"><i class="fa fa-flickr fa-2x"></i></a>
      <a class="btn btn-primary" href="#"><i class="fa fa-spotify fa-2x"></i></a>
    </footer>

  </body>

</html>

【问题讨论】：

当我 Google section fill entire page bootstrap 时，我似乎看到了有用的结果？
HTML&CSS + Twitter Bootstrap: full page layout or height 100% - Npx的可能重复
暂时还没有找到正确答案
上面的链接没有用吗？为什么？
对不起，我检查过了，但没有帮助。我的代码有帮助吗？

标签： html css twitter-bootstrap-3

【解决方案1】：

您无法使用 Bootstrap 中的某些类来执行此操作。但是，您可以通过一点点 jQuery 来实现它，如下所示：

$(document).ready(function() {
    $(window).resize(function() {
         var curHeight = $(window).height();

         $("header").height((curHeight * 0.3) + "px");

         $("nav").height((curHeight * 0.6) + "px");

         $("footer").height((curHeight * 0.1) + "px");
    });
});

使用此代码，header 的视口为 30%，nav 为 60%，footer 为 10%。您可以随意更改这些数字，只要它们加起来为 1。此外，您的nav 部分需要众所周知的clearfix 类，因为您在不同的列中有不同高度的不同图像。它将确保nav 的高度等于nav 内最大列的高度：

HTML

 <nav class="clearfix">

CSS

 .clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
  }
  .clearfix { display: inline-block; }
   /* start commented backslash hack \*/
   * html .clearfix { height: 1%; }
   .clearfix { display: block; }
   /* close commented backslash hack */

您可以在HERE 中阅读有关clearfix 的更多信息。

【讨论】：

这也适用于响应式设计吗？因为我不确定，我想我会尝试这两种方法。
@webdev：应该是因为它会对每个窗口调整大小事件做出反应。
最后我不需要使用它，但无论如何谢谢（我知道 clearfix 是什么）但现在我有另一个问题......