导航栏和页脚的奇怪样式问题

Question

我有两个样式问题。你会找到full fiddle here。请注意我没有使用任何媒体查询。

第一期：

在水平滚动（左或右）时，重新调整浏览器大小不同于标题，我的页脚似乎围绕其内容包围并留下一个巨大的间隙到右边

例如，请将浏览器的大小调整为624px的宽度，然后尝试向右滚动..您将看到页脚右侧的这个间隙。

我已经将页脚宽度设置为100％但是它的包装本身是圆的。可能是

overflow: hidden; 

属性？

有关为何发生这种情况的任何想法？

我希望的结果应该是从浏览器的一端出现到另一端的页脚。

第二期：

这又与我的浏览器大小调整有关。在重新调整浏览器大小时，我的导航栏在标题中浮动roght似乎跳转/移动到下一行。我尝试了几件事，但没有运气。

Answer 1

width: 100%会将元素的大小调整为其父级的尺寸，不幸的是，将子级调整为大于容器的特定尺寸，不会自动将容器调整为相同的尺寸。

基本上你的设置就是：

body
  .maindiv (width: 1280px)
  footer   (width: 100%)

页脚的大小与正文的大小相同，默认情况下，该大小将是视口的宽度。所以这就是为什么你的页脚受限制而不是大小为.maindiv的原因。有三种快速解决方案。

1. 将页脚的大小调整为与.maindiv相同的宽度，即width: 1280px
2. 将float: left应用于身体。这是一种迫使容器元件（即主体）包裹到其子元件尺寸的技巧。这会导致身体自动采用与.maindiv相同的宽度。这样做可能会产生一些意想不到的副作用，因为浮动会导致布局奇怪。
3. 或者你可以在.maindiv内移动你的页脚，这样它会自动调整尺寸为正确的尺寸。

关于你的另一个问题，Frank Provost对此有正确的评论，所以按照他的建议应该解决这个问题。

更新

正如弗兰克所说，增加header min-width直到问题消失是解决方案，你可以通过反复试验来做到这一点，或者你可以测量它。为了让您的标题停止行为不端，您需要min-width左右min-width: 770px;。基本上设置最小宽度将阻止内部子项向下包装到下一行，但这仅在最小宽度与子项占用的总水平宽度相同或更大时才有效。

  

注意：如果您在标题中添加额外的项目，则必须重新计算此值。在Mac OSX操作系统（我现在正在使用的操作系统）上执行此操作的快速直观方法是使用区域快照功能。使用 CMD + SHIFT + 4 ，您将获得一个目标光标，您可以在屏幕上绘制测量区域。这允许您测量像素，您实际上不必通过按 ESC 来拍摄屏幕截图。我确信其他操作系统有相同的功能。如果不是，您可以使用浏览器的检查员测量每个孩子，然后对结果求和。