当css属性width设为100%时
来源:互联网 发布:通用后台管理系统源码 编辑:程序博客网 时间:2024/04/30 00:54
平常在写页面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不能设定明确的宽度。如主内容居中,两边留白处宽度自动,可以在主内容的中设定相同的背景。(注意:对于有边框的情况,因主内容的父控件已经设定背景和边框,而主内容也需要设定背景和边框,那么它们重叠的地方会出现边框加粗的情况,这时把有边框的图片作为背景就能达到所要的效果)。
阅读全文
0 0
- 当css属性width设为100%时
- css属性width默认值width: auto与width: 100%区别
- CSS width属性
- CSS border-width 属性
- CSS min-width 属性
- CSS max-width 属性
- css中border-width 属性
- css width:100%
- CSS width:100%
- CSS: width:100% 和 width:auto
- 关于LinearLayout的width设为match_parent的无效问题解决
- javascript控制css中style.width和style.height属性时单位px的问题
- dataGridView 的columnType设为DataGridViewCheckBoxColumn,当选择其他列进行排序时,DataGridViewCheckBoxColumn列值被还原
- DataGridView当单元格内容为空时重新设回原值
- TensorLayer 当 LSTM 设为 state_is_tuple 时该如何迭代。
- c8051f340当io脚设为数字输入时设置需要注意
- CSS中最大宽度属性max-width和最小宽度属性min-width
- CSS的width:100%和width:auto区别
- ubuntu装cuda8.0用到的材料2
- 重读网峰A8文档---之---Bootloader的加强学习(强化)
- LINK : fatal error LNK1264错误的解决办法
- git 常用命令
- <iOS和Unity交互>之界面跳转
- 当css属性width设为100%时
- 信用社会悄然到来~
- 抽象类定义
- dup等复制文件描述符函数
- getSupportFragmentManager()方法找不到
- ubuntu装cuda8.0用到的材料3
- Python中lambda表达式
- 初级路由第二部分----静态浮动路由
- Oracle删除冗余数据,只保留一条