css 百分比 定义高度 小结

小咪咪 2022-07-10 09:59 285阅读 0赞

在符合标准的 XHTML 模式下,将 DIV 的高度简单的设置为 100% 往往并不能达到想要的效果,

原因是“百分比”是个相对于父节点的值,

如果你没有设置他们的父节点的高度,那么设置 DIV 的高度为100%就没有了意义。

另外一个问题是你或许期望的并不是100%,而是在页面高度不够一屏时按照100%显示,

当你的页面超过视窗的大小时,DIV 要能够撑开,这样的话min-height才是你真正想要的。

下面的代码可以让页面不足一屏时按照100%显示,当超过一屏时,又能够撑开:

CSS:

html, body {

  1. height: 100%;

}

#container {

  1. /\* this is the div you want to fill the window \*/
  2. min-height: 100%;

}

由于 Internet Explorer (IE) 6 及其以下的版本并不支持 min-height 属性,

因此,我们需要添加针对 IE 的代码。

CSS:

* html #container {

  1. height:100%

}

在 IE 下,当 DIV 的内容超过 DIV 本身的高度时,

DIV 会自动撑开,因此这样的代码可以很好的解决上面的问题。

发表评论

表情:
评论列表 (有 0 条评论,285人围观)

还没有评论,来说两句吧...

相关阅读

    相关 css 百分比 定义高度 小结

    在符合标准的 XHTML 模式下,将 DIV 的高度简单的设置为 100% 往往并不能达到想要的效果, 原因是“百分比”是个相对于父节点的值, 如果你没有设置他们的父节点的