Question

我的网站包含4个 div 标记：

标题（用于导航等）
Logoheader（用于徽标）
内容（我的网站内容）
页脚（有关其他信息）

标题和徽标 div 应该有一个固定高度，两者都应该是100％。

页脚 div 的修正高度为132px，应位于页面的最底部。

内容 div 应该填充logoheader和页脚之间留下的剩余空间。

这是我的代码：

HTML：

<html>
<head>
    <title>test</title>

    <link href="_css/main.css" type="text/css" rel="stylesheet">
</head>
<body>
       <div id="headerWrapper"></div>
       <div id="logoWrapper"></div>
       <div id="contentWrapper"></div>
       <div id="footerWrapper"></div>
</body>
</html>

的CSS：

body, html {
    background-color: green;
    margin: 0;
    padding: 0;
}

#headerWrapper {
    background-color: #ff6b2b;
    height: 45px;
}

#logoWrapper {
    background-color: white;
    width: 100%;
    height: 100px;
    border-bottom: 1px solid black;
}

#contentWrapper {
    margin-left: auto;
    margin-right: auto;
    height: 100%;
    width: 70%;
    background-color: red;
}

#footerWrapper {
    background-color: #ff6a2b;
    height: 132px;
    border-top: 1px solid black;
}

结果不是我真正想要的，也许有人可以帮我解决这个问题。因为整个网站应该是可见的而不滚动。

问候:)

Div填补剩余空间

0 个答案: