使导航高度与主要内容的大小成比例

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，但它没有用。使用px（800px）手动调整高度，但它不会动态。我如何实现我想要的？谢谢！

Answer 1

试试这个：

html, body {
height: 100%;
}

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