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

效果图：

<!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%，便可以使它跑到窗口的最左边。

时间： 2024-11-05 14:50:44

两侧边栏固定宽 主内容自适应的相关文章

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

效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{padding:0;margin:0;} *{box-sizing:border-box;} .side{width:200px;height:500px;background

margin+absolute布局：右栏固定主内容自适应 demo

margin+absolute布局:右栏固定主内容自适应 demo 头部 Aside侧边栏区域 Main主内容区域 底部 #demo{width:80%;margin:auto;height:300px;} #hd2,#ft2{height:50px;background-color:#aaa;} #bd2{position:relative;margin:10px 0;} #aside2{position:absolute;top:0;right:0;width:200px;backgroun

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

左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样.但是你仔细看后你会觉得不是那么回事: 左边固定,右边自适应布局,这个第一点应该来说是非常的容易,实现的方法也是相当的多,那么就可以说第一条要求已不是什么要求了: 左右两列等高布局,这一点相对来说要复杂一些,不过你要是了解了怎么实现等高布局,那么

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

左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样.但是你仔细看后你会觉得不是那么回事: 左边固定,右边自适应布局,这个第一点应该来说是非常的容易,实现的方法也是相当的多,那么就可以说第一条要求已不是什么要求了: 左右两列等高布局,这一点相对来说要复杂一些,不过你要是了解了怎么实现等高布局,那么

NEC学习 ---- 布局 -两列， 左侧定宽，右侧自适应

CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;

两列定宽布局

两列定宽布局方式的一个前提就是两列的盒模型宽度相加不能大于父元素的宽度,否则你懂得......错位了. 测试html页: <body> <div id="header"> 头部 </div> <div id="container"> <div class="mainBox"> 主要内容区域 </div> <div class="sideBox">

要布局左右两边定宽，中间自适应

最近在布局时,有一些问题,左右两边定宽,中间自适应,首先想到的就是左浮动和右浮动,但是在操作时还是会出现一些问题 1. 采用左边左浮动,右边右浮动,中间块用margin-left/margin-right <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>

我的前端组件 ---- 16:9固定宽高比例的div

目标:遇到一个需求,让图片在页面中,不管宽度如何变化.宽高保持16:9的比例. 实现: 方法一:这也是比较经典的一个方法,利用padding-bottom来实现. <!DOCTYPE html> <html> <head> <title>固定宽高比16:9</title> <style type="text/css"> *{ margin: 0px; padding: 0px; } .wrap{ width:100

将两个数组中的内容进行交换（数组一样大）

数组A和数组B一样大,将两个数据中的内容进行交换.在main函数外编写swap函数进行两个数组内容的交换,再在主函数中调用它可实现两个数组的内容交换. 代码如下: #include<stdio.h> void swap(int arr1[],int arr2[],int len) {      int i;      for(i=0;i<len;i++) {              int temp=arr1[i];          arr1[i]=arr2[i];