CSS布局底部留下空白

我的当前页面在页脚附近留下了一小块空白区域。不确定是什么导致了这个问题。下面是我的代码:

<link rel="stylesheet" type="text/css" href="style/test_style.css">
<body>
    <div id="header">
    </div>
    <div id="navigation">
            <ul>
            <li><a href="#">test</a></li>
            </ul>
        </div>
    <div id="main">
        <div id="sidebar">
            this is a test
        </div>
    </div>

    <div id="footer"></div>
</body>

testrongtyle.css:

body {
    margin: 0; }
#header {
    text-align: left;
    margin: 0 auto;
    height: 50px;
    background: #ccccff; }
#header h1 {
    margin: 0;
    padding: 1em; }
#main {
    margin: 0;
    padding: 0;
    float: top;
    height: 700px;
    width: 100%;
    background: #009999; }
#sidebar {
    float: left;
    height: 100%;
    width: 150px;
    background: #999900;
            }
#footer {
    clear: left;
    margin: 0 auto;
    height: 50px;
    background-color: #666600;
    padding: 20px; }
#navigation {
    float: left;
    width: 100%;
    background: #333; }
#navigation ul {
    margin: auto;
    padding: 0; }
#navigation ul li {
    list-style-type: none;
    display: inline; }
#navigation li a {
    display: block;
    float: right;
    color: #ffff99;
    text-decoration: none;
    border-left:  1px solid #fff;
    padding: 5px; }
#navigation li a:hover {background: #383}

有两个选项:

1) Change float: top; to float: left; for #main:

#main {
    margin: 0;
    padding: 0;
    float: left;
    height: 700px;
    width: 100%;
    background: #009999;
}

2)将clear: both;加入#main:

#main {
    clear: both;
}

它不工作的原因，因为你有它，是你浮动的元素在#main (#sidebar)的左边，这有点搞砸了#maindiv的结构。这意味着#sidebar被放置在上面的元素(#navigation)下方，而#main被放置在页面的顶部(后面的#navigation，所以顶部是不可见的)，导致它没有下来到#sidebardiv。

另一种方法是将#navigation的高度(在我的浏览器中是28px)添加到#main的内边距，所以:

#main {
    padding-bottom: 28px;
}

添加font - family:宋体;到你的#main

#main {
float:left;
    margin: 0;
    padding: 0;
    float: top;
    height: 700px;
    width: 100%;
    background: #009999; }

请参见:http://jsfiddle.net/cNZ46/1/

这里(链接)是一个固定的代码与HTML和CSS的变化。

注意，我把#sidebar从#main中移了出来，这样它们就分开了。我还改变了页脚的clear为，这两个固定了上面的空白。

<div id="main">
   <p>Main content here!</p>
</div>
<div id="sidebar">
   <p>Sidebar here!</p>
</div>

我在侧边栏和主区域都设置了min-height，只是为了告诉你它是有效的。

相关内容

最新更新

热门标签：