怎样用CSS+DIV写两个并列的层,并且左边宽高固定,右边宽高自适应屏幕呢?附图
简单的做了一张图片,就是这样的...我试过把宽和高都调整成100%可是还是不行用表格很轻易的就可以做出来,但是我想试试用DIV做,求教各位前辈~~...
简单的做了一张图片,就是这样的...
我试过把宽和高都调整成100%可是还是不行
用表格很轻易的就可以做出来,但是我想试试用DIV做,求教各位前辈~~ 展开
我试过把宽和高都调整成100%可是还是不行
用表格很轻易的就可以做出来,但是我想试试用DIV做,求教各位前辈~~ 展开
2个回答
展开全部
<!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设置为固定值就行了.
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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设置为固定值就行了.
<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设置为固定值就行了.
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
