Question

我希望div2的高度为div1的100％，即使向下滚动到最底部（不仅仅是100px）。这只能用CSS吗？

<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%;
}

这意味着div2在高度小于300px时填充整个容器，但如果容器溢出滚动条，仍然可以展开。

修改

好的，所以这似乎不合适。在这一点上，我将倾向于一些情境选择：

如果您知道div2或p中只有一个（比方说我们将它放在div3中）将超过300px的高度，那么您可以设置div1的背景以匹配相反的div。这意味着较小div下方的任何空白区域将具有相同的背景，对用户显示相同。

如果div2和div3都有固定的宽度，那么你可以清除两个背景，只需在容器div上放置一个背景图像。（这显然是一个垂直重复的1px条带，颜色从中间向下分开。）

如果您不支持旧浏览器，您可以使用CSS3灵活的盒子模型，据我所知它是为了扩展以填充容器内的所有空间。

您可以使用display: table属性作为表格样式的某种“hackish”方法。请注意，css表似乎不允许固定高度，它们将溢出以显示没有滚动条的所有内容，因此您需要将其放置在外部容器中，设置为内联块，固定宽度和适当的溢出值。

Answer 2

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

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

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

这样，div2将在div1内滚动，即使内容超过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部分......

即..

<强> 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

<强> Working jsFiddle Demo

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;
}

Answer 5

#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％

检查它的工作

如何在垂直可滚动div中将div缩放到100％高度？

5 个答案:

HTML

CSS