Question

相关问题不包含有用的答案。

我正在尝试为宽度为2000像素的网站创建一个标题栏（宽度足以覆盖大多数大屏幕），但是它居中，但我也不想要父容器div（这是位于左侧50％）导致浏览器水平溢出。

我不能只是在html或body标签上“溢出隐藏”，因为我没有声明特定的宽度（并且声明100％不会隐藏溢出）。

Overflow depiction

我的代码如下：

<body>
    <div id="navbgout">
        <div id="navbg"></div>
    </div>

#navbgout {
    width:2000px;
    height:60px;
    position:relative;
    left:50%;
}

#navbg {
    width:2000px;
    height:80px;
    position:relative;
    left:-50%;
    background-image:url("images/header_bg.png");
}

我已经尝试在它周围放置另一个父容器以提供溢出：隐藏，但没有任何效果。如果我将该父级设置为100％宽度，则不会屏蔽。如果我将其设置为固定值（以像素为单位），则不会反射大小。

这尤其令人烦恼，因为iPad的移动版Safari会将此“溢出”宽度读作真实宽度，并将页面缩小到更远的位置以便考虑它。

Answer 1

您不需要将宽度声明为2000px以满足屏幕尺寸。如果将宽度设置为100％，则它将始终调整为视口的宽度。

理想情况下，您应将宽度设置为100％，然后添加一个容器类，例如max-width: 1200px;和margin: 0 auto;这将使导航栏始终为视口的宽度，但也允许内容在屏幕上居中。

如果没有水平滚动，HTML内容比浏览器更宽？

1 个答案: