在div中显示li元素，而height小于另一个div

Question

我有两个id=left和id=right div。 id=left的div包含一些li元素（带有项目符号的列表）并且它向左浮动。 id=right的div包含一些文本和html（任何类型的内容）。 问题是有时左侧div（ id=left ）大于id=right或反之亦然。 我只想显示，例如页面上的10 li ，然后当用户滚动显示页面上的另一个li时， left的高度小于或等于right的高度。

问题的描述性图像：

编辑：我可以从服务器检索1000 lis的列表并使用display：none和滚动display: block 。 我不想从服务器上加载dinamically li秒。

宽度：#left是250px #right是750px 。

Answer 1

正如您在评论中提到的那样#left宽度为250px而#right宽度为750px当您将position: absolute应用于#left容器时，您可以获得该行为。

body, html {
    padding: 0;
    margin: 0;
}
.main {
    position: relative;    /* To contain #left */
}
#left {
    background-color: skyblue;
    overflow: auto;
    position: absolute;
    top: 0;
    bottom: 0;          /* top and bottom values are to stretch the #left inside the parent container */
    width: 250px;
}
#right {
    background-color: tomato;
    width: 750px;
    margin-left: 250px;       /* equal to #left's width */
}

工作小提琴

注意：在上面的小提琴中，我使用br标签来打破这条线。 我只是用于小提琴的目的。

Answer 2

这是JSFiddle

我已经使用jquery来动态地设置加载时的高度。 如果要更改内容，则在加载内容后，如果要使用不同的页面，则需要调用setmenuheight函数。 我不确定，你将如何编写内容代码。

$(document).ready(function(){
    for(var i = 1; i < 100; i++){   
        var menuli = "<li>"+"Menu - " +i+"</li>";
    $("#left ul").append(menuli);
    };

setmenuheight();

});


function setmenuheight(){

      $("#left").height($(".content").height()+"px");

}

Answer 3

你可以用一点点jQuery做这样的事情：

HTML

<div id="left">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 1</a></li>
    ...
  </ul>
</div>
<div id="right">
   lorem ipsum ...
</div>

CSS

#left{
    width: 250px;
    float:left;
    overflow-y: hidden;
}
#right{
    margin-top: 10px;
    width: 750px;
    float: right;
}

jQuery的

var $right = $('#right'), var $left = $('#left');

if($right.height()<$left.height()){
    $left.height($right.height());
}

$(window).on('scroll', function () {
    $('#left').scrollTop($(this).scrollTop());
});

小提琴

仅限CSS： http ： //jsfiddle.net/tomsarduy/88eag6e7/2/
jquery： http ： //jsfiddle.net/tomsarduy/88eag6e7/1/

Answer 4

jQuery的：

$(document).ready(function() {
    $("#left").height( $("#right").height() );  

    $(window).scroll( function(){
        if($(window).scrollTop() >= $('#right').offset().top + $('#right').outerHeight() - window.innerHeight) {

        } else {
            $('.hideme').each( function(i){

                var bottom_of_object = $(this).offset().top + $(this).outerHeight();
                var bottom_of_window = $(window).scrollTop() + $(window).height();

                if( bottom_of_window > bottom_of_object ){

                    $(this).animate({'opacity':1},500);

                }

            });
        }

    });

});

HTML：

<div id="left">
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li>Hello</li>
    <li class="hideme">Fade In</li>
    <li class="hideme">Fade In</li>
    <li class="hideme">Fade In</li>
    <li class="hideme">Fade In</li>
    <li class="hideme">Fade In</li>
    <li class="hideme">Fade In</li>
</div>
<div id="right">
Your text here
</div>

CSS：

#left
{
    height:auto; 
    width: 250px;
    float: left;
    overflow: hidden;
    display: block;
}
#right {
    float: right;
    width: 200px;
}
#left li
{ 
    margin:10px; 
    padding:50px; 
    background-color:lightgreen; 
}
.hideme
{
    opacity:0;
}

在这里查看JS Fiddle： http ： //jsfiddle.net/e5qaD/4000/