Question

Index.html是这样的：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <link href="main.css" rel="stylesheet" type="text/css">
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>liquid test</title>
</head>
<body>

<div id="nav">Al contrario di quanto si pensi, Lorem Ipsum non è semplicemente una sequenza casuale di caratteri.Al contrario di quanto si pensi, Lorem Ipsum non è semplicemente una sequenza casuale di caratteri.Al contrario di quanto si pensi, Lorem Ipsum non è semplicemente una sequenza casuale di caratteri.Al contrario di quanto si pensi, Lorem Ipsum non è semplicemente una sequenza casuale di caratteri.</div>
<div id="container-outer">
    <div id="container-inner">

        <div id="sidebar">
            <p>Al contrario di quanto si pensi, Lorem Ipsum non ...put more text for try</p>
        </div>

        <div id="content">
            <p>Esistono innumerevoli variazioni dei passaggi del Lorem Ipsum, ma la maggior parte hanno subito delle variazioni del tempo, a causa dell’inserimento di passaggi ironici, o di sequenze casuali di caratteri palesemente poco verosimili. Se si decide di utilizzare un passaggio del Lorem Ipsum, è bene essere certi che non contenga nulla di imbarazzante. In genere, i generatori di testo segnaposto disponibili su internet tendono a ripetere paragrafi predefiniti, ...put more text for try nav bar</p>
        </div>
    </div>
</div>
<div id="footer">Al contrario di quanto si pensi, Lorem Ipsum non è semplicemente una sequenza casuale di caratteri.</div>
</body>
</html>

相对的main.css文件是：

#container-outer {
    float:left;
    overflow: hidden;
    background: #eee;
    position:absolute;
    height:500px;
}

#container-inner {
    float:left;
    background: #555;
    position: relative;
    right:75%;
    height:100%;
}

#sidebar {
    float: left;
    width: 25%;
    position: relative;
    left: 75%;
    height:100%;
    overflow-x: scroll;
}

#content {
    float: left;
    width: 75%;
    position: relative;
    left: 75%;   
    height:100%;
    overflow-x: scroll;
}

#footer{
    position:fixed;
    bottom:0px;
    left:0px;
    right:0px;
    height:30px;
}

我希望高度值＃container-outer 在 nav 和页脚之间获得100％的高度（从底部30 px固定），如果将高度值更改为100％，＃container-outer 将从页脚中删除。非常感谢。

div 100％嵌套tow div：导航和页脚

0 个答案: