php - div 高度不会根据子控件自动扩展

Question

我已经创建了网页

http://jsfiddle.net/KNfrm/embedded/result/

mid div 没有延伸到左窗格和右窗格的高度。

mid div 具有黑色背景色

score 2 · Accepted Answer

您需要在.rightpane从正常的 html 流中删除浮动元素之后清除浮动。.rightpane只需在with 样式后添加一个空的块元素clear:both

http://jsfiddle.net/KNfrm/1/ - http://jsfiddle.net/KNfrm/1/show

score 1 · Accepted Answer

演示

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tile Mode</title>
<style>
body {
    margin: auto;
    background-color:#fff;
    font-family:arial, verdana, helvetica;
    font-size:12px;
    color:#222;
}
.center{
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    width:1000px;
    height:auto;
    display:block;
    background-color:#000;
}
.frameDiv {
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
    width:1000px;
    height:auto;
    display:block;
    background-color:#000;
}
.header {
    width:auto;
    height:150px;
    background-color:transparent;
}
.logo {
    height:100px;/*background-image:url(./images/header.png);*/
}
.menu {
    height:50px;
    width:auto;
    background-color:#ccc;
}
.menus {
    list-style-type: none;
    list-style-position:outside;
    position: relative;
    margin: 0;
    padding: 0;
}
.menus li {
    display: block;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    float: left;
    width: 200px;
    height: 50px;
    margin-right: 0px;
    background-image:url(./images/menu.png);
    background-repeat:no-repeat;
}
.menus a {
    display:block;
    height:50px;
    text-indent:-9999px;
    outline:none;
}
#menu1 {
    background-position:0px 0px;
}
#menu2 {
    background-position:-200px 0px;
}
#menu3 {
    background-position:-400px 0px;
}
#menu4 {
    background-position:-600px 0px;
}
#menu5 {
    background-position:-800px 0px;
}
#menu1.active, #menu1:hover {
    background-position: 0 bottom;
}
#menu2.active, #menu2:hover {
    background-position: -200px bottom;
}
#menu3.active, #menu3:hover {
    background-position: -400px bottom;
}
#menu4.active, #menu4:hover {
    background-position: -600px bottom;
}
#menu5.active, #menu5:hover {
    background-position: -800px bottom;
}
.leftpane {
    float:left;
    width:750px;
    height:auto;
    display:block;
    background-color:transparent;
}
.rightpane {
    float:right;
    width:250px;
    height:auto;
    background-color:transparent;
}
.content {
    width:auto;
    background-color:transparent;
    display:block;
    border-color:#666;
    border-style:solid;
    border-width:5px;
}
.footer {
    margin:0px;
    width:auto;
    height:100px;
    background-color:#461015;
    display:block;
    text-align:center;
    overflow:hidden;
}
.footer p {
    display:inline;
}
.footer p a:link {
    color: #fff;
    text-decoration:none;
}
.footer p a:visited {
    color: #fff;
    text-decoration:none;
}
.footer p a:hover {
    color: #fff;
    text-decoration:none;
}
.footer p a:active {
    color: #fff;
    text-decoration:none;
}
.quote {
    margin-left:35px;
    margin-top:20px;
    margin-bottom:20px;
    margin-right:35px;
    width:180px;
    height:40px;
    display:block;
}
.facebook {
    margin-left:35px;
    margin-top:20px;
    margin-bottom:20px;
    margin-right:35px;
    width:180px;
    height:40px;
    display:block;
    background-image:url(images/facebook.png);
    background-repeat:no-repeat;
}
.linkedin {
    margin-left:35px;
    margin-top:20px;
    margin-bottom:20px;
    margin-right:35px;
    width:180px;
    height:40px;
    display:block;
    background-image:url(images/linkedin.png);
    background-repeat:no-repeat;
}
.twitter {
    margin-left:35px;
    margin-top:20px;
    margin-bottom:20px;
    margin-right:35px;
    width:180px;
    height:40px;
    display:block;
    background-image:url(images/twitter.png);
    background-repeat:no-repeat;
}
.hl {
    border: 2px;
    width: 80%;
    border-color:#999;
}
ul#ticker {
    width: 200px;
    height: 200px;
    overflow: hidden;
    margin:auto;
    list-style-type:none;
    padding:0px;
    font-family:Calibri, Arial, Tahoma;
    font-style:normal;
}
ul#ticker li {
    margin:0px;
    padding:0px;
    width: 200px;
    height: 130px;
    white-space:normal;
    overflow:none;
    text-align:justify;
}
ul#ticker li a:link {
    color: #fff;
    text-decoration:none;
}
ul#ticker li a:visited {
    color: #fff;
    text-decoration:none;
}
ul#ticker li a:hover {
    color: #fff;
    text-decoration:none;
}
ul#ticker li a:active {
    color: #fff;
    text-decoration:none;
}
ul#ticker li span {
    display: block;
    color: #06C;
    text-align:center;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
