                        课程
                    
                        /前端开发
                        
                            /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

关注问题我要回答

557

操作

收起

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>