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

为什么footer不见了？

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

<head>

<title>混合布局编程挑战</title>

body{ margin:0; padding:0; font-size:30px; color:#fff}

.top{margin:0 auto; width:100%; background:#ccc;height:100px;}

.main{margin:0 auto; width:100%; background:#ffc;height:600px;position:absolute;}

.left{float:left; width:200px; background:#fcc;height:600px; position:absolute;top:0;}

.right{background:#cff;height:100%; margin-left:210px;}

.foot{margin:0 auto; width:100%; background:#f99;height:100px;clear:both;}

</style>

</head>

<body>

<div class="right">right</div>

</div>

</body>

</html>

Fornow

2015-09-18

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

关注问题我要回答

865

操作

收起

3 回答

Fewq
2015-09-18

把main的绝对定位去掉或者改成相对定位(position:relative)

0 回复有任何疑惑可以回复我~

收起回答

Fornow 提问者

非常感谢！

2015-09-24 回复有任何疑惑可以回复我~

echo_kinchao
2015-09-18

你绝对定位了兄弟

0 回复有任何疑惑可以回复我~

收起回答

feihuaseo
2015-09-18

<style type="text/css">
body {
margin:0;
padding:0;
font-size:30px;
color:#fff
}
.top {
margin:0 auto;
width:1000px;
background:#ccc;
height:100px;
}
.main {
margin:0 auto;
width:1000px;
height:600px;
background-color:#F00;
}
.left {
float:left;
width:200px;
background:#fcc;
height:600px;
top:0;
}
.right {
background:#cff;
width:780px;
height:600px;
float:right;
}
.foot {
margin:0 auto;
width:1000px;
background:#f99;
height:100px;
clear:both;
}
</style>
</head>
<body>
<div class="top">top</div>
<div class="main">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<div class="foot">foot</div>

0 回复有任何疑惑可以回复我~

收起回答