首页 > 代码库 > 两侧边栏固定宽 主内容自适应

两侧边栏固定宽 主内容自适应

2024-08-25 03:38:35   220人阅读

效果图：

技术分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{padding:0;margin:0;}
        *{box-sizing:border-box;}
        .side-left{width:200px;min-height:500px;background:red;float:left;padding:10px;margin-right:-100%;position:relative;}
        .side-right{width:200px;min-height:500px;background:yellow;float:left;padding:10px;margin-left:-200px;position:relative;}
        .main{width:100%;float:left;}
        .main-inner{min-height:500px;background:blue;margin:0 200px;padding:10px;}
    
    </style>
</head>
<body>
    <div class="side-left">左边栏</div>
    <div class="main">
        <div class="main-inner">
            主内容
        </div>
    </div>
    <div class="side-right">右边栏</div>
</body>
</html>

 

这是利用负外边距的方法

主内容需要2层div
1、外层宽度100%，左浮动
2、内层给一个最小高度，左边和右边为了空出200px需要给一个margin:0 200px

左边栏宽度200px，高500px
1、左浮动
2、为了让主内容能够浮动在它的右边，需要给一个margin-right:-100%
3、给一个相对定位，否则左边栏的内容点击不到。

右边栏宽度200px，高500px
1、左浮动
2、为了浮动在主内容右边，需要给一个margin-left:-200px
3、给一个相对定位，否则右边栏的内容点击不到。

注意：如果主内容也给了相对定位，那么需要用z-index调节他们的层级关系。

 

另外，如果需要内容优先，那么要把main放到side的前面

<body>
    <div class="main">
        <div class="main-inner">
            主内容
        </div>
    </div>
    <div class="side-left">左边栏</div>
    <div class="side-right">右边栏</div>
</body>

调整css样式：

.side-left{width:200px;min-height:500px;background:red;float:left;padding:10px;margin-left:-100%;position:relative;}

其实只是把margin-right改成了margin-left，因为调整后的html结构side-left在main的右边，而main是100%宽，给一个margin-left:-100%，便可以使它跑到窗口的最左边。

两侧边栏固定宽 主内容自适应


联系
我们