【问题标题】:Header won't stretch to 100% when viewport resized, but footer will?调整视口大小时,页眉不会拉伸到 100%,但页脚会?
【发布时间】:2011-10-31 10:43:39
【问题描述】:

我在一个小网站上工作,我一直在寻找答案,但无济于事。

我的页眉和页脚都设置为 width:100%,以及它们周围的包装 div 和正文。

我的页眉没有拉伸到 100%,当我必须水平滚动时更糟,但我的页脚正确地填充了宽度。它们的风格几乎相同——我想不通。

这里是测试地点:

http://www.maxsitedesign.com/joncollins

任何帮助将不胜感激。在这一点上,我可能已经添加了无关的样式以尝试修复它。

【问题讨论】:

  • -1 表示“此时我可能已经添加了无关的样式以尝试修复它”。期望人们回答关于不断变化的代码的问题是不现实的。
  • +1 以补偿 Andrew 的奇数 -1。他所做的只是试图找出问题所在。这并不意味着它是“一段不断变化的代码”。此外,关于 SO 的大多数问题都是针对进行中的项目,这些项目本质上是“进行中”,但代码会发生变化。

标签: css header width viewport


【解决方案1】:

删除以下规则修复它。

.inside {
  padding: 10px;
}

style.css 第 60 行

基本上,您正在尝试将一条规则应用于仅适用于 100% 宽度容器的主要内容文本。 100% 仅适用于元素的实际宽度,而不适用于最终宽度。因此,您的容器是 100% + 20px(每边 10px)。

编辑:

再次查看该站点,现在看来问题出在#spray 和#bottom-wrapper 上。您应该从#spray 中删除width:1300px,从#bottom-wrapper 中删除min-width:1300px。这些像素大小与您的 % 大小冲突。

【讨论】:

  • 嗨@Joseph,非常感谢您的帮助-不幸的是,我已经删除了该样式,但标题的右上角仍然有一点空隙-大约是滚动条大小的两倍。除了我上面提到的关于页脚正常工作的内容之外,我不会如此困惑。继续排查问题...
  • @Max 我又看了一遍代码,我可能发现了问题。请查看我的编辑。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-04-03
  • 2014-11-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多