0

我有两个 div，'content-left' 和 'content-right'。content-left div 的高度可以不同。content-right div 具有恒定的高度。

更新： content-left 的大小不仅可以变化，而且它的大小可能会随着时间的推移而变化，具体取决于用户所做的事情。

我希望 content-left 包含一个 div 滚动条。我不希望浏览器窗口本身有滚动条。

我希望内容正确的 div 的内容始终可见。content-right 永远不应该滚出页面。

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

我在 Firefox 和 chrome 中对此进行了测试。Internet Explorer 与我无关。

本质上，我只是“隐藏”了左 div，确定了右 div 顶部与窗口大小的差异，并设置了左 div 的 max-height 属性。然后滚动发生溢出：自动

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

想法？

4

1 回答 1

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，没有其他充分的理由 imo）

  • 总是使用一些 CSS 重置块（我在 body 标签上使用了最简单的一个）。我知道这只是一个例子，但在实际应用中这是必须的。谷歌一下，那里有一些很棒的。

于 2012-08-05T18:52:45.007 回答