如何使用div標籤爲html創建表格式佈局5

Question

我想構建html5頁面以使用瀏覽器窗口的可用高度，但不使用寬度。我想包含標題，邊欄，頁腳和內容<div>標籤內的容器<div>標籤（或可能是嵌套容器<div>標籤）與固定寬度。

我已經在網上進行了廣泛的搜索，但實際上沒有任何反應。

佈局應在圖像中顯示：

Layout image

我在這裏不加<風格>建議，而不是挑起錯誤的答案。

Answer 1

Working Fiddle

所以，基本上我這樣做是爲了提高自己。我不認爲它適合你複製整個事情。 閱讀它，並嘗試從頭開始。

HTML：

<div id="Container"> 
    <div id="Header"></div> 
    <div id="Page"> 
     <div id="SideBar"></div> 
     <div id="Content"></div> 
    </div> 
    <div id="Footer"></div> 
</div> 

CSS：

* 
{ 
    padding: 0; 
    margin: 0; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 

html, body 
{ 
    height: 100%; 
} 

body 
{ 
    padding: 20px 0; 
    background-color: cadetblue; 
} 

#Container 
{ 
    width: 70%; /* or: any fixed width that fits you */ 
    height: 100%; 
    margin: 0 auto; 
    padding: 20px 0; 
    background-color: white; 
} 

#Header 
{ 
    height: 75px; /* or: any fixed height that fits you */ 
    background-color: orange; 
    margin: 0 20px; 
} 
#Page 
{ 
    height: calc(100% - 125px); /* 100% - (Header.height + Footer.height) */ 
    width: 100%; 
    display: table; 
    border-spacing: 20px; 
} 
#SideBar 
{ 
    display: table-cell; 
    background-color: yellow; 
    width: 20%; /* or: any fixed width that fits you */ 
} 
#Content 
{ 
    display: table-cell; 
    background-color: greenyellow; 
} 

#Footer 
{ 
    height: 50px; /* or: any fixed height that fits you */ 
    background-color: lightblue; 
    margin: 0 20px; 
}