Question

如果标题有点混乱，我很抱歉，但我不确定如何用一句话来描述我的问题。所以基本上我在整页/屏幕设计上花了几天时间一直在努力。

在我的设计中，我有多个Div包含一些文本，其中一个比正常屏幕分辨率的高度大很多。此外，我不希望网站在浏览器的浏览器旁边有滚动条，而我在Div中有一个太大的滚动（例如在此div中使用 overflow：auto; ）。但是我似乎无法同时获得div和滚动的正确定位。

Here is a CodePen of my situation，我希望红色和蓝色的Div能够像这样定位，但我还希望蓝色div在到达页面底部时停止扩展，如果确实发生则需要滚动。

我发现获得滚动的唯一方法是使用 max-height 或绝对定位。然而，这些解决方案都不可行，因为蓝色div的最大高度对于每个屏幕分辨率是不同的，并且红色div的高度不固定。此外，如果我尝试使用绝对定位，我最终将蓝色div放在红色div上方，因为蓝色div的绝对定位使其保持“流动”（我不能使用 margin-top：“红色div的高度“;解决这个问题，因为红色div的高度不固定。”

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

谢谢，Thomas A

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

Answer 1

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：我来自谷歌寻找类似的答案......无论如何它都可以帮助别人。

Answer 2

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

通过简单地为包装器提供高度来进行滚动 - 例如：

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

希望这会有所帮助

Answer 3

您可以通过将蓝色div设置为position：absolute然后设置top和bottom值来完成此操作。即。

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

Answer 4

你说你的第二个失败选项（使用蓝色div上的绝对定位）无法完成它导致它离开正常流程。好吧，我把那个蓝色div做成绝对而不留下正常流程，把相关父母的红色和蓝色div都包括在内，见http://codepen.io/anon/pen/KEdwG

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

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

另外，如果你查看我的笔的css评论，我会将你的left:25px更改为4%，因为相对父母需要它才能正确使用（除了最好使用％而不是px一般而言。

为了方便起见，我在这里粘贴了笔jquery代码：

$(document).ready(function() {
  max = $(document).height() - $('#bottom-inside-container').offset().top;
  $('#bottom-inside-container').css('max-height',max);
});

整页设计：如何强制Div停止在页面底部展开

4 个答案: