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。 我不想从li s的服务器加载dinamically。

宽度：＃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

<强> Working Fiddle

注意：在上面的小提琴中，我使用source='tmp1/test/' dest= 'tmp2/' ls -F ${source} | grep '/' | awk -F'/' '{print$1}' > directories.txt标签来打破这一行。我只是为了小提琴而使用。

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

小提琴

仅限{c>：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小提琴：http://jsfiddle.net/e5qaD/4000/

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

4 个答案:

HTML

CSS

的jQuery

小提琴