Question

我有一个位置div：修复了我的容器div，用于某些菜单。我把它设置为顶部：0px，底部：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>

alt text

我有什么方法可以做到这一点吗？同样，我希望#innertatic2正确地包含在#outerfixed中并且如果它比#outerfixed内的空间大，则获取滚动条。

我知道有一些可能通过修复#innerstatic2来解决这个问题，但是如果可能的话，我真的希望它在#outerfixed内部，所以如果我在某处移动#outerfixed，内部元素会来用它。

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

任何？可能的？

Answer 1

这有一个两步解决方案，但它需要付出代价：

将overflow-y: scroll;添加到#innerstatic2。
为height定义max-height（或#innerstatic2），否则不会溢出，它只会不断增加其高度（默认值）对于div是height: auto）。

已编辑

我在jsbin上发布了一个演示来展示这个的jQuery实现，它将为你计算height（它不是通用的，所以它只适用于你当前的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();
    }
);

Answer 2

我通过给予ul和身高100％的绝对位置来解决它

ul {
  overflow-y: scroll;
  position: absolute;
  height: 100%;
}

check out this FIDDLE

Answer 3

overflow-y:scroll;

并为iOS设备添加此功能。它确实使用触摸提供更好的滚动。溢出-y需要滚动！出于安全原因。汽车不会为某些人工作。或者至少那是我所听到的。

-webkit-overflow-scrolling: touch;

Answer 4

你应该为innerstatic2

设置outerfixed和max-height的高度

看到这可能会有所帮助DEMO

Answer 5

容器div必须与overflow：auto属性一起使用。在这种情况下，#outerfixed div

Answer 6

我想的唯一方法是将 innerstatic2 设置为绝对位置（这样你可以使用top和bottom来相对于 outerfixed 来调整它的大小），然后在< em> innerstatic2 创建另一个div来放置文本。然后你给 innerstatic2 “overflow：auto;”指示。这种方法的缺点是，当innerstatic1增长时，innerstatic2不会向下移动，因为它必须绝对位置。如果它需要移动，它必须是“position：relative”，但是你需要为它设置一个固定的高度。所以无论哪种方式，你都必须达成妥协。

一旦所有浏览器都支持更新的CSS3功能，比如计算支持，就会有更好的选择来做到这一点，没有这些缺点。

Answer 7

不理想，但这应该可以让你获得90％

<div style="position:fixed; bottom:1px; left:5em; height: 20em; width:20em; background-color:blue;">
        <div style ="width:15em; background-color: green;">
                Title
        </div>
        <div style ="background-color:yellow; max-height:80%; width:15em; overflow:auto;">
                <div style="height:100em; background-color:red; width:10em;">
                        scroll<br/>
                        scroll<br/>
                        scroll<br/>
                </div>  
        </div>  
</div>

div中带有滚动条的div，位置为：fixed

7 个答案: