常见布局：左栏固定右栏自适应

Posted 2020-07-21 tinyphp

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了常见布局：左栏固定右栏自适应相关的知识，希望对你有一定的参考价值。

这节我们要实现的目的只有一个，就是一栏固定一栏自适应。

1、使用div，这样就可以自动填满父标签宽度，设想方案如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    body{padding: 0;margin:0;}
        #wrap{
            overflow: hidden;*zoom: 1;
        }        
        #sitebar{background: #D7B9FF; float: left; width: 300px;}
        #content{
            background: #36CEC5;margin-left:300px;
        }
    </style>
</head>
<body>
    <div id="wrap">    
         <div id="sitebar">我是固定左栏</div>    
        <div id="content">
            我是右栏内容
        </div> 
    </div>
</body>
</html>

但这个有个限制，就是sidebar必须在content之前！

2、遵循网页优化的角度，主要内容应该放前面，那么需要把content和sitebar位置换一下，然后固定蓝使用绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    body{padding: 0;margin:0;}
        #wrap{
            *zoom: 1; position: relative;
        }        
        #sitebar{background: #D7B9FF; width: 300px;position: absolute;left:0;top: 0;}
        #content{
            background: #36CEC5;margin-left: 300px;
        }
    </style>
</head>
<body>
    <div id="wrap">    
        <div id="content">
            我是右栏内容
        </div> 
         <div id="sitebar">我是固定左栏</div>    
    
    </div>

</body>
</html>

但是这样也有一个问题，因为左栏使用了绝对定位，那么再有其他层的话就会被它挡住。

3、加多一个层，使用浮动和margin结合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
    body{padding: 0;margin:0;}
         
        #sitebar{background: #D7B9FF; width: 300px;float: left;}
        #content{
            background: #36CEC5;float: right;width: 100%;margin-right: -300px;
        }
            #content_wrap{
                margin-right: 300px;
            }
    </style>
</head>
<body>
    <div id="wrap">    
       <div id="content_wrap">
            <div id="content">
            我是内容
        </div> 
         <div id="sitebar">我是固定左栏</div>    
       </div>

    </div>
    
</body>

总结该布局应具备条件：

1、content自适应，sidebar固定

2、content在sidebar之前

3、后面的元素不受影响

以上是关于常见布局：左栏固定右栏自适应的主要内容，如果未能解决你的问题，请参考以下文章