Question

我正在网站上工作，我在左侧导航时出现问题。正如您在此处所见http://animactions.ca/test/Desktop/ 左侧导航菜单不会到达底部，它会在内容后停止。我需要它停在页面底部。

这是css：

  /* CSS layout */
body {

    margin: 0;
    padding: 0;
}

#masthead {
}

#top_nav {

    width: 700px;
    background-color: #DDDDDD;
    margin-right: auto;
    margin-left: auto;

}

#container {

    width: 700px;
    margin-right: auto;
    margin-left: auto;
}

#left_col {
    width: 95px;
    float: left;
    background-color: #B79F63;
    border-right: 5px solid #976F43;
}

#page_content {

    width: 600px;
    float: right;
    background-color: #D2C388;

}

#footer {

    clear: both;
    width: 700px;
    text-align: center;
    background-color: #E0E0E0;
    margin-right: auto;
    margin-left: auto;

}

由于

Answer 1

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

http://www.cssnewbie.com/equal-height-columns-with-jquery/

Answer 2

解决此问题的一种方法是为div创建一个背景图像，其中包含导航和主要内容（在代码中为“容器”），模仿背景颜色和列所需的分隔线。它通常可以小到1px高，但应该是容器的宽度，并将在页面上重复。

导航div问题

2 个答案: