溢出（滚动）-容器高度的100％ [英] overflow (scroll) - 100% container height

问题描述

我正在尝试使浮动div（称为侧边栏）显示容器高度的100％，并在必要时滚动。

i'm trying to have a floated div (call it 'sidebar') display 100% of container height, and scroll if necessary.

如果侧边栏具有

内容是动态的，不可能固定高度。

content is dynamic and fixed heights aren't possible.

我想尽可能避免使用表格，但如果那是唯一的解决方案，则会使用它们。

i'd like to avoid tables if possible, but would use them if that was the only solution.

我不想使用javascript。

i don't want to use javascript.

如果表，主体和单元格的高度均为100％，并且在一个单元格中的height为100： ％并设置了溢出：滚动。此功能在webkit（Safari和Chrome）以及IE中均有效，但在gecko（Fx）中失败-失败表示内容多于容器的div将扩展容器（同样仅在Fx中）。如果将div与display：table / table-row / table-cell一起使用，则在webkit中也可以使用相同的方法，但是在Fx和IE中均失败。如果有帮助，我可以提供一个示例。

this effect can be achieved with tables, if the table, body, and cells are all given 100% height, and in one cell a div with height:100% and overflow:scroll is set. this works in webkit (Safari and Chrome) as well as IE, but fails in gecko (Fx) - 'fails' means that the div with more content than the container will expand the container (again only in Fx). the same idea works in webkit if using divs with display:table/table-row/table-cell, but fails in both Fx and IE. i can provide a sample of this if it'd be helpful.

也可以使用height：100％的iframe来实现此效果，这似乎可以奏效现代浏览器，但如果可能的话，我也想避免不必要的iframe。

this effect could also be achieved using an iframe with height:100%, which seems to work in all modern browsers, but i'd like to avoid unnecessary iframes if possible as well.

我不得不认为，由于可以使用上述 hacks，因此可能使用无表，无框架的CSS，但这超出了我的理解水平。

i have to think that since it's possible using the above 'hacks' it might be possible using table-less, frame-less css, but is beyond my level of understanding.

有什么建议吗？ tyia。

any suggestions? tyia.

推荐答案

以下是实现此目的的CSS样式：

Here's CSS styling to accomplish this:

#container {
    width: 500px;
    border: 3px solid red;
    margin: 0 auto;
    position: relative;
}

#sidebar {
    position: absolute;
    left: 0;
    top: 0;
    width: 150px;
    height: 100%;
    background-color: yellow;
    overflow-y: scroll;
}

#main {
    margin-left: 150px;
}

p, ul {
    padding: 10px;
}

<div id="container">
    <div id="sidebar">
        <ul>
            <li> line 1 </li>
            <li> line 2 </li>
            <li> line 3 </li>
            <li> line 4 </li>
            <li> line 5 </li>
            <li> line 6 </li>
            <li> line 7 </li>
            <li> line 8 </li>
            <li> line 9 </li>
            <li> line 10 </li>
            <li> line 11 </li>
            <li> line 12 </li>
            <li> line 13 </li>
            <li> line 14 </li>
            <li> line 15 </li>
            <li> line 16 </li>
            <li> line 17 </li>
            <li> line 18 </li>
            <li> line 19 </li>
            <li> line 20 </li>
        </ul>
    </div>
    <div id="main">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </p>
    </div>
</div>

实时演示： ： http://jsfiddle.net/TUwej/2/

这篇关于溢出（滚动）-容器高度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！