如何用CSS+DIV写两个并列并且左边宽高固定,右边宽高自适应屏幕的层?
答案:1 悬赏:80 手机版
解决时间 2021-01-03 04:36
- 提问者网友：捧腹剧
- 2021-01-02 23:10
精选
最佳答案
- 五星知识达人网友：神的生死簿
- 2021-01-06 23:38
<!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设置为固定值就行了.
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！
大家都在看
推荐资讯