5

我有一个明显简单的问题是：

<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 重新计算高度。

任何的想法？

4

7 回答 7

1

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

于 2012-04-04T20:08:30.203 回答
1

编辑3：

这是我推荐的解决方案，它使用下面编辑 2 中的 CSS 作为后备，但使用 JavaScript 在加载时和窗口大小发生变化时适当调整 div 的大小。如果客户端禁用了 JavaScript，CSS 解决方案提供了一个不错的起点，并且 JavaScript 确实不应该影响页面的性能，所以我认为没有理由不使用 JavaScript 来完善您想要看到的内容。在这里可以看到一个工作小提琴。此外，这里是适当的 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 中的内容确定是否是否显示滚动条。 这是使用绝对高度方法的更新小提琴。

编辑：

从您的“想象容器是浏览器”评论（对我来说，这意味着滚动条应该在容器上），您真正需要做的就是将溢出设置为“滚动”，将第三个 div 中的高度设置为“自动” '。 这是一个更新的小提琴。

编辑#2：

根据您对这个问题的评论，听起来您需要使用百分比方法。最直接的方法是设置a、b 和 ca 的高度百分比（我必须调整边距以使其适合所有缩放）。不幸的是，使用这种方法，顶部组件不会被修复，听起来您可能会在那里显示看起来很时髦的静态内容。因此，另一种选择是为您的浏览器窗口选择支持的最小尺寸并调整第三个元素的百分比以使其适合。 这是一个小提琴. 但是，不利的一面是，窗口的高度越大，页面底部的空白区域就越多，并且在某个高度以下会有 2 个滚动条。要真正使用顶部固定大小的 div 正确执行此操作，您需要向 window.resize 方法添加一个事件侦听器，并在发生这种情况时根据窗口的新大小适当调整第三个 div 的大小。

注意：在这种情况下，我希望 W3C 批准百分比加上像素的高度、宽度和其他尺寸属性！

于 2012-04-04T20:14:06.830 回答
1

你需要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/

于 2012-04-04T20:18:52.510 回答
0

div 仅在您将一些数据放入其中时才显示滚动，这是结果； jsfiddle

于 2012-04-04T20:09:35.490 回答
0

根据您的 jsFiddle 目前的情况，我认为您可以简单地将其添加到 .container 类的样式声明中：

    overflow:hidden;

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

于 2012-04-04T20:12:11.650 回答
0

这个分析器是否符合您的要求？在此处输入链接描述

.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;    
}
​
于 2012-04-04T20:22:13.300 回答
0

很难根据问题准确说出您要做什么，但如果这是所需的结果，那么这些是我在您的代码中发现的问题：

  1. 您需要在红色框上隐藏溢出，因此绿色框不会超出容器
  2. 在绿色框中，如果有足够的数据可以扩展，则需要一个滚动条。这是可行的，但是您专门设置的高度（250px）足以延伸出容器。你想要一个特定的高度，这个数字是容器中剩余的任何东西。我得到了 132 像素。然后应用溢出滚动，超出此高度的任何内容都将是可滚动的。
于 2012-04-04T20:32:54.310 回答