怎么让Html的高度自适应屏幕高度
2017-04-05 15:36
197 查看
在写css静态页面的时候让Html的高度自适应屏幕高度是一个常见的需求,比如你有一个需要置底的bottom按钮,需要在内容不足一屏的时候显示在屏幕的底部,在内容超过一屏的时候显示在所有内容的底部。
又学了一种新方法,使用flex布局:
基于zepto
原生js
效果图:
CSS的做法
html { height: 100%; display: table; } body { display: table-cell; height: 100%; }
又学了一种新方法,使用flex布局:
<div class="container"> <header></header> <content></content> <footer></footer> </div>
.container { display: flex; min-height: 100vh; flex-direction: column; } header { background: #cecece; min-height: 100px; } content { background: #bbbbbb; flex: 1; /* 1 代表盡可能最大,會自動填滿除了 header footer 以外的空間 */ } footer { background: #333333; min-height: 100px; }
JS的做法
css的做法有时候会在定位的时候造成一些麻烦,可以尝试使用js去动态改变html的高度基于zepto
$(document).ready(function(){ var windowHeight = $(window).height(); if($(this).height() < windowHeight){ $(this).height(windowHeight); } });
原生js
window.onload = function(){ var winHeight = 0; if (window.innerHeight){ winHeight = window.innerHeight; }else if ((document.body) && (document.body.clientHeight)){ winHeight = document.body.clientHeight; } var html = document.getElementsByTagName('html')[0]; if(document.body.offsetHeight < windowHeight){ html.style.height = windowHeight; } };
相关文章推荐
- html css div自适应屏幕宽度,高度
- 怎么让div的高度自适应屏幕的高度
- html css div自适应屏幕宽度,高度
- html中图片自适应浏览器和屏幕,宽度高度自适应
- html css div自适应屏幕宽度,高度
- ImageView宽度填满屏幕,高度自适应
- 手机端Html自适应屏幕大小
- div 高度固定 超出这个高度了 就自适应” 怎么写?
- storyboard xib下label怎么自适应宽度高度
- div的高度自适应屏幕的高度
- 在Java代码中设置控件高度和宽度按比例自适应屏幕
- html 设置div最小高度,超出的自适应
- Html与手机屏幕自适应
- HTML基础学习之 --网页的宽度、高度自适应
- 【笔记】css 实现宽度自适应屏幕 高度自适应宽度
- react内嵌div高度屏幕自适应
- 如何让一个元素自适应屏幕的高度
- html css 内部有浮动元素的div的高度没有被撑开怎么办【转载】
- JavaScript与jQuery中获取屏幕的宽度和高度的常用方法以及HTML中精确定位
- css实现自适应屏幕高度