CSS布局 - 避免垂直滚动条

问题描述：

我正尝试使用div标记创建HTML CSS布局。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;*/ 

}

如果按照OP的链接，然后向下滚动，你会看到有这么的意思显示橙色条。 – dldnh 2012-03-31 10:27:15

@Asif但我的页脚没有显示。 – SyAu 2012-03-31 10:28:42

我的歉意，我得到了jsbin的黄色页脚，并认为它是你自己的页脚。赦免。 – Asif 2012-03-31 10:29:49

答

你可能Wnt信号的Sticky Footer比把你footer的#container之外。

入住这http://jsbin.com/ujemaq/17

没有注意到我的left-nav div CSS和content div css被修改了。其实我需要他们的高度达到页脚底部的页脚结束。任何想法如何解决我的原始问题。 – SyAu 2012-03-31 11:48:08

答

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

CSS布局 - 避免垂直滚动条

相关推荐