css自适应高度

最新推荐文章于 2024-04-07 21:10:40 发布

Ibrahim

最新推荐文章于 2024-04-07 21:10:40 发布

阅读量542

点赞数

分类专栏： web design 文章标签： css自适应高度

web design 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

css自适应高度，css分列自适应高度

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DIV+CSS自适应高度</title>
<style type="text/css">
 body{ padding: 0; margin: 0; font-size: 12px; font-family: Arial, Helvetica, sans-serif; line-height: 140%; text-align: center; background:#E7DFD3; } 
#wrap{ width: 750px; margin: 0 auto; overflow: hidden; } #header{ background: #E8E8E8; } 
#sideleft{ width: 580px; float: left; background: #FFF; text-align: left; }
#sideright{ width: 170px; float: left; background: #F0F0F0; text-align: left; }
#wrap:after { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; height: 0; clear: both; visibility: hidden; } 
#wrap { display: inline-block; } 
#wrap { display: block; } 
#sideleft, #sideright { padding-bottom: 32767px !important; margin-bottom: -32767px !important; } @media all and (min-width: 0px) { #sideleft, #sideright { padding-bottom: 0 !important; margin-bottom: 0 !important; } 
#sideleft:before, #sideright:before { content: '[DO NOT LEAVE IT IS NOT REAL]'; display: block; background: inherit; padding-top: 32767px !important; margin-bottom: -32767px !important; height: 0; } } 
#footer{ background: #E8E8E8; width: 100%; float: left; } 
h1,h2,address,p{ margin: 0; padding: .8em; } h1,h2{font-size: 20px;}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>Head</h1>
</div>
<div id="sideleft">
<h2>Sideleft</h2>
<p> mschart.ocx 是一款与图形报表有关的控件，压缩包内的实例就是一个典型的mschart.ocx应用实例。源码爱好者提供各类编程源码、素材、书籍教程、设计模板、网页特效代码以及常用软件下载。</p></div>
<div id="sideright"> 
<h2>Sideright</h2> <p>mschart.ocx 是一款与图形报表有关的控件，很多人特别是初接触VB的朋友，都曾询问过这个控件的使用方法，的确，学会以了mschart确实对提升编程效率起了很大作用的，因为mschart.ocx功能确实强大，本压缩包内的实例就是一个典型的mschart.ocx应用实例 ，希望通过这个实例让一些对此控件使用不熟练的朋友有所帮助。</p>
</div>
<div id="footer">
<address>Footer</address>
</div>
</div>
</body>
</html>