个人中心
gpt4 book ai didi

html - 修复了 Twitter bootstrap 3.2.0 中可滚动的布局高度

转载 作者：太空宇宙 更新时间：2023-11-04 12:46:50 25 4
gpt4 key购买 nike

我正在使用 bootstrap 3.2.0 开发设计布局。我有固定的页眉和页脚。我现在正在尝试拥有一个带有独立滚动条的全高容器。有没有什么好的方法可以使用 twitter bootstrap 来做到这一点？

这是我要构建的布局的图片。

enter image description here

示例代码是

<!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" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link data-require="bootstrap@*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
  <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <header>
    <nav class="navbar navbar-default" role="navigation">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link</a>
            </li>
            <li><a href="#">Link</a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a>
                </li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a>
                </li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search" />
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
        <!-- /.navbar-collapse -->
      </div>
      <!-- /.container-fluid -->
    </nav>
  </header>
  <section>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-12"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie pharetra lacus, a tincidunt elit fermentum ac. Praesent ac mauris nisl. Cras aliquet imperdiet nunc, vestibulum faucibus urna laoreet eu. Aliquam pharetra leo ut mauris tempus dignissim. Aenean mollis dui sed orci hendrerit vitae hendrerit nisi convallis. Ut id libero a metus ullamcorper consectetur. Suspendisse sed risus erat. In pharetra velit condimentum nisl interdum sed iaculis mi consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vulputate consectetur urna, a dignissim odio vestibulum a.</p>
<p>Aliquam pharetra, nunc a tempor sodales, orci sem pretium orci, quis pretium tellus purus ac nunc. Morbi dignissim urna eget sapien laoreet volutpat. Sed lacus lorem, vulputate eu aliquet non, egestas vel augue. Fusce gravida arcu at elit pharetra luctus. Curabitur pretium mi vitae purus posuere lobortis. Fusce pulvinar, mi at eleifend venenatis, magna risus rhoncus ipsum, dapibus ornare nisi risus ac lorem. Etiam feugiat felis eu nulla pretium pellentesque. Curabitur id lorem ut orci blandit commodo. Vestibulum tempor ultricies nibh, eu malesuada nibh commodo non. Morbi malesuada porta fringilla. Mauris suscipit vestibulum ante ut laoreet. Duis eget mollis tortor. In imperdiet tempus mauris eu hendrerit. Vivamus ultrices rutrum magna sit amet dapibus. Phasellus sem justo, pulvinar vitae adipiscing ut, dictum in tellus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie pharetra lacus, a tincidunt elit fermentum ac. Praesent ac mauris nisl. Cras aliquet imperdiet nunc, vestibulum faucibus urna laoreet eu. Aliquam pharetra leo ut mauris tempus dignissim. Aenean mollis dui sed orci hendrerit vitae hendrerit nisi convallis. Ut id libero a metus ullamcorper consectetur. Suspendisse sed risus erat. In pharetra velit condimentum nisl interdum sed iaculis mi consectetur. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vulputate consectetur urna, a dignissim odio vestibulum a.</p>
<p>Aliquam pharetra, nunc a tempor sodales, orci sem pretium orci, quis pretium tellus purus ac nunc. Morbi dignissim urna eget sapien laoreet volutpat. Sed lacus lorem, vulputate eu aliquet non, egestas vel augue. Fusce gravida arcu at elit pharetra luctus. Curabitur pretium mi vitae purus posuere lobortis. Fusce pulvinar, mi at eleifend venenatis, magna risus rhoncus ipsum, dapibus ornare nisi risus ac lorem. Etiam feugiat felis eu nulla pretium pellentesque. Curabitur id lorem ut orci blandit commodo. Vestibulum tempor ultricies nibh, eu malesuada nibh commodo non. Morbi malesuada porta fringilla. Mauris suscipit vestibulum ante ut laoreet. Duis eget mollis tortor. In imperdiet tempus mauris eu hendrerit. Vivamus ultrices rutrum magna sit amet dapibus. Phasellus sem justo, pulvinar vitae adipiscing ut, dictum in tellus.</p></div>           
      </div>
    </div>
  </section>
  <footer>
  </footer>
</body>

</html>

CSS

footer {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1030;
  height: 26px;
  background: #5f5f5f;
  bottom: 0;
  clear: both;
}
.container-fluid {
  height: 100%;
  overflow-y: auto;
}

.col-md-12 {
  background-color: gray;
  height: 100%;
}

和plunker

最佳答案

这很简单。基本步骤是:

  1. 给 html 和 body 元素 100% 的高度
  2. 使用固定定位将页眉和页脚固定到视口(viewport)
  3. body 元素顶部的 padding 等于页眉的高度，底部的 padding 等于页脚的高度
  4. 为中心的可滚动内容创建一个包装元素，并将其高度设置为 100%，并将溢出属性设置为自动。
  5. 可选地，在顶部和底部为环绕元素提供一点填充，以将内容从最顶部和最底部滚动位置的页眉和页脚拉开。

DEMO

CSS:

html, body {
  height: 100%;
}
body {
  padding: 50px 0; /*Assumes that the header & footer are 50px*/
}
.main {
  height: 100%;
  overflow-y: scroll;
  padding: 20px 0;
}

HTML:

   <header>
        <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
           <!-- Navbar Here -->
        </nav>
    </header>
    <section class="main">
        <div class="container-fluid">
            <div class="row">
                <!-- Main Content Here -->
            </div>
        </div>
    </section>
    <footer class="navbar navbar-inverse navbar-fixed-bottom">
      <!-- Footer Content Here -->
    </footer>

在演示中，为方便起见，我使用内置的 navbar-fixed-top 和 nav-fixed-bottom 类作为页眉和页脚，而不是创建自己的类用于定位页眉/页脚的样式。

关于html - 修复了 Twitter bootstrap 3.2.0 中可滚动的布局高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26449237/

25 4 0
文章推荐： java - ParseJson.java，如果没有数组名称则解析结果？
文章推荐： java - 我如何从 org.springframework.jdbc.datasource.DriverManagerDataSource 类获取 jdbc 连接
文章推荐： java - 比较两个列表并对添加和删除的条目进行排序
文章推荐： linux - AWK- 读取 excel 文件 (CSV) 并制作另一个
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com