一个页面,左栏是内容栏content,右栏是侧边栏sidebar。如何使侧边栏宽度不动(更改页面宽度时),内容区宽度自适应呢?为了保证内容区宽度自适应,先不设定其宽度,使其填充整个DIV区域,设定足够大小的右外边距,左浮动。侧边栏使用负margin,设置一定的负值左外边距,使其浮动到实现设定好的空白右外边距的地方。
<style>
div#wrapper {
margin:15px 0;
overflow:auto;
}
div#content {
float:left;
margin-right:465px;
background-color:#E8E8E8;
}
div#content p {
color:#464646;
font-family:Comic Sans MS;
font-size:18px;
margin:0;
padding:10px;
}
div#sidebar {
color:#666666;
font-size:12px;
}
div#sidebar {
float:right;
margin-left:-455px;
width:455px;
background-color:#E8E8E8;
}
div#sidebar p {
padding:10px;
margin:0;
}
</style>
<div id="wrapper">
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="sidebar">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div> </div>

CSS侧边栏宽度不动(更改页面宽度时),内容区宽度自适应的更多相关文章

  1. Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  2. css 如何让大小不同的图片表现一致,同时自适应呢?

     壹 ❀ 引 实习生在做产品分类页时,遇到了一个她不知道如何解决问题,所以来问我应该怎么做:问题其实不难,由于项目使用了bootstrap来实现响应式与自适应,所以除了宽度有明确的百分比值之外(栅格化 ...

  3. 关于页面缩放时css错乱的处理方法---之一

    这几天遇到一个问题,就是在做网页的时候,页面缩放时,布局就乱了,原来的样子不会跟随缩放的放大或者缩小进行改变,直接导致的后果,就是页面很难看,无法使用 之前虽然写了代码,但是一直没有注意到缩放后页面的 ...

  4. Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法

    Css中实现一个盒子固定宽度,另一个盒子宽度自适应的方法 网上方法很多,个人认为以下两种思想是最为常用的. 一种是让第一个盒子脱离文档流,第二个盒子离左边有一定距离. 第二种方法是使用flex布局,不 ...

  5. CSS实现页面切换时的滑动效果

    最近在开发手机端APP页面功能时遇到一个需求:某个页面查询的数据有三种分类,需要展示在同一页面上,用户通过点击分类标签来查看不同类型的数据, 期望效果是 用户点击标签切换时另一个页面能够以一个平滑切入 ...

  6. CSS入门指南-4:页面布局

    这是<CSS设计指南>的读书笔记,用于加深学习效果. display 属性 display是 CSS 中最重要的用于控制布局的属性.每个元素都有一个默认的 display 值.对于大多数元 ...

  7. 手机web页面制作时的注意事项

    一.手机页面的标准头规范 字符编码使用utf-:指定页面手机内存缓存中的存储时间段 device-width:通知浏览器使用设备的宽度作为可视区的宽度 initial-scale - 初始的缩放比例 ...

  8. 利用@keyframe及animation做一个页面Loading时的小动画

    前言 利用@keyframe规则和animation常用属性做一个页面Loading时的小动画. 1  @keyframe规则简介 @keyframes定义关键帧,即动画每一帧执行什么. 要使用关键帧 ...

  9. 小tip:CSS vw让overflow:auto页面滚动条出现时不跳动——张鑫旭

    小tip:CSS vw让overflow:auto页面滚动条出现时不跳动 这篇文章发布于 2015年01月25日,星期日,23:08,归类于 css相关. 阅读 46274 次, 今日 91 次 by ...

随机推荐

  1. 【leetcode】Trapping Rain Water

    Given n non-negative integers representing an elevation map where the width of each bar is 1, comput ...

  2. Windows服务器安全加固实战(Windows Server 2008 R2和Windows Server 2012)

    最近我们立方技术工作室在使用阿里云的过程中,发现服务器安全性也不是很高,而服务端的安全软件都很贵.为了为朋友们提供更加有效的解决方案,我们决定身体力行,高筑墙,大幅度提升服务器的安全防护级别! 主机安 ...

  3. 管理我的数据之GDBM

    管理我的数据之GDBM 作者 He YiJun – storysnail<at>gmail.com 团队 ls 版权 转载请保留本声明! 本文档包含的原创代码根据General Publi ...

  4. 在 Cloud 9 中搭建和运行 Go

    简介 自从使用了Chromebook,我脑中一直充斥着在云端开发的念头.在我使用过的位数不多的在线开发环境中,唯有 Cloud 9令我比较满意.实际上,Cloud 9还不支持Go的开发,因此本文我将教 ...

  5. ddms(基于 Express 的表单管理系统)源码学习

    ddms是基于express的一个表单管理系统,今天抽时间看了下它的代码,其实算不上源码学习,只是对它其中一些小的开发技巧做一些记录,希望以后在项目开发中能够实践下. 数据层封装 模块只对外暴露mod ...

  6. 淘宝UWP桌面版已经发布

    目前正在等待应用商店的检测,很快会可以下载. 谢谢各位园主针对淘宝UWP 桌面版(又叫PC版,HD版等等)给予的feedback,在这里统一回复一下,就不一一感谢了. 有一件事需要说明一下,请看下图: ...

  7. WebAdaptor Object reference not set to an instance of an object.

    C:\inetpub\wwwroot\arcgis目录下webAdaptor.config文件内容被清空,从别的地方拷贝一份即可. <?xml version="1.0" e ...

  8. java source not found

    今天的挑战是,为什么与源码明明放在本机,调试的时候却说source not found呢? 这个是因为,我重新建立了debug,然后没有选择对应的项目. 另外一个问题是,如果给底层的jar附上源码呢?

  9. Java连接Oracle数据库开发银行管理系统【三、实现篇】

    说明:里面的主要代码都加的有注释部分,所以代码显得很长,如果有错误的地方,谢谢指出. 注意需要导入数据库jar包 ------------------------------------------- ...

  10. 掌握js模板引擎

    最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...