CSS布局 - 避免垂直滚动条

Question

我正在尝试使用div标签创建HTML CSS布局。

Code here

现在它显示一个垂直条。我想避免这个垂直条，并且只想在内容很大的情况下显示。

Answer 1

您想要Sticky Footer，然后将footer放在#container之外。

选中此http://jsbin.com/ujemaq/17

Answer 2

修改
好吧你的实际问题出现了高度歧义，请看这些行：

#container{
    min-height: 100%;
    width:100%;
    height:100%;       /* this causes container to a 100% height of body*/
}
#header{
    width:100%;
    height:55px;     /* this takes 55px of container height*/
    /*border:2px solid;*/
}
#menu{
    width:100%;
    height:20px;   /* this takes another 20px of container height*/
    /*border:2px solid;*/
}
#left-nav{
    width:20%;
    height:100%;
    float:left;
    /*border:2px solid;*/
}
#content{
    height:100%;  /*You thinking of getting full height of container but the 75px height is already grabbed by header and menu, so while expanding content to 100% height a vertical scrollbar appears */
    /*border:2px solid;*/

}

Answer 3

应用此css

body,html{
  height:100%;
}
    #container{
        min-height: 100%;
        width:100%;
        height:100%;
    }
    #header{
        width:100%;
        height:55px;
        /*border:2px solid;*/
    }
    #menu{
        width:100%;
        height:20px;
        /*border:2px solid;*/
    }
    #left-nav{
        width:20%;

        float:left;
        /*border:2px solid;*/
    }
    #content{
        height:85%;
        /*border:2px solid;*/

    }
    #footer{
        background-color:#FFA500;text-align:center;
    }
    </style>