zoukankan      html  css  js  c++  java
  • 当css属性width设为100%时

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

      代码:

    1 <body>
    2 <div style="background:#888;100%;height:200px">
    3 <div style="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不能设定明确的宽度。如主内容居中,两边留白处宽度自动,可以在主内容的中设定相同的背景。(注意:对于有边框的情况,因主内容的父控件已经设定背景和边框,而主内容也需要设定背景和边框,那么它们重叠的地方会出现边框加粗的情况,这时把有边框的图片作为背景就能达到所要的效果)。



      

    欢迎添加我的公众号一起深入探讨技术手艺人的那些事!

    如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!
      

  • 相关阅读:
    Java中如何更换jar包中的.class文件并重新打包
    IIS环境配置和项目部署
    C#中Invoke与BeginInvoke区别
    Windows编程 网络编程基础
    Windows编程 网络编程常见结构体
    什么是OpenGL中的深度、深度缓存、深度测试
    三维场景的渲染优化
    矢量数据转换成栅格数据
    vs2010 c# 配置项问题
    宝宝小时候竟然是近视?
  • 原文地址:https://www.cnblogs.com/fsjohnhuang/p/2242381.html
Copyright © 2011-2022 走看看