如何用百分比设置页面的高度

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

另外一个问题是你或许期望的并不是100%，而是在页面高度不够一屏时按照100%显示，当你的页面超过视窗的大小时，DIV 要能够撑开，这样的话min-height才是你真正想要的。

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

CSS:

html, body {
height: 100%;
}
#container { /* this is the div you want to fill the window */
min-height: 100%;
}

由于 Internet Explorer (IE) 6 及其以下的版本并不支持 min-height 属性，因此，我们需要添加针对 IE 的代码。

CSS:

* html #container {
height:100%
}

在 IE 下，当 DIV 的内容超过 DIV 本身的高度时， DIV 会自动撑开，因此这样的代码可以很好的解决上面的问题。

如何用百分比设置页面的高度相关推荐

html设置页面的高度和宽度,web显示页面有图像上设置高度和宽度很重要
因此即使浏览器只有HTML,它仍然能够分配适当的空间.所以我们可以修改成以下内容: 最近我们发现谷歌浏览器对图片设置有一定的修改,它主要在图像上进行设置width和设置height属性,以防止布局发生 ...
vue设置页面滚动高度_vue 解决无法设置滚动位置的问题
问题描述在实现锚点定位的时候发现无法设置滚动条的位置. 在Vue中,使用 document.body.scrollTop=952 无法设置滚动条的高度. document.body.scrollTo ...
vue设置页面的高度100%
1.设置全局页面高度在vuecli init的默认工程里面,App.vue 页面中加 //App.vue 页面中 <style>html,body,#app{height: 100%;b ...
php设置页面最小高度,HTML_CSS布局中最小高度的妙用，最小高度可以设定一个BOX的最 - phpStudy...
CSS布局中最小高度的妙用最小高度可以设定一个BOX的最小高度,当其内容较少时时,也能保持BOX的高度为一定,超出就自动向下延伸,但到目前为止,只有Opera 和 Mozilla 支持,IE7开始也 ...
vue设置页面滚动高度_vue中获取滚动高度或指定滚动到某位置
1.点击某个标签,滚动到某个具体位置 switchHeight(num) { this.selectNum = num; if (num == 0) { document.getElementById ...
Android中FlowLayout的使用方法，监控布局大小并设置页面高度
博客来源: 工作中需要动态的为页面插入提示语,并根据提示语的不同进行换行操作.提示语数量不同,长度不同,那么就需要页面具有流动性话不多说,上代码这是一个工具类,复制进行小修改即可[下方有我调用参考 ...
[css] 元素竖向的百分比设置是相对容器的高度吗？
[css] 元素竖向的百分比设置是相对容器的高度吗? 父级非 auto 的 height 时,子级百分比的 height 才有效. 即使父级有 min-height 或其他子级撑起的高度,子级百分比 ...
设置页面高度为浏览器可视窗口大小
##设置页面高度为浏览器可视窗口大小## <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
如何设置页脚跟随页面滚动高度不够时固定在底部
在开发PC页面的时候我们经常遇到底部栏要自适应页面,页面内容少的时候要固定在底部,内容超出的时候要跟随页面滚动.这里介绍一个比较容易的方法只需设置页面内容最小高度min-height比如min-he ...

如何用百分比设置页面的高度

如何用百分比设置页面的高度相关推荐

最新文章

热门文章