当css属性width设为100%时

平常在写页面html代码时,经常会使用到width:100%来使控件宽度为父控件的内容宽度。但如果父控件为body,而且没有明确设置body的宽度,那么就会出现以下的情况了。

  代码:



1 <body>
2  <div style="background:#888;width:100%;height:200px">
3     <div style="width:1000px;height:100px;margin:0 auto;border:solid 1px red"></div>
4  </div>
5 </body>

浏览器最大化时:

浏览器宽度调到出现水平滚动条时:

使用水平滚动条,浏览右边部分时:

结果右边没有灰色背景。

 

分析:在没有明确设定body的宽度时,body的宽度就是浏览器可显示区域的宽度,上面的例子中可显示区域的宽度明显小于1000px,也就是说body的宽度远远小于1000px。所以body下的控件宽度被设为100%时,也只能是等于或小于浏览器可显示的宽度。

 

解决方法

1.body设定明确的宽度。

2.如果body不能设定明确的宽度。如主内容居中,两边留白处宽度自动,可以在主内容的中设定相同的背景。(注意:对于有边框的情况,因主内容的
父控件已经设定背景和边框,而主内容也需要设定背景和边框,那么它们重叠的地方会出现边框加粗的情况,这时把有边框的图片作为背景就能达到所要的效果)。

时间: 2024-09-18 07:30:06

当css属性width设为100%时的相关文章

html-关于CSS中的属性width

问题描述 关于CSS中的属性width 为什么在CSS中定义的width,用FSCapture工具测量时,却发现不吻和,为什么会这样啊 解决方案 看下margin padding等,用IE F12或者Chrome带的开发工具等具体看下. 解决方案二: width属性仅为内容区宽度,不包括padding.border.margin:......答案就在这里:CSS width属性 解决方案三: 你测量这个干什么呀????????? 解决方案四: 这种情况应该是浏览器设置了缩放,你检查一下浏览器设置

CSS样式----图文详解(二):css属性

主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性:position.float.overflow.z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 CSS的单位: html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中不一样.CSS中的单位是必须要写的,因为它没有默认单位. 绝对单位:1 in=2.54cm=25.4mm=72pt=6pc. 各种单位的含义:in:英寸Inches (1 英寸 = 2.54 厘米)cm:厘

css模版教程全面自定义模板必备之css属性知识

核心提示:css模版教程,自定义模板必备之css属性知识. 该表只列出常用的CSS属性,及简要介绍其主要功能,若要了解各所有属性和具体的用法,请参考相关书籍 属 性 名 称 属性功能及其取值 用 法 说 明 与 范 例 颜色与背景类 color 设置文字颜色#rgb#rrggbbrgb(255,255,255)rgb(100%,100%,100%) H1{color:red}H1{color:#f00}H1{color:#ff0000}H1{color:rgb(255,0,0)}H1{color

目前比较全的CSS reset重设方法总结

 在当今网页设计/开发实践中,使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键.在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则,并且呈现相同的视觉效果(没有兼容性问题).但是,我们并没有生活在这个完美的世界,现实中发生的失窃却总是恰恰相反,很多CSS样式在不同的浏览器中有着不同的解释和呈现. 当今流行的浏览器(如:Firefox.Opera.Internet Explorer.Chrome.Safari等等)中,有一些都是以自己的方式去理

CSS的未来:一些试验性CSS属性

尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很"主流"的属性,如border-radius. box-shadow或者transform等.它们有良好的文档.很好的测试并且最常用到,所以如果你最近在设计网站,你很难能脱离它们. 但是,隐藏在浏览器的大宝库中是一些高级的.被严重低估的属性,但是它们并没有得到太多的关注.或许它们中的一些应该这样(被无视),但是其它的属 性应该得到更多的认可.最伟大的财富隐藏在Webkit的下面,而且在iPhon

jQuery修改操作css属性实现方法

css()方法在使用上具有多样性,我们先来了解css()方法基本知识. css() 方法设置或返回被选元素的一个或多个样式属性. 返回 CSS 属性 如需返回指定的 CSS 属性的值,请使用如下语法: css("propertyname");下面的例子将返回首个匹配元素的 background-color 值: 实例 $("p").css("background-color"); 设置 CSS 属性 如需设置指定的 CSS 属性,请使用如下语法:

5个最常用的经典css属性教程

下面介绍我们在编写网站CSS样式时,最常用的几个CSS属性,掌握它们是必须的! 1.CSS Clip Clip属性就像一个面罩.它允许你在掩盖矩形元素的内容.要剪辑一个元素:你必须指定position为absolute.然后,指定相对于元素的top,right,bottom,和left的值.图像剪辑实例(演示) 下面的示例将演示如何使用clip属性掩盖图片.首先,指定<div>元素position:relative.然后,指定<img>元素position:absolute和相应的

CSS设计网页小技巧:100%的高度

在前端人员之间有一个普遍存在的问题,如何让一个div的高度自动延伸到浏览窗口100%的高度.有一些不同的方法可以实现,但是,我想出了一个我个人比较喜欢的方法.今天,我将于你分享一下. 我对你是不了解的,但我试图弄明白如何让我的布局垂直拉伸到页面的100%高度,这样一个令我沮丧的问题.我想让div结构自动延伸,但是它就是不能自动延伸,现在,为什么他不能这样那?今天我将与你一起分享这个解决方法.比方说你有如下html代码文档 <!DOCTYPE html PUBLIC "-//W3C//DTD

CSS属性中Display与Visibility的不同

css 大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的.visibility属性用来确定元素是显示还是隐藏,这用visibility="visible|hidden"来表示,visible表示显示,hidden表示隐藏.当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置.例: <script language="JavaScript&