如何用CSS+DIV写两个并列并且左边宽高固定,右边宽高自适应屏幕的层?
<!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>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
.wrap { width: 100%; height: 100%; }
.fixed { float: left; width: 200px; height: 100%; background: #000; margin-left: -100%; }
.main { float: left; width: 100%; height: 100%; }
.main-inner { margin-left: 200px; background: #f00; height: 100%;}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div class="main-inner">
test
</div>
</div>
<div class="fixed">a</div>
</div>
</body>
</html>
-------
html和body的高度设置为100%, 这样才能让div#wrap的高度生效.
若要将左侧高度固定,将.fixed的height设置为固定值就行了.
广告 您可能关注的内容 |