解决footer层不显示

Hartland · #1 IP: 117.95.90.6 2014-12-31, 11:35 AM

Code:

<html>
	<head>
            <meta http-equiv="content-type" content="text/html; charset=utf8" /> 
		
		<title>study css and div</title>
		<style type="text/css">
			#container{
				width:1002px;
				background-color: grey;
			}

			#header{
				width:1002px;
				height:120px;
				background-color:red;
			}
			
			#main{
                                                        width:1002px;
                                                        height: 700px
				background-color:green;
			}

			#lside{
				float:left;
				width:700px;
				height:700px;
				background-color:purple;
			}
			#rside{
				float:left;
				width:302px;
				height:700px;
				background-color:pink;
			}
			#footer{
		   		width:1002px;
				height:120px;
				background-color:yellow;
			}
		</style>
	</head>
	<body>
	    <div id="container"></div>
		<div id="header"></div>
		<div id="main">
			<div id="lside"></div>
			<div id="rside"></div>
		</div>
 
		<div id="footer"></div>
	</body>
</html>

上边的代码可以正常显示footer部分的，可有个问题，如main部分的内部高度有变化呢？一般就要删除main中的高度：height: 700px;这行，变成：

Code:

<html>
	<head>
            <meta http-equiv="content-type" content="text/html; charset=utf8" /> 
		
		<title>study css and div</title>
		<style type="text/css">
			#container{
				width:1002px;
				background-color: grey;
			}

			#header{
				width:1002px;
				height:120px;
				background-color:red;
			}
			
			#main{
                                                        width:1002px;
				background-color:green;
			}

			#lside{
				float:left;
				width:700px;
				height:700px;
				background-color:purple;
			}
			#rside{
				float:left;
				width:302px;
				height:700px;
				background-color:pink;
			}
			#footer{
		   		width:1002px;
				height:120px;
				background-color:yellow;
			}
		</style>
	</head>
	<body>
	    <div id="container"></div>
		<div id="header"></div>
		<div id="main">
			<div id="lside"></div>
			<div id="rside"></div>
		</div>
 
		<div id="footer"></div>
	</body>
</html>

这样就会有另一个问题， footer部分不显示了，解决方法：在footer的css中加一行clear:both;让footer层与上边的左/右两边层不重叠:

Code:

<html>
	<head>
            <meta http-equiv="content-type" content="text/html; charset=utf8" /> 
		
		<title>study css and div</title>
		<style type="text/css">
			#container{
				width:1002px;
				background-color: grey;
			}

			#header{
				width:1002px;
				height:120px;
				background-color:red;
			}
			
			#main{
                                                        width:1002px;
				background-color:green;
			}

			#lside{
				float:left;
				width:700px;
				height:700px;
				background-color:purple;
			}
			#rside{
				float:left;
				width:302px;
				height:700px;
				background-color:pink;
			}
			#footer{
		   		width:1002px;
				height:120px;
				background-color:yellow;
				clear:both;
			}
		</style>
	</head>
	<body>
	    <div id="container"></div>
		<div id="header"></div>
		<div id="main">
			<div id="lside"></div>
			<div id="rside"></div>
		</div>
 
		<div id="footer"></div>
	</body>
</html>

或者将clear:both;改成float:left;

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)