Question

所以我试图只使用百分比制作一个网站，但是在我的主要内容上，我使用了一个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;
}

Answer 1

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

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

流体布局 - 使用边缘百分比时底部空间

1 个答案: