css - 如何使用 div 标签为 html 5 创建类似表格的布局

Question

我想构建一个 html 5 页面以使用浏览器窗口的可用高度而不是其宽度。我想在具有固定宽度的容器 <div> 标记（或者可能是嵌套的容器 <div> 标记）内包含页眉、侧边栏、页脚和内容 <div> 标记。

我已经广泛搜索了网络，但实际上没有任何响应。

布局应如图所示：

布局图像

我在这里不添加 <style> 建议，而不是引起错误的答案。

Answer 1

工作小提琴

所以，基本上：我这样做是为了提高自己。我不认为你只复制整个东西对你有好处。阅读它，并尝试从头开始制作一个。

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;
}