为什么水平滚动条远远超出内容？答案

【问题标题】：Why is horizontal scroll bar going far beyond content?为什么水平滚动条远远超出内容？
【发布时间】：2012-08-29 05:03:47
【问题描述】：

我正在构建一个博客，并且有一个大标题图片，目的是填充屏幕顶部（除非在大于 1500 像素的显示器上）- 但是滚动条远远超出标题内容并显示空白。

在 Ipad 上查看时，它会缩小并显示内容一侧的额外空间。为什么宽度比图片大很多？

这里是网站：http://beautyintheweeds.com/

这里是 HTML 和 CSS：

<?php wp_head(); ?>
</head>

<div id="container" class="group">
<div class="outer"><div class="inner"><img src="http://theshalomimaginative.com/weeds/wp-    content/themes/journalist/images/longtop.jpg"/></div></div>

div.inner img { position: relative; left:-50%; }
div.outer {width: 900px; margin: 0 auto; overflow: visible;}
div.inner {display: inline-block; position:relative; right: -50%;}

此代码用于将标题置于容器之外的中心，我希望它始终填满屏幕顶部，除非监视器太大。任何想法为什么它会在图像之外创建额外的滚动空间？

谢谢。

【问题讨论】：

div 必须在容器内吗？

标签： css image header scroll width

【解决方案1】：

占用空间的是带有class="inner" 的元素。它从其中的图像获取大小，然后您使用相对定位将图像显示在元素的左侧。

如果您想使用该方法使元素居中，请在所有元素周围放置一个 div，该 div 具有 overflow: hidden; 且未设置宽度，以便它使用默认的 width: auto，这将占用所有可用宽度.

【讨论】：

【解决方案2】：

试试这个

#container {
width: 911px;
margin: 0 auto;
position: relative;
padding: 0 0 0 140px;
overflow: hidden;
}

【讨论】：

这是故意的。我希望图像那么长 - 如果我制作的容器那么长，它会在左侧对齐并且不会像现在显示的那样将图像居中。

【解决方案3】：

我会把它们从容器中拉出来。在标记中将 div.outer 移到 div.container 上方，删除 div.outer、div.inner 的所有 css，然后添加 text-align: center;到 div.outer 并完全删除 div.inner。

【讨论】：

【解决方案4】：

http://jsfiddle.net/pWDrD/

你会看到如果你增加小提琴框的宽度然后图像会自动增加宽度而没有任何滚动条。你明白我是怎么做到的吗？让我知道。如果不是我会解释。简单来说，当你想让一张图片达到 100% 的显示器时，你需要将它放入一个宽度为 100% 且边距自动的容器中，而不是固定宽度和完全没有位置的容器。

【讨论】：

我认为他们不希望图像跨越 100% 的宽度。我想他们想知道为什么 div.inner 会占用右边的空间。
我试过了，但图像扭曲或变高时遇到了问题。我想要一个 350 像素的固定高度，但不希望图片变形。
我找不到 div.inner 而且，在这种情况下，图像失真是什么意思？我提供的小提琴中的图像始终是固定高度（300px）并且没有滚动条？
i45.tinypic.com/iljfvk.jpg 这是在 css 中进行一些更改后页面在小分辨率（如 ipod 和 android 设备）上的屏幕截图。它可能不准确，但你可以得到一个想法。图像居中，没有以任何方式扭曲，您看到的底部滚动条不复存在。