【问题标题】:Strange Blank space appearing at right side of the web page网页右侧出现奇怪的空白
【发布时间】:2015-06-14 10:34:44
【问题描述】:

我正在尝试构建一个在宽屏幕和小屏幕显示器中都应该显示相同的网页。我试图让它保持流畅,但与此同时,网页右侧出现了奇怪的空白区域。 奇怪的是空白区域在视口之外,但它使水平屏幕栏出现,并且一旦滚动到最右侧,就可以看到空白区域。 代码可以看这里http://jsfiddle.net/FW98q/

我的直觉是问题出在:

 #Navigation_Container {

    background: #3399cc;
    height: 50px;
    //width: 960px;
    //margin: 0 auto;

}

非常感谢您的帮助。

还有关于如何设置网页样式以使其在屏幕上保持一致的任何提示。也欢迎对设计发表评论..:)

【问题讨论】:

  • // 不适用于 CSS cmets。使用/* ... */
  • 我发现了你的问题 :) 请看下面我的回答

标签: html css layout fluid-layout web-testing


【解决方案1】:

我发现了问题......它在页脚中的类“.notice”中......如果你删除

position:absolute;

它工作得很好。 :) 一探究竟! Fiddle

我在 Firefox 中使用了元素检查器,发现它是唯一超出页面的元素。

另外,如果您需要将其绝对放置在底部,请确保也像这样放置左侧位置

position: absolute;
bottom: 0px;
left:0px;

这是一个添加了 left:0px 的示例

FIDDLE

【讨论】:

    【解决方案2】:
    #page_container, #Header {
        width: 960px;
    }
    

    如果您希望这两个元素的宽度相同,请确保这两个元素的宽度与其他元素相同。

    【讨论】:

      【解决方案3】:

      // 在 CSS 中不起作用,并且您没有关闭您的 div 之一。我认为这是内容之一。为什么你有 3 个不同的页脚 div?您的标记太复杂了,您可以将所有这三个结合起来并获得相同的效果。

      把它从导航容器中取出来修复空白,但你至少在另一个地方做了。

      【讨论】:

      • 我正在使用 3 个页脚 div 来实现流畅的效果,是否可以改进?
      【解决方案4】:

      添加到你的 CSS

      body{margin:0;}

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2021-02-26
        • 1970-01-01
        • 2023-03-26
        • 2018-03-19
        • 2013-01-11
        • 1970-01-01
        相关资源
        最近更新 更多