                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

footer占用了main的位置，跑到了left和right的下面

<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{width:100%;background:purple;}
.main{width=100%;background:red;position:relative;}
.left{width:200px;background:blue;position:absolute;left:0px;}
.right{position:absolute;right:0px;margin-left:10px;background:green;}
.foot{width:100%;background:orange;}
</style>

</head>

<body>
<div class="top">top</div>
<div class="main">
    <div class="right">right</div>
    <div class="left">left</div>
</div>
<div class="foot">foot</div>

</body>

结果是这样子的

cc_0501

2015-10-14

源自：如何用CSS进行网页布局 5-3

关注问题我要回答

667

操作

收起

2 回答

大写的水
2015-10-15

你的left和right没有设置高度，然后这里和上一节中不大一样，上一节中使用的是浮动排版，解决footer显示的方法有1、给main设置和left/right相同的高度；2、给main设置属性overflow=hidden；3、给footer设置属性clear:both；在这一节这里我们使用的是定位排版，所以只能采取给main设置和left/right相同的高度的方法解决footer显示问题