Question

我现在正忙于使用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          |
|       |                         |
|       |                         |
|       |                         |
+-------+-------------------------+

我希望你能提供帮助，因为在google上我找不到任何对我有用的内容。

问候，

Answer 1

查看height()的文档。它可以返回并设置高度，这意味着您不需要css方法。

Here是一个小例子：

<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代码。

自动调整大小，仅在窗口变大时调整大小

1 个答案: