Question

我想构建一个html 5页面来使用浏览器窗口的可用高度而不是它的宽度。我想要包含标题，侧边栏，页脚和内容＆lt; div＆gt;容器内的标签＆lt; div＆gt;具有固定宽度的标签（或者可能是嵌套容器＆lt; div＆gt;标签）。

我已广泛搜索网络，但实际上没有任何回复。

布局应如图所示：

Layout image

我没有添加＆lt; style＆gt;建议在这里，不要挑错。

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

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

1 个答案: