Question

我有一个明显容易的问题：

<div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

我在容器内有3个div：A和B有固定的高度。 C必须具有可伸展的高度，它随容器高度一起延伸。如果C里面的内容太大，我想让C滚动，但要把A和B放在同一个地方。

代码：http://jsfiddle.net/V2c9G/

我无法做到。

我试过了：

<div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="xxx" style="overflow-y:scroll">
       <div class="c"></div>
    </div>
</div>

没有成功。容器div应该在浏览器中调整大小。

一个复杂的例子是http://www.sencha.com/examples/#overview（我说的是布局，让浏览器更小，你会看到卷轴在标题保持固定的情况下出现）但它不是解决方案，因为它使用JS来重新计算高度。

有什么想法吗？

Answer 1

我想你可能正在寻找类似的东西：http://jsfiddle.net/QsLFt/。但是，我不知道如何摆脱隐藏滚动条的div，最简单的解决方案可能是设置一个固定的宽度？

Answer 2

编辑3：

这是我推荐的解决方案，它使用下面编辑2中的CSS作为后备，但使用JavaScript来适当地调整div的大小和窗口大小的变化。如果客户端禁用了JavaScript，那么CSS解决方案提供了一个不错的起点，并且JavaScript确实不应该影响页面的性能，因此我认为没有理由不使用JavaScript来完善您想要看到的内容。一个工作小提琴can be seen here。此外，这是适当的JavaScript代码：

var resizeDiv = function(){
    document.getElementById('c').style.height = getWindowHeight() - 64 + 'px';
};

//Framework code
var getWindowHeight = function(){
    if (window.innerHeight) {
        return window.innerHeight;
    }
    if (document.body && document.body.offsetHeight) {
        return document.body.offsetHeight;
    }
    if (document.compatMode=='CSS1Compat' &&
        document.documentElement &&
        document.documentElement.offsetHeight ) {
        return document.documentElement.offsetHeight;
    }

    return 740;//provide a default height as a fallback
};

//resize on pageload
window.onresize = resizeDiv;
setTimeout(resizeDiv);

我认为您需要调整第三个div上的绝对高度以占用剩余空间（绝对或以百分比表示），将溢出设置为隐藏在父div上，并将内容放在第三个内部div中确定是否显示滚动条。 Here's an updated fiddle using the absolute height method

修改

从你的“想象容器是浏览器”评论（这对我来说意味着滚动条应该在容器上），你真正需要做的就是将溢出设置为'滚动'并在第三个div中设置高度'自动'。 Here's an updated fiddle for that

编辑＃2：

根据您对此问题的评论，听起来您需要采用百分比方法。最简单的是make the height of a, b, and c a percentage（我必须调整边距以使其适合所有缩放）。不幸的是，使用这种方法，顶部组件将不会被修复，听起来你可能会在那里显示看起来很时髦的静态内容。因此，另一种选择是为浏览器窗口选择最小支持的大小，并调整第三个元素的百分比，使其恰好适合。 Here's a fiddle for that。但是，缺点是页面底部会有更多的空白区域，窗口的高度越大，并且在一定高度以下就会有2个滚动条。要在顶部使用固定大小的div正确地执行此操作，您需要向window.resize方法添加一个事件侦听器，并根据窗口的新大小适当地调整第三个div。

注意：我希望W3C能够批准高度，宽度和其他尺寸属性的百分比加上像素！

Answer 3

您需要在overflow-y:scroll

中应用.container

见这个，

http://jsfiddle.net/v4ZtN/

编辑（评论后）：

的CSS：

.container{
    background-color: red;
    width: 90%;
    margin: 0 auto; 
    height:220px;
}

.a{
   background-color: yellow;
   height: 30px;  
   margin: 2px;    
}

.b{
   background-color: blue;
   height: 30px;
   margin: 2px;    
}

.c{
   background-color: green;
   overflow-y: scroll;    
   height:inherit;
}

HTML：

<div class="container">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"><img src="http://www.boingboing.net/images/_documents_anemone_images_anemone850-1.jpg" alt=""/></div>
</div>

编辑：2（评论后）

使用此更改.c样式。

.c{
       background-color: green;
       overflow-y: scroll;    
       height:100%;
    }

检查这个小提琴： http://jsfiddle.net/XM4gH/6/

Answer 4

div只在你输入一些数据时显示滚动，这是结果; jsfiddle

Answer 5

根据你的jsFiddle上的内容，我认为你可以简单地将它添加到你的.container类的样式声明中：

    overflow:hidden;

您必须实际向.c div添加内容才能看到任何滚动。

Answer 6

这个答案是否符合您的要求？ enter link description here

.container{
    background-color: red;
    width: 90%;
    margin: 0 auto;

    height: 315px;
}
.a{
   background-color: yellow;
   height: 30px;  
   margin: 2px;    
width: 90%;
}


.b{
   background-color: blue;
   height: 30px; 
   margin: 2px;    
width: 90%;
}

.c{
   background-color: green;
   height: 250px; 
   margin: 2px; 
width: 90%;    
   overflow-y: scroll;    
}

Answer 7

根据问题很难准确说出你要做什么，但if this is the desired result，这些是我在你的代码中发现的问题：

您需要在红色框上隐藏溢出，因此绿色框不会延伸到容器
在绿色框中，如果有足够的数据要扩展，则需要滚动条。这是有效的，但你专门设置的高度（250px）足以延伸出容器。你想要一个特定的高度，数字是容器中剩余的数量。我得到132px。然后应用溢出滚动，超出此高度的任何内容都将可滚动。

Answer 8

高度布局的替代解决方案可在以下文章中找到：

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

y轴上的溢出滚动，具有固定高度

8 个答案: