如何獲得標題固定頂部，容器可滾動和頁腳固定底部的側欄？

我試圖做一個側邊欄，這就是我期待： enter image description here 如何獲得標題固定頂部，容器可滾動和頁腳固定底部的側欄？

頭固定頂部和頁腳固定底部（我不知道是不是「固定」是正確的詞彙，但我希望他們不要重疊側邊欄容器）
滾動欄容器

我試圖用的位置打div但它沒有工作。我也試過粘腳的方法，它沒有很好地工作。我試着用Google搜索我的問題，但大多數答案都是網站的整體佈局。我需要它在我的邊欄內工作。

這裏是我的：jsFiddle

的代碼是有點長，所以我只是要交的CSS：

 html, body { 
      height: 100%;   
     } 


     #wrap { 
      min-height: 100%; 
      height: auto !important; 
      height: 100%;    
      margin: 0 auto -60px; 
     } 

     #push, #footer { 
      height: 60px; 
     } 

     .container-fluid {  
      width: 100%; 
      height: 100%; 
     } 

     #content { 
      position: absolute; 
      width: 100%; 
      bottom: 60px; 
      top: 42px; 
      right: 0px; 
      left: 0px; 
      padding: 0px; 
     } 

     #sidebar {  
      position:absolute; 
      width:300px; 
      height:100%;      
     } 

     #sidebar .ul-menu { 
      margin:0px; 
     } 

     #sidenavbar .tabs-left>.nav-tabs>li>a{  
      margin: 0px; 
      min-width: 30px; 
      width: 70px; 
      -webkit-border-radius: 0px 0 0 0px; 
      -moz-border-radius: 0px 0 0 0px; 
      border-radius: 0px 0 0 0px; 
      border: 0px; 
     } 

     .sidebar-tab-content { 
      background: #FFF; 
      position: absolute; 
      height: 100%; 
      left: 94px; 
      width:100%; 
     } 

     #sidenavbar .tabs-left>.nav-tabs { 
      border: 0px; 
     }  

     #footer { 
      color: #FFF; 
      background-color: #666; 
     } 

    .side-header, .side-footer { 
     background: #AAF;  
    } 
    h2 { 
     margin: 0px; 
    }

來源

2013-07-26 Keensleeeeeeee

讓我坦率地告訴你的人。這是一個醜陋的外觀佈局 – AnaMaria

你想要的輸出正是你從小提琴上粘貼的東西。所以我有點困惑這裏 – AnaMaria

是的，我知道，這只是一個示例代碼。對我來說更重要的是解決我的問題。 – Keensleeeeeeee

感謝您的想法之一。我剛纔解決我的問題通過將這些CSS代碼：

 .side-header { 
      position: absolute; 
      top: 0px; 
      right: 0px; 
      left: 0px; 
     } 
     .side-container { 
      position: absolute; 
      bottom: 40px; 
      top: 40px; 
      overflow-y: auto; 
     } 

     .side-footer { 
      position: absolute; 
      bottom: 0px; 
      left: 0px; 
      right: 0px; 
     }

這裏的的jsfiddle：http://jsfiddle.net/geddemet/XCn7C/

這個社區是真的很有幫助。乾杯!

來源

2013-07-29 00:34:14 Keensleeeeeeee

-2

你找position: fixed

FIDDLE Full screen Normal Fiddle

CSS：

.side-header{ 
      background: #AAF; 
      position: fixed; 
      width: 100%; 
     } 
.side-footer { 
      background: #AAF; 
      position:fixed; 
      bottom:60px; 
      width: 100%; 
     }

但是你將不得不玩弄寬度，因爲它採用容器寬度div。

來源

2013-07-26 09:50:22 designtocode

我把這個用於我的footer。它適用於我，頁眉和頁腳停留在相同的位置，如果滾動條的內容變大，頁腳將展開。至於帶有滾動條的框，我相信您需要在CSS中爲您想要滾動條的框添加類似overflow:hidden的內容。

來源

2013-07-26 10:06:59

您可以將overflow: auto應用於您的內容分區。

看到這個如何工作的minimal example。

來源

2013-07-26 10:10:01 Renato

-1

在我的樣本

sample

這不是好看一看，當您設置放置側欄和正確的內容爲絕對位置。如果正確的內容不可預測並且使其更加自定義，那麼您的設計應該讓您陷入困境。

.sidebar-tab-content { 
    background: #FFF; 
    width: 100%; 
    height: 500px; /*you could change it to 100% depend your need*/ 
}

編輯：請看看我的jsfiddle示例代碼，而不是裏面，CSS的上述比例，我在這裏放置只是很小的變化

來源

2013-07-26 10:47:16

他的內容沒有指定身高。 – designtocode

@msbodetti正如我所見，他已將其設置爲100％，並且我還注意到他可以將其刪除。怎麼了？ –

對不起，只能看到它！ – designtocode

如何獲得標題固定頂部，容器可滾動和頁腳固定底部的側欄？

回答

相關問題