Question

我有一个挂机，但我为迄今取得的成就感到自豪。我正在制作一个桌面样式的应用程序并成功使用css（控件宽度）和jquery（控制高度）来扩展和折叠应用程序每个窗口的宽度和高度与最小宽度和最小高度。太棒了吧？

我似乎无法通过嵌套来填充其余的高度。我知道jquery就是答案，因为我在sun css下尝试了一切。

下面的代码炸弹。我认为你会从看到整个结构中受益，实际上它还不是太糟糕。提前谢谢。

HTML＆amp; JQUERY

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test Page</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Open+Sans:400,600'    rel='stylesheet' type='text/css'>
<link href="css/app.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(window).ready(function(){
$('#wrapper').height($(window).height()-40);
});

$(window).resize(function() {
    $('#wrapper').height($(window).height()-40);
});

$(window).trigger('resize');
</script>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <div id="headerLeft">
            <img src="images/logo.jpg" height="60" />
        </div>
        <div id="headerRight">
            <div id="companyLinks">
                <p class="openSans">Welcome,</p> <a href="myaccount.php">Chambers and Sons Landscaping, Inc.</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="logout.php">Logout</a>
            </div>
            <div id="companyLogo">
                <img src="images/logos/1.jpg" height="60" />
            </div>
        </div>
    </div>
    <div id="content">
        <div id="contentLeft">
            <div id="contentLeftHeader">
                <h1>Header</h1>
            </div>
            <div id="contentLeftBody">
                test text<br/>
                line height test.
            </div>
        </div>
        <div id="contentRight">
            <div id="contentRightTop">
                <div id="contentRightTopHeader">
                    Header
                </div>
                <div id="contentRightTopBody">
                    test text
                </div>
            </div>
            <div id="contentRightBottom">
                <div id="contentRightBottomHeader">
                    Header
                </div>
                <div id="contentRightBottomBody">
                    test text
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

CSS

    body{
        margin:0px;
        background-color:#cccccc;
        padding:20px;
        min-width:840px;
        font-family: 'Open Sans', sans-serif;
        font-size:14px;
        font-weight:normal;
        color:#4c4c4c;
        line-height:20px;
    }
    #wrapper{
        background-color:#ffffff;
        width:100%;
        min-width:800px;
        min-height:600px;
    }
    .openSans{
        margin:0px;
        display:inline;
        font-size:12px;
        font-weight:400;
        line-height:16px;
    }
    h1{
        margin:0px;
        font-family: 'Open Sans', sans-serif;
        font-size:18px;
        font-weight:600;
        line-height:24px;
    }
    #header{
        width:100%;
        margin-bottom:30px;
        overflow:auto;
    }
    #headerLeft{
        float:left;
    }
    #headerRight{
        float:right;
    }
    #companyLinks{
        margin-top:20px;
        margin-right:10px;
        float:left;
    }
    #companyLogo{
        float:left;
    }
    #header a:link{
        color:#9ad065;
        font-size:12px;
        font-weight:400;
        text-decoration:none;
    }
    #header a:hover{
        text-decoration:underline;
    }
    #content{
        width:100%;
    }
    #contentLeft{
        float:left;
        width:69%;
        margin-right:1%;
    }
    #contentLeftHeader{
        background-color:#9ad065;
        padding:5px;
    }
    #contentLeftBody{
        overflow:auto;
        padding:5px;
        border:2px solid #9ad065;
    }
    #contentRight{
        float:left;
        width:30%;
        background-color:#dddddd;
    }
    #contentRightTop{

    }
    #contentRightTopHeader{

    }
    #contentRightTopBody{

    }
    #contentRightBottom{

    }
    #contentRightBottomHeader{

    }
    #contentRightBottomBody{

    }

如何使嵌套div填充其父div的其余高度

0 个答案: