0

私は現在 jQuery で忙しいので、ウィンドウが大きくなったり小さくなったりした場合に、いくつかの div のサイズを自動変更しようとしています。現在は機能していますが、ウィンドウが大きくなっている場合のみです。ウィンドウを小さくすると、div のサイズを変更する前にページをリロードする必要があります。

私のコード:

function size() {   
    var winHeight = $(document).height();
    var topHeight = $("#top").height();
    var footHeight = $("#footer").height() + 50;
    var sideWidth = $("#sidebar").width() + 20;
    var winWidth = $(document).width();

    $("#sidebar").css({'height':(winHeight - topHeight)+'px'});
    $("#sidebar #navigation").css({'height':(winHeight - topHeight - footHeight)+'px'});
    $("#frame").css({'height':(winHeight - topHeight)+'px','width':(winWidth - sideWidth)+'px'});
}

$(document).ready(function(e) { 
    size();
    $(window).resize(function() {
        size();
    });         
});

HTML:

<!-- Start Top -->
<div id="top">
    <!-- Start Metabalk -->
    <div id="metabalk">
        <p class="version">Version: 0.0.1</p>
    </div><!-- Stop Metabalk -->

    <!-- Start Balk-->
    <div id="balk">
        <div id="logo">
            <a href="#" title="Home"><img src="images/logo.png" alt="Logo" /></a>
        </div>

        <div id="navigation">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Errors</a></li>
                <li><a href="#">News</a></li>
            </ul>
            <div class="clearleft"></div>
        </div>  
    </div><!-- Stop balk -->


<!-- Start Sidebar -->
<div id="sidebar">
<div id="search">
            <form>
                <input class="search" type="text" value="Search...">
            </form>
        </div>
    <ul id="navigation">
        <li>
            <div>
                <h2><a alt="content.php"><img src="images/icons/dark/home_24.png" alt="dashboard" /><span>Dashboard</span></a></h2>
            </div>
        </li>
        <li class="select">
            <div>
                <h2><img src="images/icons/dark/globe_24.png" alt="General" /><span>General</span></h2> 
                <span class="plus-min" title="Expand menu"><img src="images/icons/dark/minus_24.png" alt="" /></span>
            </div>
            <ul>
                <li><a alt="form.php">Form</a></li>
                <li><a alt="content.php">Boxes</a></li>
                <li><a alt="block.php">Blocken</a></li>
                <li><a alt="formulier.php">Formulier</a></li>
                <li><a href="#">Item 5</a></li>
            </ul>
        </li>
        <li>
            <div>
                <h2><img src="images/icons/dark/man_24.png" alt="account" /><span>Accoun</span>t</h2>
                <span class="plus-min" title="Expand menu"><img src="images/icons/dark/plus_24.png" alt="" /></span>
            </div>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>
            </ul>
        </li>

    </ul>
     <!--Start Footer -->
    <div id="footer">
        <p class="copyright">&copy; <a href="http://pronation-it.nl/" title="Pronation-it">Pronation-it</a> 2012 - 2013</p>
    </div><!-- Stop Footer -->
</div><!-- Stop Sidebar -->

<!-- Start content -->
    <iframe id="frame" src="content.php"></iframe>
<!-- Stop Content -->

次のようになります。

+---------------------------------+
|            100% width           |
|             header              |
+---------------------------------+
| 250px | auto resize content     |
| width |  it's a iframe          |
|       |                         |
|       |                         |
|       |                         |
+-------+-------------------------+

グーグルで私にとって役立つものは何も見つからないので、あなたが助けてくれることを願っています.

ご挨拶、

4

1 に答える 1

0

height()のドキュメントを見てください。高さを返して設定することができます。つまり、css アプローチは必要ありません。

以下に小さな例を示します。

<div id="header"><h1>My Header</h1></div>
<div id="content" style="border: 1px solid black;">My dynamic content</div>
<div id="footer">My footer</div>

<script type="text/javascript">
$(window).resize(function() {
    var freeSpace = $(window).height() - ($("#header").height() + $("#footer").height());
    $("#content").height(freeSpace);
});
$(window).trigger('resize');
</script>

それでも問題が解決しない場合は、HTML コードの一部を提供してください。

于 2013-03-26T15:43:41.607 に答える