<!DOCTYPE html>声明下div高度100%

问题:在HTML页面中声明<!DOCTYPE html>,页面中div属性设置100%页面显示不正常

image.png

image.png
body {
       max-width: 720px;
       margin: 0 auto;
     }
.case {
       background-color: #68CDD5;
       height: 100%;
     }

页面中case为最大的div的class,设置了height:100%,页面并未正常显示,蓝色部分并未铺满整个页面。

原因:在HTML5标准要求高度或宽度设置成百分比时,参照的是父标签。

解决:

<div>标签的父标签是<body>,<body>标签的高度也需要定义,很多人以为这样设置后也可以正常显示,然而并不是,因为<body>标签的高度虽然设置成100%了,但<body>标签父标签是<html>标签,这个标签也是需要定义高度的。所以最终要添加的参数是html,body {height:100%;}。
html和body之间是逗号,不是空格。说明这是一个多标签选择器,不是派生选择器。

html,body {
       max-width: 720px;
       margin: 0 auto;
       height: 100%;
     }
.case {
       background-color: #68CDD5;
       height: 100%;
     }

正常的页面显示如下


image.png
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 概述 在网易云课堂学习李南江老师的《从零玩转HTML5前端+跨平台开发》时,所整理的笔记。笔记内容为根据个人需求所...
    墨荀阅读 6,953评论 0 7
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 8,595评论 0 5
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,676评论 1 41
  • 去年7月,经新南社会发展中心的刘韬介绍,认识了广州游心公益基金会的秘书长张峻伟,游心请新南做了关于一个乡镇高中生阅...
    Jing_yao阅读 3,652评论 0 0

友情链接更多精彩内容