全高側欄和粘腳頁面佈局的內容

我有一個簡單的頁面環繞佈局，其中包含頂層菜單，並且在它之後有一個左邊欄和一個內容div。爲了使佈局具有粘性頁腳，頁面div被放在頁面包div之後。全高側欄和粘腳頁面佈局的內容

此佈局應具有以下功能：
1.它具有粘性頁腳，因此即使內容div中的文本較少，頁腳仍保留在瀏覽器的底部。
2.側欄是響應式的，所以我會用媒體查詢來改變它的寬度。現在它有寬度80px。內容div現在應該填充剩餘寬度，當我通過媒體查詢更改側邊欄的寬度時。
3.如果css與Twitter Bootstrap 3 css不存在衝突，我將在本網站上使用它（雖然在本示例中未使用，稍後會添加），這將非常好。
4. 側欄（紅色）和內容（黃色）應填充瀏覽器的剩餘高度，這是我目前的問題，我希望得到您的幫助。

我的佈局是here！，圖片也是here！
感謝您的幫助。

/* Sticky footer */ 
 
* { 
 
    margin: 0; 
 
} 
 
html, body { 
 
    height: 100%; 
 
    width: 100%; 
 
    /*overflow: hidden;*/ 
 
} 
 
.page-wrap { 
 
    min-height: 100%; 
 
    /* equal to footer height */ 
 
    margin-bottom: -55px; 
 
    background-color: #18b7f1; 
 
    /*height: 100%;*/ 
 
} 
 
.page-wrap:after { 
 
    content: ""; 
 
    display: block; 
 
} 
 
.site-footer, .page-wrap:after { 
 
    /* .push must be the same height as footer */ 
 
    height: 55px; 
 
} 
 
.site-footer { 
 
    background: orange; 
 
    border-top: 1px solid #E7E7E7; 
 
} 
 

 
/* Layout */ 
 
.clear { 
 
    clear: both; 
 
} 
 
.top-menu { 
 
    background-color: green; 
 
    height: 50px; 
 
    width: 100%; 
 
    float: left; 
 
} 
 

 
.side-bar { 
 
    background-color: red; 
 
    width:80px; 
 
    float: left; 
 
    border:2px solid #FFF; 
 
    display: block; 
 
    height: 100%; 
 
} 
 

 
.content { 
 
    background-color: yellow; 
 
    border: 5px solid #000; 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 
/* This css is suggested by proPet which works fine now */ 
 
div.side-bar , div.content { 
 
    height: calc(100vh - 105px); // 55px+50px top menu would be the height of your site_footer and top menu 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <title>Two Col Layout</title> 
 
     <meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width"> 
 
     <link type="text/css" rel="stylesheet" href="css/bootstrap.css" /> 
 
     <link type="text/css" rel="stylesheet" href="css/main.css" /> 
 
    </head> 
 
    <body> 
 
     
 
     <div class="page-wrap"> 
 
      <div class="top-menu"> Top menu</div> 
 
      <div class="clear"></div> 
 
      
 
      <div class="side-bar"> 
 
       sidebar 
 
      </div> 
 
      
 
      <div class="content"> 
 
       Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letrasetand mently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
       
 
       
 
      </div> 
 
      
 
     </div> 
 
     
 
     <div class="clear"></div> 
 
     <div class="site-footer"> 
 
      footer 
 
     </div> 
 
     
 
    </body> 
 
</html>

來源

2014-10-11 Ali

那麼你嘗試過什麼？顯示錶，浮動，jQuery，Flex。 – Christina 2014-10-11 14:59:19

是的，克里斯蒂娜我試圖浮動，顯示內聯，表等等和在這個網站上的幾個建議，但它造成了一些問題，因爲本網站上的所有以前的解決方案沒有考慮到粘滯的頁腳佈局。當我嘗試這些解決方案時，側欄會溢出頁腳，有時頁腳會出現在瀏覽器底部上方約55px的位置。請注意，此佈局需要具有class clear的div。如果刪除拳頭，則.content（黃色）與側欄（紅色）重疊。 – Ali 2014-10-11 16:23:47

你可以嘗試使用在你的CSS calc()：

div.side-bar { 
    height: calc(100vh - 55px); // 55px would be the height of your site_footer 
}

來源

2014-10-11 14:08:48 proPhet

完美的作品！ :)，爲了完成答案中的問題，我還將建議的CSS添加到內容類中，例如：div.side-bar，div.content {height：calc（100vh - 105px）; // 55px將會是您site_footer的高度 }，謝謝 – Ali 2014-10-11 16:08:48

完美的作品！ :)，爲了在答案中完成問題，我還將建議的CSS添加到.content類中，並且由於頂部菜單高度是50px，所以55px應該是105px（50 topmenu + 55 footer），這將使垂直滾動條消失： div.side-bar，div.content { height：calc（100vh - 105px）; // 55px + 50px頂部菜單將成爲您的site_footer和頂部菜單的高度 } – Ali 2014-10-11 16:14:45

但是仍然存在一個問題，如果.content中的文本增加，則頁腳顯示爲固定（始終保留）在瀏覽器底部，有沒有進一步修復？謝謝 – Ali 2014-10-11 16:31:33

全高側欄和粘腳頁面佈局的內容

回答

相關問題