html - 如何使垂直可滚动 div 内的 div 缩放到 100% 高度？

Question

我希望 div2 的高度是 div1 的 100%，即使向下滚动到最底部（不仅仅是 100 像素）。仅使用 CSS 是否可行？

http://jsfiddle.net/jPMjF/2/

<div id="div1">
     <div id="div2">
     </div>
     <p>Bunch of text here</p>
</div>

#div1 {
   background-color: #fff;
   border:1px solid #ff0000;
   height: 100px;
   overflow: auto;
   overflow-x: hidden;
   width: 200px;
}

#div1 p {
    display: inline-block;
    width: 50px;
    height: 200px;
}

#div2 {
    display: inline-block;
    background-color: #ccc;
    vertical-align: top;
    width: 100px;
    height: 100%
}

Answer 1

如果 div2 小于 300px，为什么 div1 会超过 300px 的可滚动高度？从您发布的内容来看，我认为您所需要的只是：

#div1 {
   height: 300px;
   overflow-x: hidden;
   overflow-y: auto;
}

#div2 {
    background-color: #ccc;
    min-height: 100%;
}

这意味着当高度小于 300 像素时 div2 会填充整个容器，但如果容器溢出滚动条，它仍然可以扩展。

编辑

好吧，看来这不合适。在这一点上，我会倾向于一些情境选择：

1. 如果您知道 div2 或 p 中只有一个（例如我们将其放在 div3 中）的高度将永远超过 300px，那么您可以设置 div1 的背景以匹配对面的 div。这意味着较小 div 下方的任何空白区域都将具有相同的背景，对用户来说是相同的。
2. 如果 div2 和 div3 都具有固定宽度，那么您可以清除两个背景并在容器 div 上放置背景图像。（这显然是一个垂直重复的 1px 条带，中间有一个颜色分割。）
3. 如果您不适合较旧的浏览器，您可以使用 CSS3 灵活盒模型，据我了解，它旨在扩展以填充容器内的所有空间。
4. 您可以将该display: table属性用作表格样式的一种有点“hackish”的方法。请注意，css 表格似乎不允许固定高度，它们会溢出以显示没有滚动条的所有内容，因此您需要将其放置在设置为 inline-block、固定宽度和适当溢出值的外部容器中。

Answer 2

我想你的意思是：http: //jsfiddle.net/jPMjF/

   #div1 {
       height: 300px
       overflow: auto;
       overflow-x: hidden;
    }

    #div2 {
        background-color: #ccc;
        min-height: 300px;
    }

这样，即使内容超过 div1 的高度，div2 也会在 div1 内滚动（在小提琴上，我给 div2 的高度为 600px）。

Answer 3

我做了一点修改..希望你能理解这一点..

html

<div id="div1">
     <div id="div2">
         Content in div2.
     </div>
    <p id="p3">
        ajs hask jas ashja sjh jasj ashja sbasj hasbk asj ask ashja sba sjh ashj asb sajask ajhb sakjbs ashjb saasj
    </p>
</div>

jQuery

$(document).ready(function(){
  var div3height=$('#div3').height();
    $('#div2').height(div3height);
});

css

    #div1 {
       border:1px solid #ff0000;
       height: 150px;
       overflow: auto;
       overflow-x: hidden;
       width:150px;
    }

    #div2 {
        background-color: #ccc;
        height:100%;
        overflow:auto;
        float:left;
        width:50%;
    }
    #p3 {
        height:auto;
        overflow:auto;
        float:left;
        width:50%;
}

希望对你有帮助..

编辑

如果问题的意思如 Ipd 所述

那么你只需要更改css并留下jquery部分......

IE..

css

#div1 {
       border:1px solid #ff0000;
       height: 150px;
       overflow: auto;
       overflow-x: hidden;
       width:150px;
       background-color: #ccc;
    }

    #div2 {
        height:100%;
        overflow:auto;
        float:left;
        width:50%;
    }
    #p3 {
         background-color:#FFF;
        height:auto;
        overflow:auto;
        float:left;
        width:50%;
}

Answer 4

#div1 {
    background-color: #fff;
   border:1px solid #ff0000;
   height: 100px;
   overflow: auto;
   overflow-x: hidden;
   width:200px;
}

#div1 p { display: inline-block; width: 50px; }

#div2 {
    display: table-cell;
    background-color: #ccc;
    height: auto;
    width: 100px;
    padding-bottom:80%;
    float:left;
}

你的答案检查它的工作 100%

Answer 5

工作 jsFiddle 演示

HTML

<div id="container">
    <div id="sidebar">
        Content in div2.
    </div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, sequi, non mollitia ducimus eaque commodi iure vel quos ipsam hic voluptatem tempore facere quo dolorum magnam incidunt porro quis culpa.</p>
    </div>
</div>

CSS

#container {
   background-color: #fff;
   border: 1px solid #ff0000;
   height: 100px;
   overflow: hidden;
   width: 200px;
    position: relative;
}

#content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: pink;
    width: 100px;
    overflow: auto;
}

#sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background-color: #ccc;
    width: 100px;
}