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

效果图：

<!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:red;float:left;padding:10px;margin-right:-100%;position:relative;}
        .main{width:100%;float:left;}
        .main-inner{min-height:500px;background:blue;margin-left:200px;padding:10px;}

    </style>
</head>
<body>
    <div class="side">左边栏</div>
    <div class="main">
        <div class="main-inner">
            主内容
        </div>
    </div>
</body>
</html>

这是利用负外边距的方法

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

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

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

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

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

接着调整样式：

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

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

时间： 2024-10-08 13:45:22

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

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

效果图: <!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;b

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行为实现: 仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样.但是你仔细看后你会觉得不是那么回事: 左边固定,右边自适应布局,这个第一点应该来说是非常的容易,实现的方法也是相当的多,那么就可以说第一条要求已不是什么要求了: 左右两列等高布局,这一点相对来说要复杂一些,不过你要是了解了怎么实现等高布局,那么

侧边栏固定的布局

这部分没有弄得很清楚 问题来源: http://codepen.io/wmrch05/details/LiaKG 在上述案例中,页面滚动的时候,侧边栏和顶部导航的布局由static转换为fixed.同时相对于原来的static的位置发生了编码,案例的源码是:(最终的scripts源码感觉涉及到一些高级的编程特性,没怎么看懂) <html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage w

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

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

select 宽度跟随option内容自适应

传统的select在没有设置固定宽度的情况,会因为自身的 option 选项的里,宽度最宽的option作为select本身的宽度 例如 可见效果为: select的宽度因为"宽度最宽的option作为select本身的宽度"导致select变宽 但是这跟我们想要的select宽度跟随option内容自适应,相违背 解决方案: 很普遍的,大家会选择用JS来控制select的宽度.大概是判断option的内容长度,然后js控制select宽度 而这里讲的自适应,是做一个select的容器

我的前端组件 ---- 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

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;