                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /如何用CSS進行網頁布局

3行垂直布局問題

如果想上下固定，中間自適應怎么布局？我寫的中間的div穿透了底部

<div?class="header"></div>
?<div?class="center">
?????<div?class="left"?id="left">左邊</div>
?????<div?class="right">右邊</div>
?</div>
<div?class="footer">底部</div>

.header{width:?100%;height:?80px;background-color:?#303030;position:?absolute;top:0;left:0;z-index:?2;opacity:?0.3}
.center{background-color:?white;margin-top:?80px;margin-bottom:?22px;}
.left{width:320px;height:?100%;float:left;background-color:?yellowgreen;}
.right{width:auto;height:100%;background-color:?orange}
.footer{width:100%;height:?21px;border-top:1px?solid?#d0d0d0;background-color:#f0f0f0;position:?absolute;bottom:?0;left:0;z-index:?1}

群下之辰

2016-04-12

源自：如何用CSS進行網頁布局 4-1

關注問題我要回答

537

操作

收起

4 回答

傾昀
2016-04-13

.header{width: 100%;height: 80px;background-color: #303030;position:absolute;top:0;z-index:2;opacity: .8}

.footer{width: 100%;height: 21px;border-top:1px solid #f0f0f0;background-color:white;position: absolute;bottom:0;z-index: 1;opacity: .8}

上面2行改成

.header{width: 100%;height: 80px;background-color: #303030;}

.footer{width: 100%;height: 21px;border-top:1px solid #f0f0f0;background-color:white;}

opacity是設置不透明級別的

z-index設置的是層疊級別

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

收起回答

傾昀
2016-04-12

你的頭部，底部都加了absolute 絕對定位，使頭部，底部脫離了文檔流，不占空間。所以頭部，底部都跟中間的div重疊了

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

收起回答

群下之辰提問者

那該怎么解決呢？

2016-04-12 回復有任何疑惑可以回復我~

群下之辰提問者
2016-04-12

<html>
?<head>
????<title>首頁</title>
?????<style?type="text/css">
?????????body{margin:0;padding:0;position:?relative}
?????????.header{width:?100%;height:?80px;background-color:?#303030;position:absolute;top:0;z-index:2;opacity:?.8}
?????????.center{height:?100%;}
?????????.left{width:?320px;height:?inherit;float:?left;background-color:?aquamarine}
?????????.right{width:?auto;height:?inherit;background-color:?#FF9400}
?????????.footer{width:?100%;height:?21px;border-top:1px?solid?#f0f0f0;background-color:white;position:?absolute;bottom:0;z-index:?1;opacity:?.8}
?????????span{font-size:11px;line-height:?21px;text-align:?center;display:?block}
?????</style>
?</head>
?<body>
???<div?class="header">頭部</div>
???<div?class="center">
???????<div?class="left">左部</div>
???????<div?class="right">右部</div>
???</div>
???<div?class="footer"><span>底部</span></div>
?</body>
</html>