CSS布局-避免垂直滚动条

我正在尝试使用div标记创建一个HTML CSS布局

---

现在它会显示一个竖条。我希望避免使用此垂直条，并且仅在内容较大时显示。

编辑：
好的，您的实际问题是高度模糊，请参见以下几行：

#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;*/

}

请不要将您的

页脚

放在

#容器

之外

选中此项

应用此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>

body，html{
身高：100%；
}
#容器{
最小高度：100%；
宽度：100%；
身高：100%；
}
#标题{
宽度：100%；
高度：55px；
/*边框：2倍实心*/
}
#菜单{
宽度：100%；
高度：20px；
/*边框：2倍实心*/
}
#左导航{
宽度：20%；
浮动：左；
/*边框：2倍实心*/
}
#内容{
身高：85%；
/*边框：2倍实心*/
}
#页脚{
背景色：#FFA500；文本对齐：居中；
}

如果你跟随OP的链接向下滚动，你会看到一个橙色的条，它是用来显示的。@Asif但是我的页脚没有显示出来。很抱歉，我得到了jsbin的黄色页脚，并认为它是你自己的页脚。对不起，我没有注意到我的左导航分区css和内容分区css被修改了。实际上，我需要它们的高度才能到达页脚div上方的页面底部。知道如何解决我原来的问题吗。