我正在使用bootstrap 3.2.0開發設計版面。我有固定頁眉和頁腳。我現在正在試圖讓一個容器具有獨立滾動條的全高。有沒有什麼好的方法來做到這一點與twitter引導？在Twitter引導中滾動的固定版面高度3.2.0

這是我想要構建的佈局的圖片。

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="[email protected]*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <link data-require="[email protected]*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" /> 
    <script data-require="[email protected]*" 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

來源

2014-10-19 Shohel

你做了什麼努力？ – 2014-10-19 09:46:45

@ DanielA.White，請參閱plunker http://plnkr.co/edit/yzSPnQ19jRo3Q81wMUo1?p=preview – Shohel 2014-10-19 09:47:18

請直接在問題中發帖。 – 2014-10-19 09:47:36

這是相當簡單的。的基本步驟是：

給HTML和主體元件100％高度
使用固定定位
修正你的頁眉和頁腳到視給頂部等於所述主體元件填充到的高度您的頁眉和底部填充等於頁腳高度
爲中心的可滾動內容創建一個包裝元素，並將其高度設置爲100％，並將溢出屬性設置爲自動。
（可選）爲頂部和底部的包裹元素填充一點填充，以便將頂部和底部滾動位置的頁眉和頁腳從內容中拉出。

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>

在演示中，我使用了內置的導航欄固定頂和導航，固定-bottom用於轉換的頁眉和頁腳的類而不是創建我自己的樣式來定位頁眉/頁腳。

來源

2014-10-19 12:16:19 jme11

嗨，你的回答非常好，但我需要滾動條將始終可見和該屏幕的全高欄。我已經提到了我的照片。 – Shohel 2014-10-20 02:56:36

通過使用overflow-y：scroll，滾動條是可見的，但我無法設置全高度列。 – Shohel 2014-10-20 03:03:04

我沒有看到你描述的問題。演示更新。你能檢查它嗎？兩個可能的原因：這是一個特定於瀏覽器的問題，或者與您網頁上的其他CSS存在衝突。如果演示適合你，那很可能是後者。如果是這樣的話，你可以將你的實際代碼發佈在你的老闆身上，然後我會爲你尋找。 – jme11 2014-10-20 09:22:14

在Twitter引導中滾動的固定版面高度3.2.0

回答

DEMO

相關問題