Html css布局底部留有空白_Html_Css

Html css布局底部留有空白

html css

Html css布局底部留有空白,html,css,Html,Css,我的当前页面在页脚附近留下了一小块空白区域。不确定是什么导致了问题。下面是我的代码： <link rel="stylesheet" type="text/css" href="style/test_style.css"> <body> <div id="header"> </div> <div id="navigation"> <ul> <li

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

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

添加浮动：左；干杯

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

请参阅：

有两个选项：

1改变浮动：顶部；浮动：左；主要用途：

2增加明确：两者都有；致main：

它无法正常工作的原因是，您将main侧边栏中的元素浮动到左侧，这有点混乱了main div的结构。这意味着侧边栏位于导航上方的元素下方，而main位于导航后面的页面顶部，因此，顶部不可见，导致它不会下降到边栏div

举个例子：另一种方法是将导航高度（在我的浏览器中是28px）添加到main的填充中，因此：

是一个包含HTML和CSS更改的固定代码

请注意，我将侧边栏从主边栏移出，以便它们彼此分开。此外，我还将页脚的“清除”改为“清除”，从而修复了页脚上方的空白

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

我为侧边栏和主区域都设置了一个最小高度，以向您展示它的工作原理。

并且没有浮动：顶部main@Justinas您是否意识到，创建一个问题并编辑该问题对您来说是一种富有成效的做法，就像要求OP也这样做一样？是一个带有固定CSS代码的JSFIDLE。看起来您的CSS没有任何ID或类定义。@tisont。他有一个好名声，他必须学会怎么做，否则你会编辑他的问题，即使你把最上面的浮动放在那里，这也是个坏主意，即使它修复了页脚前的空白。这是因为侧边栏在主要内容中，但这当然是他想要如何建立他的网站，仍然不推荐这种结构；用于设计目的。关于SEO，如果main不包含任何内容，那么实际上将两个div分开会更糟糕。非常感谢您的解释：

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

#main {
    clear: both;
}

#main {
    padding-bottom: 28px;
}

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