html设置高度等于浏览器高度并实现内容居中_程序员小咖的博客

相关文章推荐

仗义的竹笋 · matlab cell ...· 7 月前 ·

逼格高的西瓜 · python将二维列表内容写入和读取.txt ...· 1 年前 ·

睿智的甜瓜 · Android ...· 1 年前 ·

最近在做告警系统企业微信（原企业号）时，根据产品的需求，需要html的高度与手机屏幕高度相同。视图间以百分比来表示，并实现内容的居中、垂直居中、水平居中。

方法一：
实现效果:
这里写图片描述
1.创建detail.html

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <title>告警</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width,height-device-height,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link href="./detail.css" rel="stylesheet">
</head>
    <div class="detail-header bottom-line-gray center">
        <b>居中</b>
    </div>
    <div class="detail-content bottom-line-gray">
        <div class="title vertical-center">
        </div>
        <div class="msg horizontal-center">
        </div>
    </div>
    <div class="detail-footer center">
    </div>
<script src="/js/zepto.min.js"></script>
<script src="/js/common.js"></script>
</body>
</html>

2.创建detail.css

/*设置html,body高度与浏览器高度一致*/
html,body {
    margin: 0;
    width:100%;
    height: 100%;
    /*超出body范围部分隐藏*/
    overflow: hidden;
.detail-header {
    background-color: deepskyblue;
    height: 10%;
.detail-content {
    background-color: aqua;
    height: 80%;
    padding: 0 50px 0 50px;
.title {
    background-color: blueviolet;
    height: 25%;
.msg {
    background-color: blue;
    height: 25%;
.detail-footer {
    background-color: aquamarine;
    height: 10%;
/*视图底部线条*/
.bottom-line-gray {
    color: #d3d3d3;
    border-bottom: solid 1px;
/*三种居中方式*/
.center {
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;
.vertical-center {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-box-pack: center;
.horizontal-center {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
方法二: 
 实现效果: 
  
想要实现内部滑动视图效果，只需在.msg中增加overflow:auto;即可 
.msg {
    background-color: blue;
    width:100%;
    overflow:auto;
    height: 25%;
                                    这个问题本人翻遍整个网络，都找不到答案，找到的都是JavaScript的办法，反正各路大神网上各种抄袭，也没一个对，难道只用CSS真的没有办法做到吗，CSS真的那么弱吗？在做网页开发时，最头疼的问题就是给元素设置高度和宽度问题。现在的电脑屏幕越来越大，所以设置元素的大小时，最好不要设置固定值，设置百分比嘛，但是有些元素又无效。之前不想写这篇博客的，但是我怕忘记啊，万一以后忘记了就麻烦了，写在博客上忘记了还能搜索到，抗遗忘。经过不懈的研究，终于在找到办法了，就是指定元素的单位为。
                                    您可以通过应用大量的底部填充，相同数量的底部负边距以及使用隐藏溢出的div围绕列来获得CSS中的相等高度列。垂直居中文本有点棘手，但这应该可以帮助你。#container {overflow: hidden;width: 100%;}#left-col {float: left;width: 50%;background-color: orange;padding-bottom: 500em;ma...
                                    本问题已经有最佳答案，请猛点这里访问。我在它下面有一个头分区和一个分区。我需要在头DIV下面的DIV根据浏览器窗口大小的高度进行调整。在CSS中，当我添加height:100%时，它会在页面的侧面创建一个滚动条。当我调整宽度的百分比时，页面底部的间距会不断变化，因为它是用百分比完成的。我希望标题下面的DIV总是随窗口的高度而调整，底部没有间距。我该怎么做？这是小提琴JS小提琴我不知道为什么，但在j...
                                    css系列(布局)：实现一个元素在浏览器中水平、垂直居中的几个方案在开发中偶遇需要一个元素垂直居中的需求,之前都是水平居中,垂直居中使用的比较少,经过一通研究,选择了几种相对比较实用的方案分享,抛砖引玉,如有遗漏不足,还望不吝指正. 方案一(IE7下该方案无法实现垂 ...JavaScript获取DOM元素位置和尺寸大小在一些复杂的页面中经常会用JavaScript处理一些DOM元素的动态效果,这...
                                    表格可以实现td中的元素垂直居中显示，但是前提条件必须定义td的高才可行。但是很多时候会用到元素跟随浏览器的大小垂直居中，如在制作展示官网、活动展示网等等的时候。问题：实现div垂直居中并在缩放浏览器尺寸的时候仍然居中。1、浏览器可视区域的高度-元素的高度/2 = 元素距离浏览器可视区域顶部的距离。(bodyHeight – divHeight)/22、浏览器可视区域如果小于元素的高度，即元素距离...
                                    在写css静态页面的时候让Html的高度自适应屏幕高度是一个常见的需求，比如你有一个需要置底的bottom按钮，需要在内容不足一屏的时候显示在屏幕的底部，在内容超过一屏的时候显示在所有内容的底部。
效果图：CSS的做法html {
  height: 100%;
  display: table;
}body {
  display: table-cell;
  height: 100%;
                                    这12个问题，基本上就是HTML和CSS基础中的重点难点了，也是必须要弄清楚的基本问题，其中定位的绝对定位和相对定位到底相对什么定位？这个还是容易被忽视的，浮动也是一个大坑，有很多细节。这12个知识点是我个人认为的，下面我们就来看看这12个知识点。1.怎么让一个不定宽高的 DIV，垂直水平居中?使用Flex只需要在父盒子设置：display: flex; justify-content: cent...
                                    html head title改变div高度/title script type=text/javascript src=js/jquery-1.8.3.min.js/script script type=text/javascript $(function(){ //为div设置边框 $(#container).css(border,1px solid gray); //改变div的高度 $(#...