全高的側欄和帶有粘性頁腳布局的內容

Question

我有一個簡單的頁面換行布局，其中包含頂部菜單，然后是左側邊欄和內容div。 為了使版面具有粘性頁腳，請將頁腳div放在分頁div之后。

此布局應具有以下功能：
1.頁腳有粘性，因此即使內容div中的文本較少，頁腳仍保留在瀏覽器的底部。
2.邊欄是響應式的，因此我將通過媒體查詢來更改其寬度。 現在它的寬度為80px。 現在，當我使用媒體查詢更改邊欄的寬度時，內容div應該填充剩余的寬度。
3.擁有不與Twitter Bootstrap 3 css沖突的css真是太好了，盡管我在此站點上使用了css（盡管在本示例中未使用，以后會再添加）。
4. 側欄（紅色）和內容（黃色）應填滿瀏覽器的剩余高度，這是我當前的問題，希望得到您的幫助。

我的布局在這里！ ，圖像也在這里！
感謝幫助。

 /* 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>

Answer 1

您可以嘗試在CSS中使用calc() ：

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

全高的側欄和帶有粘性頁腳布局的內容

問題描述

1 個解決方案

解決方案1
1 2014-10-11 14:08:48

全高的側欄和帶有粘性頁腳布局的內容

問題描述

1 個解決方案

解決方案1 1 2014-10-11 14:08:48

解決方案1
1 2014-10-11 14:08:48