Question

我正在尝试创建一个页面，我想调整页脚的高度。但我失败了。 div#F {background:yellow;height: 40px}＆lt; - 身高不起作用。请帮忙！

<html>
<head>
<style type="text/css">
div#C {margin:auto; width:1200px; height:830px} 
div#H {background:pink;}
div#Menu {background:pink;}
div#A {float: left; width:80%; background:red; height:700px} 
div#B {float: right; width: 20%; background:green;height:700px}
div#F {background:yellow;height: 40px}
</style>
<title></title>
</head>
<body>
<div id="C">
<div id="H">
</div>
<div style="height: 35px;" id="Menu">Menu</div>
<div id="A">Left floating div</div>
<div id="B">Right floating div</div>
<div id="F">Footer</div>
</div>
</body>
</html>

Answer 1

在页脚处添加清除。

DEMO

   div#F {clear:both;background:yellow;height: 40px}

Answer 2

您需要使用以下内容清除浮动元素：

div#F {
    background:yellow;
    height: 40px;
    clear:left;
}

<强> jsFiddle example

Answer 3

更改你的CSS

div#F {background:yellow;height: 40px;float;left;width:100%;}

CSS页脚无法调整高度

3 个答案: