                        課程
                    
                        /前端開發
                        
                            /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 class="left">left</div>

</div>

</body>

</html>

Fornow

2015-09-18

源自：如何用CSS進行網頁布局 5-3

關注問題我要回答

897

操作

收起

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 回復有任何疑惑可以回復我~

收起回答