怎样用CSS+DIV写两个并列的层,并且左边宽高固定,右边宽高自适应屏幕呢?附图

简单的做了一张图片,就是这样的...
我试过把宽和高都调整成100%可是还是不行

用表格很轻易的就可以做出来,但是我想试试用DIV做,求教各位前辈~~

举报该文章

第1个回答 2018-04-06

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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>

test

</div>

</div>

</body>

</html>

-------

html和body的高度设置为100%, 这样才能让div#wrap的高度生效.

若要将左侧高度固定,将.fixed的height设置为固定值就行了.

本回答被网友采纳

第2个回答推荐于2017-09-06

<!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设置为固定值就行了.本回答被提问者采纳

相似回答

大家正在搜