1

コンテンツに応じてサイズを変更できるページがあります。私が必要としているのは、ボディに合わせてサイドバーが増減する方法ですが、目に見えるボディの 100% 未満になることは決してありません。

最初はページは問題ないように見えますが、コンテンツを増やすと、本来あるべきではない左右の下に空白が表示されます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .container
        {
            background-color: Gray;
            height: 100%;
            width: 100%;
            position: absolute;
            clear: both;
        }
        .content
        {
            background-color: white;
            width: 80%;
            margin: 0 auto;
            height: 100%;
            min-height: 100%;
        }
    </style>
    <script type="text/javascript" src="js/jquery-latest.js"></script>
    <script language="javascript" type="text/javascript">
        function MakeBig() {
            var html = "";
            for (var i = 0; i < 500; i++) {
                html += "this is some random filler text<br/>";
            }
            $("#textHolder").html(html);
        }

        function MakeSmall() {
            var html = "";
            for (var i = 0; i < 5; i++) {
                html += "this is some random filler text<br/>";
            }
            $("#textHolder").html(html);

        }
    </script>
</head>
<body>
    <div id="container" class="container">
        <div id="content" class="content">
            This is some text in the content
            <button id="btnMakeBigDiv" onclick="MakeBig()">Increase Content</button><br/>
            <button id="btnMakeSmallDiv" onclick="MakeSmall()">Decrease Content</button>
            <div id="textHolder"></div>
        </div>
    </div>
</body>
</html>
4

2 に答える 2

0

これがjQueryの方法です。しかし、防弾ではありません。あなたがいくつかのアイデアを得ると思います...

<style type="text/css">
    html { height: 100% }
</style>

<script type="text/javascript">
    $(document).ready(function() {
        if(!($(window).height() < $(document).height())) {
            $("#wrapper").css("height", "100%");
            $("#sidebar").css("height", "100%");
        }
        $("#content").resize(function() {
            if($("#content").height() > $(window).height())
                $("#sidebar").height($("#content").height());
        });
    });
</script>

<div id="wrapper">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>
于 2009-11-17T10:13:27.837 に答える