流体布局-使用顶部空白率时底部的空间

Question

So I'm trying to make a website using only percentages, however on my main content, I use a margin-top: 10%, but it makes spacing at the bottom and creates a scroll bar. 因此，我试图仅使用百分比来创建网站，但是在我的主要内容上，我使用了margin-top：10％，但它在底部留有间距并创建了滚动条。

http://i.imgur.com/ZJl8Zp0.png http://i.imgur.com/ZJl8Zp0.png
If you look at the image, you'll notice that even though the main content isn't expanding below the page, however it still creates space underneath (look at the scroll bar). 如果查看图像，您会注意到，即使主要内容没有在页面下方扩展，但是它仍在下面创建空间（请看滚动条）。

<!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

Simply remove the height: 100% style which you've assigned to the body inside your CSS. 只需删除height: 100%您已为CSS内部的body分配了height: 100%样式。 This is how it should be: 这应该是这样的：

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

流体布局-使用顶部空白率时底部的空间

问题描述

1 个解决方案

解决方案1
1 2014-09-18 23:12:07

流体布局-使用顶部空白率时底部的空间

问题描述

1 个解决方案

解决方案1 1 2014-09-18 23:12:07

解决方案1
1 2014-09-18 23:12:07