Question

我有两个div，'content-left'和'content-right'。内容左侧div的高度可能不同。内容权利div具有恒定的高度。

更新：content-left不仅大小不一，而且大小可以从一分钟到另一分钟不等，具体取决于用户的行为。

我希望内容包含div滚动条。我不希望浏览器窗口本身有滚动条。

我希望内容权利div的内容始终可见。 content-right永远不应滚动页面。

我想出了下面的代码，但我认为它可能会更好。

我在firefox和chrome中测试了这个。 Internet Explorer与我无关。

本质上，我只是“隐藏”左侧div，确定右侧div顶部与窗口大小之间的差异，并设置left-div的max-height属性。滚动然后由overflow：auto

发生

<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript">
</script>

<script type="text/javascript">
    $(document).ready(function() {
    processLeftDiv();
});
$(window).resize(function() {
    processLeftDiv();
});

function processLeftDiv()   {
        $('#content-left').hide();
        windowHeight = $(window).height() ;
        positionTop = $('#content-right').position().top ;
        $('#content-left').css('max-height', ( windowHeight - ( positionTop + 20 ) ) );
             // the 20 is padding
        $('#content-left').show();
}
</script>

<title>Test</title>
<style type="text/css">

#header
{
    width: 100%;
    background: red;
}

#content-left
{
    float: left;
    margin-bottom: 5px;
    width: 50%;
    height: 100%;
    max-height: 100%;
    overflow: auto;
    background: blue;
    display:none;
}
#content-right
{
    float: right;
    width: 50%;
    background: green;
}  

</style>
</head>
<body>
    <div id="header">
              Header
             <p>Header stuff</p>
    </div>

    <div id="body">

        <div id="content-left">
                Content left
          <p>Blah Blah</p>
          <p>Blah Blah</p>
          <p>Blah Blah</p>
     repeated 100 times
          <p>Blah Blah</p>
          <p>Blah Blah</p>
          <p>Blah Blah</p>
          <p>Blah Blah</p>
          <p>Blah Blah</p>
        </div><!--close left div-->

        <div id="content-right">
                Content
            <p>Content stuff</p>
        </div><!--close right div-->

    </div><!--close body div-->

</body>
</html>

思想？

Answer 1

无需使用javascript复杂化，您只能使用CSS，更简单。这是你如何做到的：

    <!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body{
                border: 0;
                margin: 0;
                padding: 0;
                outline: 0;
            }
            .header
            {
                width: 100%;
                height: 100px;
                background: red;
            }
            .wrapper
            {
                position: absolute;
                top: 100px;
                bottom: 0;
                left: 0;
                width: 100%;
            }
            .content-left
            {
                float: left;
                width: 50%;
                height: 100%;
                overflow: auto;
                background: blue;
            }
            .content-right
            {
                float: left;
                width: 50%;
                height: 100%;
                background: green;
            }  
        </style>
    </head>
    <body>
        <div class="header">
            <p>Header stuff</p>
        </div>
        <div class="wrapper">
            <div class="content-left">
                Content left
            </div>
            <div class="content-right">
                Content right
            </div>
</div>
    </body>
</html>

因为你是新手，所以只有一些提示：

总是尝试在你的html / css中使用类而不是id，从长远来看，你的生活将变得更加简单（只有当你想将一些javascript绑定到一个元素时才应该使用id，no其他很好的理由imo）
总是使用一些CSS重置块（我在body标签上使用了最简单的一个）。我知道这只是一个例子，但在实际应用中这是必须的。谷歌，那里有一些很棒的。

使用一个div来限制另一个div的大小

1 个答案: