技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置：首页 --> CSS/HTML --> CSS利用背景图做等高列

CSS利用背景图做等高列

浏览:1165次  出处信息

CSS布局相比table布局更加的灵活。但是使用CSS制作两个一样高度的列确是比较复杂的一件事情，但是有时候确实非常的有用。

点击这里可以看看示例。

技巧在于给父容器使用垂直重复的背景图片，就可以从视觉上实现等高列了。

HTML结构

HTML结构比较简单，主要就是头部、导航、以及内容和子内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en"><head>
<title>CSS Faux Columns</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="container">
<h1>Header</h1>
<ul id="navigation">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="content">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut turpis. Phasellus lacus nisl, pellentesque quis, rhoncus at, dapibus a, nibh. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas arcu mauris, rutrum at, ullamcorper at, ornare lacinia, orci. Etiam urna. Ut ut mauris. Ut nec velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Quisque nisi enim, imperdiet sed, dapibus in, blandit ac, justo. Fusce ante libero, adipiscing at, egestas id, vehicula sit amet, nibh. Donec facilisis. Nulla facilisi. Proin tortor.</p>
<p>Aenean lobortis, ligula et varius commodo, diam arcu rutrum magna, eget viverra lorem est a lacus. Mauris laoreet dui in ligula. Integer ullamcorper leo id ligula. Quisque sapien. Integer ultrices dapibus nunc. Praesent vel quam et eros sagittis scelerisque. Nullam malesuada. Sed id velit sed eros condimentum porta. Nulla augue leo, venenatis ut, malesuada sed, luctus nec, velit. Fusce lacus nibh, semper a, mollis eget, cursus at, metus. Sed eros. Pellentesque libero sapien, molestie nec, vulputate in, dignissim et, ante. Cras tincidunt nisi vitae enim. In convallis, quam quis gravida mollis, sapien ipsum volutpat nisl, id ullamcorper lectus felis a nunc. Etiam et justo. Aliquam a ante in felis euismod scelerisque.</p>
</div>
<div id="subcontent">
<h2>Sub Content</h2>
<p>Maecenas enim. Mauris vulputate justo in tellus. Phasellus quis dolor. Cras accumsan pulvinar ligula. Nulla ornare dapibus dui. Aenean ipsum lacus, scelerisque id, fermentum ac, sodales in, diam. Donec condimentum porttitor nunc. Aenean in sem. Nam aliquam diam. Nam mollis, enim vitae consectetuer lacinia, nibh pede semper ante, ut aliquam orci massa et neque. Nulla semper, nibh ac mattis sollicitudin, nisl lorem fringilla libero, quis ultrices libero est sed metus.</p>
</div>
</div>
</body>
</html>


到现在一切还好，看看CSS的代码吧。


CSS代码


首先还是一些通用的样式：









1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36



* {
padding: 0;
margin: 0;
}
html {
overflow-y: scroll;
}
html, body {
height: 100%;
}
body {
font-size: 100%;
font-family: "lucida sans", arial, verdana, helvetica, sans-serif;
background-color: #CCC;
}
h1 {
font-size: 1.8em;
background-color: #000;
color: #FFF;
padding: 1em;
margin: 0 1px;
}
h2 {
font-size: 1.6em;
padding-bottom: 0.3em;
}
p {
padding-bottom: 1em;
}
a, a:link {
color: #3A484C;
font-weight: bold;
}
a:hover {
color: #000;
}


这些都比较简单，然后我们给容器填充背景图片，然后撑开容器：









1
2
3
4
5
6
7
8
9
10
11



#container {
font-size: 0.75em;
width: 750px;
margin: 0 auto;
background-image: url(background.gif);
background-color: #fff;
min-height: 100%;
}
* html #container {
height: 100%;
}


这里使用的办法跟我们之前的文章CSS100%高度布局中的一样。


然后我们来定位内容列，设置一些其他的样式：









1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17



#navigation {
float: left;
width: 128px;
padding: 10px 11px;
list-style-type: none;
}
#content {
float: left;
width: 329px;
padding: 10px 11px 10px 10px;
}
#subcontent {
float: left;
padding: 10px;
width: 230px;
color: #B7D4DA;
}


最后你需要做的就是给footer清除浮动，这样当内容很长的时候，背景图片也不会中断。









1
2
3
4
5
6
7



#container:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}


总结


理解了这种办法之后，就可以让很多事情成为可能了。很简单，而且不需要额外的标签，兼容各个浏览器。

						
										

						
						
						
					

										

					
										
建议继续学习：

					
    
													
  1. Android动画背景图自动播放的实现    (阅读：2213)
    2. 
												
					

										
					
					
					
					

						QQ技术交流群：445447336，欢迎加入！

						扫一扫订阅我的微信号：IT技术博客大学习

						
					

					

				


			

				
			

				
 << 前一篇：有条件的添加Hover样式

				
后一篇：CSS中变化Fixed的实现 >>

			

			
			

				
文章信息

				
				
			


			
            


        


        
 

            






            


            


            

            

                





				

            






















            
        
 

    
 

            
    
    

            © 2009 - 2024 by blogread.cn 微博：@IT技术博客大学习
        
        

        

		京ICP备15002552号-1