引导程序3：顶部和底部有3行棍棒

debugcn 发表于 Dev

用户名

对不起，我英语不好

我研究了引导程序，并尝试像这样编写布局在此处输入图片说明

灰色部分是浏览器窗口。

第0行必须粘贴在顶部（如导航栏）
第2行必须粘贴在底部（如页脚）
第1行的动态高度取决于浏览器窗口的高度。

如何通过CSS呈现这些？

<div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-5 column">
            </div>
            <div class="col-md-2 column">
            </div>
            <div class="col-md-5 column">
            </div>
        </div>
        <div class="row clearfix">
            <div class="col-md-12 column">
            </div>
        </div>
    </div>

麦克马克

尝试使用以下代码：

<html>
  <head>
    <link data-require="[email protected]" data-semver="3.1.1" rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    <style>
      p{text-align: center;}
      html, body{height:100%;}
      #content{
        min-height:100%;
        height:auto !important;
        height:100%;
        /* Negative indent header and footer by its height */
        margin:-80px auto -60px;
        /* Pad bottom by header and footer height */
        padding:80px 0 60px;
      }
      /* Set the fixed height of the header here */
      #header{height:80px;}
      /* Set the fixed height of the footer here */
      #footer{height:60px;}
    </style>
  </head>

  <body>
    <div id="header">
      <div class="container">
        <div class="row">
          <div class="col-xs-12"><p>header</p></div>
        </div>
      </div>
    </div>

    <div id="content">
      <div class="container">
        <div class="row">
          <div class="col-xs-5"><p>left column</p></div>
          <div class="col-xs-2"><p>center column</p></div>
          <div class="col-xs-5"><p>right column</p></div>
        </div>
      </div>
    </div>
    <div id="footer">
      <div class="container">
        <div class="row">
          <div class="col-xs-12"><p>footer</p></div>
        </div>
      </div>
    </div>
  </body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。