流体布局 - 使用 Margin-Top Percent 时的底部空间答案

【问题标题】：Fluid Layout - Space At Bottom When Using Margin-Top Percent流体布局 - 使用 Margin-Top Percent 时的底部空间
【发布时间】：2014-09-18 23:05:53
【问题描述】：

所以我试图制作一个只使用百分比的网站，但是在我的主要内容上，我使用了 margin-top: 10%，但它在底部产生了间距并创建了一个滚动条。

http://i.imgur.com/ZJl8Zp0.png
如果您查看图像，您会注意到即使主要内容没有在页面下方展开，但它仍然在下方创建空间（查看滚动条）。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="main"></div>
    </body>
</html>


* {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    width: 100%;
}

body {
    height: 100%;
    width: 100%;
    background: pink;
    position: relative;
}

.main {
    margin-top:10%;
    height: 600px;
    width: 960px;
    background: blue;
}

【问题讨论】：

标签： html css fluid-layout spacing

【解决方案1】：

只需删除您在 CSS 中分配给 body 的 height: 100% 样式。应该是这样的：

body {
    height: auto;
    width: 100%;
    background: pink;
    position: relative;
}

【讨论】：