5

如果标题有点混乱，我很抱歉，但我不知道如何用一句话来描述我的问题。所以基本上我几天以来一直在整页/屏幕设计上苦苦挣扎。

在我的设计中，我有多个包含一些文本的 Div，其中一个比正常屏幕分辨率的高度大得多。此外，我不希望网站在查看者浏览器的一侧有滚动条，我宁愿在 div 中有一个太大的滚动条（例如在这个 div 中使用溢出：自动；）。但是我似乎无法同时获得 div 和滚动的正确定位。

这是我的情况的 CodePen，我希望红色和蓝色的 Div 像这样定位，但我也希望蓝色的 div 在到达页面底部时停止扩展，并在它发生时滚动。

我发现获得滚动的唯一方法是使用max-height或absolute 定位。然而，这些解决方案都不可行，因为每个屏幕分辨率的蓝色 div 的最大高度是不同的，并且红色 div 的高度不是固定的。另外，如果我尝试使用绝对定位，我最终会看到蓝色 div 站在红色 div 上方，因为蓝色 div 的绝对定位使它离开“流”（并且我不能使用margin-top: “height of the red div" ; 解决这个问题，因为红色 div 的高度不固定）。

希望我的解释很清楚，有人能够帮助我。顺便说一句，我宁愿不使用 JS，但如果有必要我会使用它。此外，我欢迎旧版 IE 上没有的解决方案，因为我的观众都没有使用它们。

谢谢，托马斯A

编辑：为了更清楚，我希望它看起来像那样，但蓝色 div 的高度（#bottom-inside-container）是动态的而不是固定的（从 div 的开头到页面底部，无论如何页面大小）

4

4 回答 4

10

3 年后，有了更好的浏览器支持，使用 flexbox 属性很容易。您可以在 CSS 中添加以下内容：

#wrapper {
    display:flex; 
    flex-direction:column;
}
#top-inside-container {
    flex-grow:2;
}
#bottom-inside-container {
    flex-grow:1;
    overflow-x: hidden;
    overflow-y: auto;
}

将 flex-grow:2 设置在容器的顶部，它很小，它会使其增长，直到它显示出它的所有内容。在容器底部设置溢出将隐藏（用于水平滚动）并设置（用于垂直滚动）滚动条，具体取决于它必须显示的内容量。

这是基于您的 codepen 的代码，修改最少：

http://codepen.io/anon/pen/BLKENA

PD：我来自谷歌搜索类似的答案......无论如何它可以帮助某人。

于 2016-09-15T18:16:21.317 回答
1

您可以通过将蓝色 div 设置为 position: absolute 然后设置顶部和底部值来做到这一点。IE

html, body{
    width: 100%; height: 100%; margin: 0; padding: 0;
}
#top-inside-container {
    position: absolute; top: 0; width: 100%; height: 100px; background:rgb(75,0,0);
}
#bottom-inside-container {
    position: absolute; width: 100%; top: 100px; bottom: 0; background:rgb(0,75,200); overflow-y: scroll;
}

它在这里工作： http ://codepen.io/anon/pen/qnwFf

于 2012-09-30T14:53:26.363 回答
1

您的包装器不会滚动，因为它没有高度（或 100%）。然后，应用默认浏览器滚动，但您不能在包装级别滚动。

通过简单地给你的包装器一个高度来滚动工作 - 例如：

#wrapper { 
  position:fixed;
  right:550px;
  left:0;
  background:rgb(200,200,200);
  height: 500px;
  overflow: auto;
}

希望这会有所帮助

于 2012-09-30T13:30:41.223 回答
0

您说您的第二个失败选项（在蓝色 div 上使用绝对定位）无法完成，因为它离开了正常流程。好吧，我通过将红色和蓝色 div 都包含在相对父级中，使蓝色 div 成为绝对的，同时不离开正常流程，请参阅http://codepen.io/anon/pen/KEdwG

但是，它仍然失败..原因是，您将现在的绝对蓝色 div 设置为多少高度？你不能给出答案，我也不能，但是“溢出：滚动”需要知道在什么高度开始滚动。这就是为什么这不能仅使用 CSS 完成的原因。

因此，如果您不介意在您的 中添加两行 jquery document.ready()，请参阅我的笔以这种方式解决它，您可以忽略window.resize()页面的代码，因为我将它放在笔中，这样您就可以垂直拖动 iframe 并查看如何蓝色 div 保持预期的高度。

另外，如果您查看我的笔的 css 注释，我会将您的内容更改left:25px为4%，因为相对父母需要正确处理（除了通常使用 % 比使用 px 更好）。

我在这里粘贴 pen jquery 代码只是为了方便：

$(document).ready(function() {
  max = $(document).height() - $('#bottom-inside-container').offset().top;
  $('#bottom-inside-container').css('max-height',max);
});
于 2012-09-30T15:21:33.663 回答