css实现容器高度 适应 屏幕高度

原创 2016年08月30日 17:16:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{ padding:0; margin:0}
body,html{ height:100%;}
#box{ width:500px; margin:0 auto; outline:1px solid #F00; height:100%;}
</style>
</head>

<body>
     <div id="box"></div>
</body>
</html>

要点1:设置box的高度height:100%;
要点2:设置body,html的高度height:100%; 
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

css获取屏幕高度、宽度

网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offse...
  • wd4java
  • wd4java
  • 2014年12月26日 16:40
  • 20284

CSS根据屏幕分辨率宽度自动适应的办法

CSS根据屏幕分辨率宽度自动适应的办法   第一种办法是JS选择CSS if (screen.width == 640) { document.write('');...

html css div自适应屏幕宽度,高度

做C/S项目其实最让人蛋疼的无非就是兼容问题,各种浏览器的不兼容外还有div+css不科学的显示问题。所以针对div+css窗口最大化、缩小的自适应加以解决。   New ...

div自适应屏幕高度

问题描述:本地项目页面左侧菜单点击父亲节点拉伸出子节点后,演示的阴影不能覆盖所有的左侧菜单,现象如下图:此时整个演示的页面要通过滚动条才能看到整个菜单内容 整个菜单都放在div中,div的父亲节点...

设置div的高度为屏幕高度

total = document.documentElement.clientHeight; document.getElementById("container").style.height=to...

怎么让Html的高度自适应屏幕高度

在写css静态页面的时候让Html的高度自适应屏幕高度是一个常见的需求,比如你有一个需要置底的bottom按钮,需要在内容不足一屏的时候显示在屏幕的底部,在内容超过一屏的时候显示在所有内容的底部。 效...

CSS实现自适应高度布局:头部底部固定,中间自适应铺满屏幕剩余高度,中间盒子里左盒子固定右盒子自适应宽度

如题:顶部底部固定高度,中间部分铺满屏幕剩余高度,中间盒子里又左盒子固定宽度,右盒子自适应宽度且距左盒子总是20px 主要解决方法是中间盒子的top:40px;bottom:40px;设置。原理是在...

如何让div的大小占满整个屏幕?

一、先来代码 *{ margin: 0; padding: 0; } html,body{ height: 100%; wi...

给定A, B两个整数,不使用除法和取模运算,求A/B的商和余数

给定A, B两个整数,不使用除法和取模运算,求A/B的商和余数。 1.   最基本的算法是,从小到大遍历: for (i = 2 to A -1)          if (i * B > A)...

配置SOIL库,实现纹理加载

SOIL 是一个用于向OpenGL中加载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css实现容器高度 适应 屏幕高度
举报原因:
原因补充:

(最多只允许输入30个字)