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

我有两个造型问题。你会找到答案的。请注意，我没有使用任何媒体查询

第1期：

当重新调整浏览器的大小时，与水平滚动（左或右）时的页眉不同，我的页脚似乎将自己包裹在内容周围，并在右侧留下一个巨大的间隙

例如，请将浏览器重新调整为624px的宽度，然后尝试向右滚动。。您将在页脚右侧看到此间隙

我已经将页脚宽度设置为100%，但它本身是圆形的。可能是因为

overflow: hidden; 

财产

你知道为什么会这样吗

我想要的结果应该是页脚从浏览器的一端显示到另一端

第二期：

---

这同样与我的浏览器大小有关。重新调整浏览器大小后，标题中浮动的导航栏似乎会跳转/移动到下一行。如图所示，我尝试了几种方法，但没有成功。

宽度：100%将根据其父元素的维度调整元素大小，不幸的是，将子元素调整为比容器大的特定维度不会自动将容器调整为相同的维度

基本上，您的设置如下：

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

页脚的大小取决于主体的尺寸，默认情况下，主体的尺寸是视口的宽度。因此，这就是为什么页脚受到限制，而不是调整到

.maindiv

的大小。有三种快速解决方案

将页脚大小调整为与

.maindiv

相同的宽度，即

宽度：1280px

将

float:left

应用于车身。这是一个强制容器元素（即主体）包装到其子元素维度的技巧。这将导致主体自动采用与

.maindiv

相同的宽度。但是，这样做可能会产生一些意想不到的副作用，因为浮动可能会导致布局异常

或者，您可以将页脚移动到

.maindiv

中，这样它会自动将自身大小调整到正确的尺寸

关于你的另一个问题，弗兰克·普洛斯特（Frank Provost）对此的评论是正确的，所以按照他的建议应该可以解决这个问题

更新 正如Frank提到的，增加你的

标题

最小宽度

直到问题消失才是解决办法，你可以通过反复试验或测量来实现这一点。为了让标题停止错误行为，您需要

minwidth

大约

minwidth:770px。基本上，设置最小宽度将防止内部子项向下环绕到下一行，但这仅在最小宽度等于或大于子项占用的总水平宽度时才起作用

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

乍一看，我可以说，第二个问题是由于你的标题的内容-目前似乎没有显示标志，但它占用空间。在~700 px以下的gowing上，您的徽标位于第一行，导航栏位于第二行-只需增加标题的最小宽度即可解决@Frank P。。你的权利关于标志，但我需要的标志是那么广泛。。。我已经更改了标题的最小宽度。。我增加了，但结果相同。。我还尝试将标题添加到主分区中，但仍然没有成功。。请参见此处发生的情况的屏幕截图。。谢谢你，佩伯。。。建议3似乎最适合我。。我已经实现了。。看这里。。。现在我需要解决我的第一个问题。。任何想法都是弗兰克P的建议，但如上所述，仍然面临同样的问题。。。i、 e.@ANM~我已经更新了我的答案，提供了更多的细节，应该会让你明白的。另外，请注意，为了向某人发送评论，您必须使用他们的确切用户名。所以不能确定Frank Provost是否会看到您在上面的评论，因为他的用户名是Frank Provost。只需在评论的开头键入@F，就可以自动完成可用用户名的选择。我只想提到的是，在尝试查找
minwidth
或任何其他尝试和错误CSS时，熟悉浏览器的web检查器是绝对必要的，您可以在其中进行实时更新实时显示样式，并观看屏幕上的东西反弹。不知道每个浏览器有多灵活，但使用Firefox，您可以轻松创建一个最小宽度规则，单击该值并按住向上箭头，直到找到所需的值。@billynoah:谢谢您跟进Frank Provost的建议。。。我使用firefox inspector将最小宽度更改为770px，一切顺利。。因为导航条无法向下缠绕到下一行。。