html - 使用主要内容的大小制作导航高度比例

Question

我一直试图让我的导航菜单填充页面但我没有成功:

我希望绿色菜单部分填充页面直至页脚。

这是我的 html:

    <div id="navigation">
        <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Default.aspx">Home</asp:HyperLink>
        <br />
        <br />
        <asp:HyperLink ID="HyperLink2" runat="server" NavigateUrl="~/Contact.aspx">Contact Admin</asp:HyperLink>
        <br />
        <br />
        <asp:HyperLink ID="HyperLink3" runat="server" NavigateUrl="~/About.aspx">About</asp:HyperLink>
        <br />
        <br />
        <asp:HyperLink ID="HyperLink4" runat="server" NavigateUrl="~/JobDescriptionForm.aspx">Job Questionnaire</asp:HyperLink>
        <br />
        <br />
        <div class="additionalTools">
            <asp:ContentPlaceHolder ID="LeftNavCont" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </div>

    <div id="mainContent">
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>

    <div id="footer">
        <asp:Label ID="lblFooter" runat="server"></asp:Label>
    </div>
</form>

和CSS:

#header {
    background-color: white;
    padding: 5px;
}

#navigation {
    background-color: #009900;
    width: 20%;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    float: left;
    padding: 10px;
}

#mainContent {
    width: 70%;
    float: left;
    padding: 10px;
}

#footer {
    background-color: white;
    color: black;
    clear: both;
    text-align: center;
    padding: 5px;
}

我尝试将整个页面设置为 100% 高度，然后将导航 div 设置为 100%，但没有成功。使用 px (800px) 手动使高度变长，但它不是动态的。我如何完成我想要的？谢谢!

Answer 1

试试这个:

html, body {
height: 100%;
}

#navigation {
height:auto;
min-height:100%;
}