文章/答案/技术大牛

发布

社区首页 >问答首页 >带引导的剖面高度

问带引导的剖面高度
EN

Stack Overflow用户

提问于 2016-01-13 12:20:54

回答 1查看 1.6K关注 0票数 0

我希望有适合网页的网页，没有滚动。我有三个部分:页眉，节和页脚-我试着测试这个:行-lg-1代表页眉，页脚和行-lg-10为部分，但它不工作，有任何想法吗？最后，必须自动调整大小的是“部分”

PS :必须用引导程序来完成。

我的代码：

<!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>

twitter-bootstrap-3

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-01-13 22:47:01

您不可能使用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");
    });
});

使用此代码，您将拥有30%的header视图、60%的nav视图和10%的footer视图。只要这些数字加起来等于1，就可以很容易地更改这些数字。此外，由于在不同的列中有不同高度的图像，所以您需要为您的nav部分提供著名的nav类。它将确保nav的高度等于nav内最大的列的高度

 <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 */

您可以在clearfix中阅读更多关于这里的内容。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34766595

复制

相似问题

问带引导的剖面高度
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带引导的剖面高度EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带引导的剖面高度
EN