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
  • 22910

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

CSS根据屏幕分辨率宽度自动适应的办法   第一种办法是JS选择CSS if (screen.width == 640) { document.write('');...
  • bestlove12345
  • bestlove12345
  • 2016年11月13日 11:55
  • 13121

JavaScript获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

JavaScript获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
  • SecondLieutenant
  • SecondLieutenant
  • 2017年06月21日 12:00
  • 242

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

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

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

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

手机页面获取屏幕高度那些事

在做移动端页面的时候,经常会遇到需要获取屏幕的高度和宽度,进行一些特殊效果的处理或者兼容。比如在做全屏滑动上下翻页的效果(不出现滚动条),这种就需要页面加载时获取到屏幕的高度,然后才能定义,每一屏的高...
  • natalie86
  • natalie86
  • 2015年01月25日 13:58
  • 3145

css 根据手机屏幕适应页面高度

1、根据正常的web网页设计实现页面 2、@media screen and (max-width: 375px){} 需要根据页面调整不同高度的class或ID在该样式里面进行调整。 eg: ...
  • kissxia
  • kissxia
  • 2014年12月08日 09:39
  • 483

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密

纯CSS实现移动端常见布局——高度和宽度挂钩的秘密不踩坑不回头.之前我在一个项目中大量使用css3的calc计算属性.写代码的时候真心不要太爽啊…但是在项目上线之后,才让我崩溃了,原因很简单,在低于安...
  • FungLeo
  • FungLeo
  • 2016年03月06日 00:21
  • 6953

容器高度或者宽度的获取方式

为了使表格或者一些数据能能够自适应浏览器的宽度或者高度,就不可避免的要获取浏览器的尺寸 电脑屏幕尺寸的获取方式 window.screen.height //获取电脑屏幕分辨率的高度 window...
  • MxiaXxy
  • MxiaXxy
  • 2017年09月21日 12:28
  • 638

获取设备及浏览器等的高度和宽度

/*获取设备及浏览器的等的高度和宽度 */ var height1=window.screen.height; var width1=window.screen.wi...
  • nikita1995
  • nikita1995
  • 2016年07月29日 12:03
  • 2724
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css实现容器高度 适应 屏幕高度
举报原因:
原因补充:

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