</script>
<script type="text/javascript">

$(function()
{
    var ticker = function()
    {
        setTimeout(function(){
            $('#ticker li:first').animate( {marginTop: '-120px'}, 800, function()
            {
                $(this).detach().appendTo('ul#ticker').removeAttr('style');
            });
            ticker();
        }, 4000);
    };
    ticker();
});
</script>
<body>
<div class="center">
<div class="frameDiv">
  <div class="header">
  <div class="logo"> </div>
  <div class="menu">
    <ul class="menus">
      <li id="menu1"><a href="index.php">Home</a></li>
      <li id="menu2"><a href="aboutus.php">About us</a></li>
      <li id="menu3"><a href="services.php">Services</a></li>
      <li id="menu4"><a href="gallery.php">Gallery</a></li>
      <li id="menu5"><a href="contactus.php">Contact</a></li>
    </ul>
  </div>
</div>
  <div class="mid">
    <div class="leftpane">
    <div class="image" style="margin:5px; margin-right:0px; display:block;">
    <img src="http://www.grnyrenovation.com/images/nycpremier.jpg"; style="overflow:hidden; width:745px" />    
    </div>
      <div class="content"></div>
      <div class="footer"> <br/>
  <hr style="height:2px; border:1px;" noshade="noshade"/>
  <p><a href="index.php">Home  |</a></p>
  <p><a href="aboutus.php">About us  |</a></p>
  <p><a href="services.php">Services  |</a></p>
  <p><a href="gallery.php">Gallery  |</a></p>
  <p><a href="contactus.php">Contact</a></p>
  <hr style="height:2px; border:1px; width:70%" noshade="noshade"/>
  <p style="margin:8px">&#169 Tile</p>
</div>
    </div>
    <div class="rightpane">
      <div style="clear:both;">
  <div class="quote"> </div>
  <div class="facebook"> </div>
  <div class="linkedin"> </div>
  <div class="twitter"> </div>
  <hr/ class="hl" style="height:2px; border:1px;" noshade="noshade">
  <div class="testimonial">
    <div style="color:#FFF; font-weight:bold; font-size:large;  font-family:'MS Serif', 'New York', serif; text-align:center;">
      <h3>Testimonials</h3>
    </div>
    <div class="tickerclass">
      <ul id="ticker">
        <li> <span>Title 1</span> <a href="#"> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the. </a> </li>
        <li> <span>Title 2</span> <a href="#"> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </a> </li>
        <li> <span>Title 3</span> <a href="#"> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </a> </li>
        <li> <span>Title 4</span> <a href="#"> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </a> </li>
        <li> <span>Title 5</span> <a href="#"> Welcome to Monday, to cancel reply. Tuesday, before that I employed a odioeros's more, but my following you to use the </a> </li>
      </ul>
    </div>
  </div>
  <br/>
  <hr class="hl" style="height:2px; border:1px;" noshade="noshade"/>
  <div class="acceridation" style="text-align:center; height:60px;">
  <img  style="margin:auto;overflow:hidden;width:80px;height:50px;"  align="middle" src="http://www.grnyrenovation.com/images/nkba_170x90.jpg" />
  <img  style="margin:auto;overflow:hidden;width:80px;height:50px;"  align="middle" src="http://www.grnyrenovation.com/images/sm_EPA-Lead-Safe-Certified.png"/>
  </div>
</div>

  </div>
    <div style="clear:both"></div>
    </div>
  </div>
</div>
</div>
</body>
</html>

score 0 · Accepted Answer

0

试试这个将你的代码添加到中心 div

.center{ overflow:auto;}

于 2012-08-16T05:26:50.940 回答

php - div 高度不会根据子控件自动扩展

3 回答 3

Related

Reference