1

所以，我已经被这个问题困扰了一段时间，我似乎无法找到解决方案。

我正在尝试制作一个由（目前）4个不同内容区域组成的布局，如下所示： 基本布局

我正在尝试做的事情

我正在尝试做以下事情：

简单解释：Content应该是页面上唯一可滚动的东西，footer如果内容适合页面，则在其后面，否则固定在底部。

详细解释：

  • 修复banner并mainMenu使其在页面滚动时永远不会移动。
  • 使用页面进行content滚动，以便：
    • 如果content(and footer) 适合页面，则不显示滚动。
    • 如果需要滚动，content则位于banner（未显示）的后面并且不再出现在其上方。
    • 如果需要滚动，content可以滚动到它的底线并且footer在可见区域中。
  • 应该做两footer件事：
    • 如果content并且footer适合页面，footer则应粘贴在页面底部content
    • 否则，footer应固定在底部。

我试过的

Fixingbanner和mainMenu是footer使用position: fixed（并相应地定位）固定的。父母div有overflow: hidden（这似乎不起作用）。

<div id='main'>
  <div id='banner'>banner</div>
  <div id='mainMenu'>mainMenu</div>
  <div id='content'>.. some long content ..</div>
  <div id='footer'>footer</div>
</div>

和

#main {
  width: 960px;
  height: auto;
  margin: 40px auto;
  overflow: hidden;
}
#main #banner {
  width: 960px;
  height: 100px;
  position: fixed;
}
#main #mainMenu {
  width: 230px;
  height: auto;
  display: inline;
  float: left;
  position: fixed;
  top: 140px;
}
#main #content {
  width: 720px;
  height: auto;
  display: inline;
  float: right;
  margin-top: 100px;
}
#main #footer {
  width: 960px;
  height: auto;
  clear: both;
  position: fixed;
  bottom: 0;
}

问题

content如果页脚适合该区域，则 页脚不会跟随页脚不跟随内容 横幅顶部的内容溢出 内容溢出横幅

我真的更喜欢在 CSS 中（如果可能的话）并尽可能兼容（IE7+，所有其他主要浏览器）。现在真的很令人沮丧..任何帮助将不胜感激。

4

1 回答 1

1

我无法想象仅使用css就可以解决您的问题。一旦您将元素设置为固定位置，它们就会脱离流程，因此您的其他元素无法围绕它们进行调整。

但是，我确实通过做两件不同的事情找到了解决方案。对于标题问题，我只是在主横幅上方添加了另一个固定元素并将其设置为背景颜色。这样，内容将在其后面滚动，看起来好像它被隐藏了。对于页脚，我使用 jQuery 设置了一些 javascript 来查看内容是否溢出。如果是，则将页脚的位置设置为固定，否则将位置设置为相对。

您可以在此演示中查看所有内容：http: //jsfiddle.net/mrQGh/4/

要测试 javascript，只需删除文本，直到不再溢出并再次运行它。

于 2012-08-15T05:56:12.157 回答