Question

我当前页面在页脚附近留下小空白区域。不确定导致问题的原因。以下是我的代码：

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

test_style.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}

Answer 1

添加浮动：左;到你的#main

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

请参阅：http://jsfiddle.net/cNZ46/1/

Answer 2

有两种选择：

1）将float: top;的{{1}}更改为float: left;：

#main

2）将#main { margin: 0; padding: 0; float: left; height: 700px; width: 100%; background: #009999; }添加到clear: both;：

#main

它没有像你一样工作的原因是，你已经将#main { clear: both; }（#main）内的元素浮动到左边，这有点混淆了{{1 div。这意味着#sidebar位于上方元素（#main）的正下方，而#sidebar位于页面的最顶部（#navigation后面，因此顶部不是可见）导致它不会下降到#main div。

仅举例说明：另一种方法是将#navigation（在我的浏览器中为28px）的高度添加到#sidebar的填充中，所以：

#navigation

Answer 3

Here (link)是一个包含HTML和CSS更改的固定代码。

请注意，我已将 #sidebar 从 #main 中移出，以便他们彼此分开。此外，我将页脚的清除更改为两者，修复了其上方的空白。

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

我已经为侧边栏和主要区域设置了 min-height ，只是为了向您展示它的工作原理。

css布局底部留空格

3 个答案: