CSS侧边栏宽度不动(更改页面宽度时),内容区宽度自适应

一个页面,左栏是内容栏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>

 

时间: 2024-10-13 13:37:06

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

页面打开时,怎样改变div的宽度?

问题描述 ;(function($) { var $jGrid = function(o) { ops = $.extend({ wrapper: 'wrapper', left: 'left_column' }, o); function loadState() { var _width = '1200px'; resize(_width); } function resize(v) { var $wrapper = $('#' + ops.wrapper); $wrapper.animate

dw括号里面的宽度-css宽度问题,明明没有规定div的宽度,但是在DW里面显示是有宽度的

问题描述 css宽度问题,明明没有规定div的宽度,但是在DW里面显示是有宽度的 有时候写代码,明明没有规定div的宽度,但是在DW里面显示是有宽度的,如图,浏览器测试一切正常,宽度显示也是100%,但是还是想知道为什么在DW里面就会有括号显示其他宽度.有时候明明规定了宽度大小,括号里面也会显示另一个宽度,有大神知道原因么? 解决方案 你那不是引了一个class吗 解决方案二: 网页是有默认宽度的!!!!!!

android-slidingmenu侧边栏里面的三个页面切换时,又要重新加载,这怎么改呢?

问题描述 slidingmenu侧边栏里面的三个页面切换时,又要重新加载,这怎么改呢? 如题,slidingmenu切换菜单如何保留原本的其它两个页面的形态 解决方案 http://tieba.baidu.com/p/3243093318

Div+CSS布局入门教程(一) -- 页面布局与规划

css|规划|教程|入门教程|页面 一.页面布局与规划 好久没有认真写点东西了,想起最近这些时间经常有朋友问到我有关于DIV+CSS布局的问题,其实归根结底还是由于没有入门造成的.那么接下来的这篇文章就带领大家入门吧... 在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第

asp.net1.1中动态更改页面标题

asp.net|动态|页面 asp.net1.1由于没有masterpage功能,因此动态更改页面标题显得有些困难.今天在网上找到一个简单的方法,与大家分享. 通常情况下,页面的标题应该是这样的:<title>Page Title</title>我们做一些修改:<title runat="server" id="PageTitle"></title>,这就把title变成了一个服务器控件. 接下来,我们在该页面的cs中

jQuery实现页面滚动时动态加载内容的方法

 这篇文章主要介绍了jQuery实现页面滚动时动态加载内容的方法,实例分析了jQuery实现动态加载页面的技巧,非常具有实用价值,需要的朋友可以参考下     本文实例讲述了jQuery实现页面滚动时动态加载内容的方法.分享给大家供大家参考.具体分析如下: 很多网站,比如twitter,京东商城首页,会在页面滚动到一定的位置时才动态加载页面内容,这样可以加快页面打开的速度,也可以节约带宽,下面的JS代码就可以帮你做到. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

js页面滚动时层智能浮动定位实现

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-

js或css如何控制打印的页面,每页都有页眉页脚?求实例

问题描述 js或css如何控制打印的页面,每页都有页眉页脚?求实例 现在有一个需要打印的页面,要求打印时无论有几页,每页都要有相同的页眉页脚 解决方案 http://www.codefans.net/jscss/code/4193.shtml 解决方案二: css page-break-after:always; CSS控制打印区域

《HTML 5与CSS 3权威指南(第3版·下册)》——第20章 使用选择器在页面中插入内容

第20章 使用选择器在页面中插入内容 在19.3.1节中介绍CSS中的伪元素时,我们曾经介绍过,在CSS中可以使用before伪元素选择器与after伪元素选择器在页面中的元素的前面或后面插入内容,而插入的内容是用content属性来定义的.确切地说,before伪元素选择器与after伪元素选择器是在CSS 2.0中添加的,但是从CSS 2.1开始,一直到CSS 3中,都不断地在针对这两个选择器进行改良和扩展,这使得before伪元素选择器与after伪元素选择器的作用越来越强大,因此本章将特