css – Div与滚动条在div内,位置：固定

我有一个位置的div：固定是我的容器div一些菜单。我设置为顶部：0px，bottom：0px以始终填充视口。在那个div里面我想要有两个其他的div，其中的较低的一个包含很多行，并有溢出：auto。我会期望它将被包含在容器div中，但是如果有太多的行，它只是在固定的div之外扩展。以下是我的代码和屏幕截图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MyPlan</title>
    <Meta name="X-UA-COMPATIBLE" value="IE=8" />
    <style type="text/css">
        #outerfixed { position:fixed;  width:200px;  background-color:blue; padding:5px; top:0px; bottom:30px;}
        #innerstatic1 { width:100%; background-color:yellow; height:100px;}
        #innerstatic2 { overflow:auto; background-color:red; width:100%;}
    </style>
</head>
<body>
    <div id="outerfixed">
        <h3>OUTERFIXED</h3>
        <div id="innerstatic1">
            <h3>INNERSTATIC1</h3>
        </div>
        <div id="innerstatic2">
            <h3>INNERSTATIC2</h3>
            line<br />
                        ...lots of lines
            line<br />
        </div>
    </div>
</body>
</html>

有没有办法让我这样做？再次，我想要#innerstatic2被正确地包含在#outerfixed中，如果它比#outerfixed里面的空间大得多，就得到滚动条。

我知道还有一些可能的方法来修复#innerstatic2，但是如果可能，我真的希望它在#outerfixed内部的流程中，所以如果我在某个地方移动#outerfixed，内部元素会随之而来。

编辑：我知道我可以在#outerfixed上设置overflow：auto，并且在整个事情上得到一个滚动条，但是我特别想要一个滚动条，就在#innerstatic2上，它是一个网格，我只想滚动网格。

任何人？可能？

解决方法

这是一个两步解决方案，但它有一些成本：

>添加overflow-y：scroll;到#innerstatic2的css。
>为#innerstatic2定义一个高度(或最大高度)，否则它不会溢出，它只会不断增加其高度(div的默认值为height：auto)。

有时编辑，因为我不能停止自己。

我已经在jsbin上发布了一个演示，以显示一个这样的jQuery实现，这将为你计算一个高度(它不是一般化的，所以它只适用于你当前的html)。

(function($) {
  $.fn.innerstaticHeight = function() {
        var heightOfOuterfixed = $('#outerfixed').height(),offset = $('#innerstatic2').offset(),topOfInnerstatic2 = offset.top,potentialHeight = heightOfOuterfixed - topOfInnerstatic2;

        $('#innerstatic2').css('height',potentialHeight);
  }
})(jQuery);

$(document).ready(
    function() {
        $('#innerstatic2').innerstaticHeight();
    }
);

css – Div与滚动条在div内,位置：固定

解决方法

相关推荐