CSS左侧固定宽右侧自适应（兼容所有浏览器）

最新推荐文章于 2023-08-13 09:34:53 发布

腻害了啊

最新推荐文章于 2023-08-13 09:34:53 发布

阅读量327

点赞数

分类专栏： html css

css 同时被 2 个专栏收录

11 篇文章

订阅专栏

html

2 篇文章

订阅专栏

本文介绍了两种实现网页中固定宽度侧边栏与自适应主要内容区域布局的方法：通过设置左侧栏浮动及主要内容区域的左外边距；利用负的右外边距使左侧栏覆盖主要内容区域。

方法一、浮动布局

[html]view plain copy 
          
 HTML   
 <div id="left">Left sidebar</div>  
   
 <div id="content">Main Content</div>  
   
 CSS Code  
 <style type="text/css">  
   
 *{margin: 0;padding: 0;}  
 #left {  
 float: left;  
 width: 220px;  
 background-color: green;  
 }  
 #content {  
 background-color: orange;  
 margin-left: 220px;/*==等于左边栏宽度==*/  
 }  
 </style>  

[html]view plain copy 
          
 <span style="font-family: Verdana, 'Lucida Grande', Arial, Helvetica, sans-serif; line-height: 18px;">上面这种实现方法最关键之处就是自适应宽度一栏“div#content”的“margin-left”值要等于固定宽度一栏的宽度值</span>  

方法二、

[html]view plain copy 
          
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
     <meta charset="UTF-8">  
     <title>Document</title>  
     <style type="text/css">  
         *{margin:0 auto;padding:0 auto;}  
         #left {  
             background-color: green;  
             float: left;  
             width: 220px;  
             margin-right: -100%;  
             /*min-height: 300px;*/  
         }  
         #content {  
             float: left;  
             width: 100%;  
         }  
         #contentInner {  
             margin-left: 220px;/*==等于左边栏宽度值==*/  
             background-color: orange;  
             height: 400px;content高度不能自己变化，随着contentInner的高度变化而变化  
         }  
     </style>  
 </head>  
 <body>  
     <div id="left">  
         Left Sidebar  
     </div>  
     <div id="content">  
         <div id="contentInner">  
             Main Content  
         </div>  
     </div>  
 </body>  
 </html>  