当我为内容添加高度时，页脚会崩溃

时间：2013-10-01 08:17:20

标签： html css

我创建了一个页面，在内容区域中我尝试使用div float left创建两列，但是当我增加列的高度时，我的页脚会折叠。这里是没有列的初始小提琴：jsfiddle.net/Vrk5C/，这里是列中的小提琴：jsfiddle.net/GKCT7/

这是我的html和css

的完整代码 
<!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>Contact | Chaithanya Public School</title>
<link rel="stylesheet" href="style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
<body id="body1">
<div class="container">
<div class="header">
<div style="float:left; width:300px; margin-top:5px;">
<img src="images/logotext.png" /></div>



</div><!-- header ends-->



<div class="menudiv">
<div class="menu">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a>
                        <ul>
                        <li><a href="#">School</a></li>
                        <li><a href="#">Vision and Mission </a></li>
                        <li><a href="#">Principal’s desk</a>
                        <li><a href="#">Management</a>
                        </ul> </li>
                <li><a href="#">Admission</a>
                        <ul>
                        <li><a href="#">Overview</a></li>
                        <li><a href="#">Download application form</a></li>
                        </ul> </li>
                <li><a href="#">Gallery</a></li>
                <li><a href="#">School Calander</a></li>
                <li><a href="#">News & Events</a></li>
                <li><a href="#">Career</a></li>
                <li><a href="#">Contact</a></li>               
            </ul>
        </div>
</div><!-- menu div ends-->


<div class="content">
<br />
<div class="heading">Contact</div>

<br />
<br />
</div><!-- Content ends-->
</div><!-- container ends-->

<div class="footer">
<div class="footerbox">
<div class="footerbox1">
       <!-- box1 -->
      <ul id="footerul">
      <p id="footerli" class="footerhead">About</p>
                <li><a href="about-school.php">School</a></li>
              <li><a href="vision-mission.php">Vission & Mission</a></li>
              <li><a href="management.php">Management</a></li>
              </ul>
      </div> <!-- box1 end -->

      <div class="footerbox2">     <!-- box2 -->
       <ul id="footerul">
          <p id="footerli" class="footerhead">Admission</p>
              <li><a href="admission.php">Overview</a></li>
              <li><a href="images/Admission_Application.pdf">Application</a></li>
              <li><a href="documents-to-be-submitted.php">Documents</a></li>
              </ul>
      </div> <!-- box2 end -->

       <div class="footerbox2">  <!-- box3 -->
      <ul id="footerul">
      <p id="footerli" class="footerhead">School</p>
              <li><a href="calander.php">Calander</a></li>
              <li><a href="gallery.php">Gallery</a></li>
               <li><a href="careers.php">Careers</a></li>
                            </ul>
      </div> <!-- box3 end -->

        <div class="footerbox2">  <!-- box4 -->
       <ul id="footerul">
             <p id="footerli" class="footerhead"> Contact</p>
              <li style="color:#929497;">082 4227 1080</li>
              <li style="color:#929497;">Info@chaithanyaschool.com</li>
              <li><a href="map_direction.php">Map Directions</a></li>
                            </ul>
        </div> <!-- box4 end -->

         <div class="footerbox3" style="padding-top:45px; padding-left:70px;">  <!-- box5 -->
        <table border="0" style="float:right">
      <tr>
      <td><a href="https://www.facebook.com/ChaithanyaPublicSchool" id="facebook"></a></td>
      <td><a href="https://twitter.com/cps_krishnapura" id="twitter"></a></td> </tr>
               </table>

               <table border="0" style="float:right; width:220px;">
      <tr>
      <td id="footerul" style="text-align:right; color:#929497;">© 2013 Chaithanya Public School</td>
</tr><tr>
      <td id="footerul" style="text-align:right; color:#929497;">All Rights Reserved</td> </tr>
      </table>
 </div> <!-- box5 end -->




</div>
</div>


</body>
</html>


body {
    margin:0px;
    padding:0px;
     /* fallback */
  background-color: #3A454B;
  background: url(images/linear_bg_2.png);
  background-repeat: repeat-x;

  /* Safari 4-5, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3A454B), to(#2F2727));

  /* Safari 5.1, Chrome 10+ */
  background: -webkit-linear-gradient(top, #3A454B, #D9E0E6);

  /* Firefox 3.6+ */
  background: -moz-linear-gradient(top, #3A454B, #D9E0E6);

  /* IE 10 */
  background: -ms-linear-gradient(top, #3A454B, #D9E0E6);

  /* Opera 11.10+ */
  background: -o-linear-gradient(top, #3A454B, #D9E0E6);

}

#body
{
background:url(images/head_bg.jpg) repeat-x;    
}

#body1
{
/* background:url(images/head_bg1.jpg) repeat-x;    */
}

.container
{
    width:980px;
    min-height:500px;
    height:auto;
    margin-left:auto;
    margin-right:auto;    

}

.header
{
    width:980px;
    height:100px;


}

.slider
{

    width:976px;
    height:230px;
    border: 4px #fff solid; 
}

.bar
{
    margin-left: auto;
  margin-right: auto;
    margin-top:10px;
    margin-bottom:10px;
padding: 0;
width: 980px;
height:30px;
background:#98AFC7;
-moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;

}

.content
{
    margin-top:0px;
  margin-bottom:10px;
  width:980px;
  min-height:500px;
height:auto;
    background:#fff;
    /* border:1px solid #000;
-moz-border-radius: 1px;
    -webkit-border-radius: 1px; */


 } 

.footer
{
    padding-top:20px;
height:250px;



    background:#111312;

}

.footerbox
{
    width:980px;
    height:250px;
    margin-left:auto;
    margin-right:auto;    

}

.footerbox1
{
    float:left;
    height:200px;
    width:150px;
}

.footerbox2
{
    float:left;
    height:200px;
    width:150px;
    margin-left:3px;
}

.footerbox3
{
    float:left;
    height:200px;
    width:220px;

}

#footerul {
    list-style-type:none;
    line-height:2.0em;
    font-family: 'Droid Sans', sans-serif;
    font-size: 12px;

}

#footerul a {
    text-decoration:none;
    list-style-type:none;
    line-height:2.0em;
    font-family: 'Droid Sans', sans-serif;
    font-size: 12px;
    color:#999;
}

#footerul a:hover{
    list-style-type:none;
    line-height:2.0em;
    font-family: 'Droid Sans', sans-serif;
    font-size: 12px;
        color:#FFF;
}

#footerli {
    border-bottom:1px solid #666;
    padding-bottom:5px;
    }

