我创建了一个页面，在该页面的内容区域中，我尝试使用 div float left 创建两列，但是当我增加列的高度时，我的页脚会折叠。这是没有列的初始 fiddle :jsfiddle.net/Vrk5C/这是里面有列的 fiddle :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;
}
这是我正在尝试做的事情:
最佳答案
清除 float 。也许使用 <div style="clear: both"></div>就在您的内容结束之前:
关于html - 当我向内容添加高度时，页脚会折叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19111217/