Question

我的DIV中的文字与我网页的页脚部分重叠有问题。并排有2个DIVS，它们是主要文本区域和链接部分。但是当我输入左侧框时，它似乎溢出并填满页脚部分。

这是我的问题的一个非常简单的例子，希望有人可以证明我出错的地方。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{
    margin: 0px;
    padding: 0px;
    text-align: left;
    background-color: rgb(242, 242, 242);
    }
.wrapper {
    width: 940px;
    height: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    margin-top: 0px;
    min-height: 500px;
    background-color: #FFF;
}
.textarea{
    width: 65%;
    float: left;
    height: auto;
    background-color: #FFF;
    min-height: 0px;
    background-color:#F00;
}
#rightmenu{
    padding: 0px;
    width: 271px;
    height: 100%;
    float: right;
    margin-right: 20px;
}
</style>
</head>
<body>  
<div>
  <div class="wrapper">
  <div class="textarea"> Text Area
    <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>This DIV overflows my footer</p>
  </div>
<div id="rightmenu">
Side Menu Links
</div>
</div>
<footer>
Footer Section
  </footer>
</div>
</body>
</html>

提前致谢

Answer 1

您是否尝试过使用clear风格？请在此处阅读 - http://css-tricks.com/the-how-and-why-of-clearing-floats/

或在此使用overflow好例子 - http://css-tricks.com/almanac/properties/o/overflow/

Answer 2

在你的页脚上，在你的CSS中尝试“clear：both”。

所以：

footer{
    clear:both;
}

它会让你的页脚清除任何漂浮的div（在它们下方移动）。

DIV溢出到页脚部分HTML CSS

2 个答案: