引導3以及與列表項組溢出-γ與延伸到剩餘高度

滾動我已經基於自舉3下面的HTML：引導3以及與列表項組溢出-γ與延伸到剩餘高度

<div class="row"> 
    <div class="col-md-3"> 
     <div class="well" id="well1"> 
      Some content 
     </div> 

     <div class="well" id="well2"> 
      <div class="list-group"> 
       <a href="#" class="list-group-item"> 
        <h4 class="list-group-item-heading">Heading 1</h4> 

        <p class="list-group-item-text">Some text...</p> 
       </a> 

       <a href="#" class="list-group-item"> 
        <h4 class="list-group-item-heading">Heading 2</h4> 

        <p class="list-group-item-text">Some text...</p> 
       </a> 

       <a href="#" class="list-group-item"> 
        <h4 class="list-group-item-heading">Heading 3</h4> 

        <p class="list-group-item-text">Some text...</p> 
       </a> 

       <a href="#" class="list-group-item"> 
        <h4 class="list-group-item-heading">Heading 4</h4> 

        <p class="list-group-item-text">Some text...</p> 
       </a> 
      </div> 
     </div> 
    </div> 
</div>

的list-group-item -instances的數量可以變化。

我想實現的是以下幾點：

我想well2被拉長到剩餘的最大高度，並顯示出內well2垂直滾動條，如果有一個更list-group-item -instances比將融入瀏覽器窗口而無需滾動完整的瀏覽器窗口。

來源

2014-10-05 Alexander Zeitler

這將是很難幫助沒有更多頁面的結構。這是一個小提琴開始：http://jsfiddle.net/isherwood/n415es53/ – isherwood 2014-10-05 20:23:50

不知道我完全理解的上下文，所以這是你想要的？ http://jsfiddle.net/jme11/n415es53/2/ – jme11 2014-10-06 21:03:35

是的，就是這樣。 – 2014-10-06 21:11:55

爲了讓你的兩個元素構成瀏覽器的整個高度，你需要讓所有的祖先元素具有一定的高度。將html和body設置爲100％高度，然後創建一個類以添加到其他祖先元素。我把這個班級稱爲全高。

現在所有的祖先都有一個高度，你可以簡單地設置你的兩口井的高度。由於Twitter Bootstrap中的井具有20px的邊距，因此可以在第一個井上使用calc（）表達式以從百分比中減去邊界。所有現代瀏覽器都支持calc（）。作爲IE8和舊版本Android瀏覽器的備份，您可以首先使用高度和百分比值作爲後備。

對於第二口井，將其高度設置爲100％的剩餘百分比，並將其上的溢流屬性設置爲自動。我也從第二口井的底部去除邊緣，使其緊貼在視口的底部，當然你也可以在這裏使用calc。

HTML：

<div class="container full-height"> 
    <div class="row full-height"> 
     <div class="col-md-3 full-height"> 
      <div class="well" id="well1">Some content</div>   
      <div class="well" id="well2"> 
       <div class="list-group"> 
        <a href="#" class="list-group-item"> 
         <h4 class="list-group-item-heading">Heading 1</h4> 
         <p class="list-group-item-text">Some text...</p> 
        </a> 
        <a href="#" class="list-group-item"> 
         <h4 class="list-group-item-heading">Heading 2</h4> 
         <p class="list-group-item-text">Some text...</p> 
        </a> 
        <a href="#" class="list-group-item"> 
         <h4 class="list-group-item-heading">Heading 3</h4> 
         <p class="list-group-item-text">Some text...</p> 
        </a> 
        <a href="#" class="list-group-item"> 
         <h4 class="list-group-item-heading">Heading 4</h4> 
         <p class="list-group-item-text">Some text...</p> 
        </a> 
        <a href="#" class="list-group-item"> 
         <h4 class="list-group-item-heading">Heading 5</h4> 
         <p class="list-group-item-text">Some text...</p> 
        </a> 
        <a href="#" class="list-group-item"> 
         <h4 class="list-group-item-heading">Heading 6</h4> 
         <p class="list-group-item-text">Some text...</p> 
        </a> 
        <a href="#" class="list-group-item"> 
         <h4 class="list-group-item-heading">Heading 7</h4> 
         <p class="list-group-item-text">Some text...</p> 
        </a> 
        <a href="#" class="list-group-item"> 
         <h4 class="list-group-item-heading">Heading 8</h4> 
         <p class="list-group-item-text">Some text...</p> 
        </a> 
        <a href="#" class="list-group-item"> 
         <h4 class="list-group-item-heading">Heading 9</h4> 
         <p class="list-group-item-text">Some text...</p> 
        </a> 
        <a href="#" class="list-group-item"> 
         <h4 class="list-group-item-heading">Heading 10</h4> 
         <p class="list-group-item-text">Some text...</p> 
        </a> 
        <a href="#" class="list-group-item"> 
         <h4 class="list-group-item-heading">Heading 11</h4> 
         <p class="list-group-item-text">Some text...</p> 
        </a> 
        <a href="#" class="list-group-item"> 
         <h4 class="list-group-item-heading">Heading 12</h4> 
         <p class="list-group-item-text">Some text...</p> 
        </a> 
        <a href="#" class="list-group-item"> 
         <h4 class="list-group-item-heading">Heading 13</h4> 
         <p class="list-group-item-text">Some text...</p> 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS：

html, body, .full-height { 
    height: 100%; 
} 
#well1 { 
    height: 15%; /*fall back for IE8, Safari 5.1, Opera Mini and pre-4.4 Android browsers*/ 
    height: calc(15% - 20px); 
    overflow: hidden; /*better to decide how you want to handle this than to let the browser decide*/ 
} 
#well2 { 
    height: 85%; 
    margin-bottom: 0; 
    overflow: auto; 
}

來源

2014-10-06 22:45:48 jme11

引導3以及與列表項組溢出-γ與延伸到剩餘高度

回答

相關問題