0

「コンテンツ左」と「コンテンツ右」の 2 つの div があります。content-left div の高さはさまざまです。content-right div の高さは一定です。

更新: content-left は、サイズが異なるだけでなく、ユーザーの操作に応じて、分単位でサイズが変化する可能性があります。

content-left に div スクロールバーを含めたいです。ブラウザ ウィンドウ自体にスクロール バーを表示したくありません。

content-right div のコンテンツが常に表示されるようにします。content-right はページからスクロールしてはいけません。

以下のコードを思いつきましたが、もっと良いと思います。

これをFirefoxとChromeでテストしました。Internet Explorer は私には関係ありません。

本質的には、左側の div を「非表示」にし、右側の div の上部とウィンドウ サイズの違いを判断し、左側の 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>

考え？

4

1 に答える 1