.footerhead
{
/*color:#C36241;    */
color:#81C1ED;

font-size: 14px;
    font-family: 'Open Sans', sans-serif;
}


#facebook
{
display: block;
width:32px;
height:32px;
background:url(images/facebook_dark.png) no-repeat; 

}

#facebook:hover 
{
background:url(images/facebook_active.png) no-repeat;   
}

#twitter
{
display: block;

width:32px;
    height:32px;
background:url(images/twitter_dark.png) no-repeat;  

}

#twitter:hover 
{
background:url(images/twitter_active.png) no-repeat;    
}





.logotext
{
font-family: 'Open Sans', sans-serif;
color:#FFF;
font-size:37px;
margin:0px;
}

.logotext1
{
font-family: 'Open Sans', sans-serif;
font-size:20px;
margin:0px;
}

.link
{
color:#000;
text-decoration:underline;
}

.link:hover
{
    text-decoration:none;
color:#0CC;
}


.text
{
font-family: 'Droid Sans', sans-serif;
font-size:14px;
line-height:25px;
margin:0px;
color:#000;
text-align:justify;
}

.heading
{
font-family: 'Oxygen', sans-serif;
font-size:16px;
padding-left:30px;
color:#4e5c64;
text-align:justify;
}

.heading1
{
font-family: 'Oxygen', sans-serif;
font-size:16px;
padding-left:30px;
color:#999;
text-align:justify;
}

.hblock1
{
width:320px;
height:200px;
background:#88C7F0;
 -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  float:left;
  margin-left:4px;

}

.hblock2
{
width:318px;
height:200px;
background:#88C7F0;
 -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-left:10px;
float:left;
}

.hblock3
{
width:318px;
height:200px;
background:#88C7F0;
 -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-left:10px;
float:left;
}

.addressbox
{
    width:200px;
    height:400px;
    float:left;

}

.add
{
    width:200px;
    height:400px;
    float:left;
}

.adressbox1
{
    width:300px;
    height:150px;
    float:left;
    margin-top:20px;
}

.adressbox2
{
    width:300px;
    height:120px;
    float:left;
    margin-top:10px;
}

.adressbox3
{
    width:300px;
    height:30px;
    float:left;
    margin-top:10px;
}

.adressbox4
{
    width:300px;
    height:30px;
}




.menudiv {
    width:980px;
}
.menu {
    font-family:'Open Sans', sans-serif;
    font-size:14px;
}
.menu ul ul {
    display: none;
}
.menu ul li:hover > ul {
    display: block;
}
.menu ul {
    background: #AEA79F;
    margin: 0;
    list-style: none;
    position: relative;
    padding: 0;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
.menu ul:after {
    content:"";
    clear: both;
    display: block;
}
.menu ul li {
    float: left;
    padding-top: 10px;
    padding-bottom: 7px;
    border-bottom: 3px solid transparent;
}
.menu ul li:hover {
    background: #2C001E;
    border-bottom: 3px solid #2C001E;
}
.menu ul li:hover a {
    color: #fff;
}
.menu ul li a {
    color: #fff;
    text-decoration: none;
}
.menu ul ul {
    background: #2C001E;
    padding: 0;
    position: absolute;
    top: 100%;
}
.menu ul ul li {
    float: none;
    position: relative;
}
.menu ul ul li a {
    padding: 10px;
    color:#000;
    display: block;
}
.menu ul ul li a:hover {
    background: #111312;
    color: #fff;
}
.menu ul ul ul {
    position: absolute;
    left: 100%;
    top:0;
    padding: 0;
}
.menu ul ul ul li {
    float: none;
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid pink;
    position: relative;
}
.menu ul ul ul li a {
    padding: 10px;
    color: #fff;
    display: block;
}
.menu ul ul ul li a:hover {
    background: #95CEF1;
    color: #000;
}
.menu ul ul ul ul {
    position: absolute;
    left: 100%;
    top:0;
}
.menu > ul > li > a {
    border-right: 1px solid white;
    display: block;
    padding-left: 25px;
    padding-right: 25px;
}
.menu > ul > li:last-child > a {
    border-right: 0;
}

这是我想做的事情：enter image description here

2 个答案:

答案 0 :(得分：2)

清除浮子。也许在您的内容结束之前使用<div style="clear: both"></div>：

http://jsfiddle.net/GKCT7/1/

答案 1 :(得分：0)

明确：两者都要上课“.footer”

相关问题
最新问题