CSS-div高度100%设置问题

div常用的属性width和height,有的时候如果我们需要让div的高度是整个屏幕的高度,设置height:100%发现并没有什么作用,并不是这样设置不对,而是w3c规范中关于百分比的设置是相对于父元素的,如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>博客园-FlyElephant</title>
    <style type="text/css">
    .parent {
        background: red;
        height: 100%;
    }
    </style>
</head>
<body>
    <div class="parent">
    博客园-FlyElephant
    </div>
</body>
</html>

发现div的高度只是文字的高度,如果需要让div铺满整个屏幕,我们需要设置一下父级元素的高度,也就是html和body:

    html,body {
        height: 100%;
        padding: 0;
        margin: 0;
    }

高度是相对于父级元素的,但是html级元素默认宽度是100%,即整行~

时间: 2024-10-15 21:09:38

CSS-div高度100%设置问题的相关文章

&lt;!DOCTYPE html&gt;声明下div高度100%的问题

在使用HTML代码创建网页,如果声明了<!DOCTYPE html>,并且在代码中有div设置了高度为100%,可能会出现显示不正常的情况.比如下面这个代码: <!DOCTYPE HTML> <html lang="en"> <head>     <meta charset="UTF-8">     <title>Title</title>     <style type=&q

&lt;!DOCTYPE html&gt;声明下div高度100%

问题:在HTML页面中声明,页面中div属性设置100%页面显示不正常 body { max-width: 720px; margin: 0 auto; } .case { background-color: #68CDD5; height: 100%; } 页面中case为最大的div的class,设置了height:100%,页面并未正常显示,蓝色部分并未铺满整个页面. 原因:在HTML5标准要求高度或宽度设置成百分比时,参照的是父标签. 解决: 标签的父标签是,标签的高度也需要定义,很多人

DIV+CSS height高度知识教程篇

DIV+CSS height高度知识教程篇 DIV CSS高度简介这里的CSS高度是指通过CSS来控制设置对象的高度.使用CSS属性单词height.单位可以使用PX,em等常用使用PX(像素)为html单位. height高度目录 height高度语法 高度用法 html原始高度设置 css高度height案例 css高度height总结 一.height高度语法   -   TOP 1.高度基本语法Height:auto 设置高度自动(通常默认高度是auto自动,自适用内容而增高,通常如果想

css高度100%(百分比高度)

css的height属性可以设置100%,但是必须能得到父元素的高度.否则无效. 例如: #aa {  background: red; height: 200px; }    #bb { height: 80%; background: blue; }    #cc { height: 50%; background: green; } <div id="aa">        <div id="bb">            <di

CSS布局:div高度随窗口变化而变化(BUG会有滚动条)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS布局:div高度随窗口变化而变化</

设置div 高度 总结

如果将div 的height 设置为固定的像素值,在不同分辨率的显示屏上,会看到div 在浏览器上的高度不一致.可以以百分比的形式设置div 的高度.注意,这个百分比是针对div 的上一层标签而言的,如果当前div的上一层标签的height 为 100px,那么当前标签设置hight 为 100% 时,它的高度也就是100px. HTML 页面中,html 和 body 标签的height是auto的.如果要设置div 的高度跟浏览器一致,则要先将html 和 body 的高度设置为100%.

css 父div高度为0

当css 中父类div 高度为为时,可能是子类div 元素用了float,没有加clear属性. .clear { clear: both; font-size: 0; line-height: 0; height: 0; visibility: visible; }

精通CSS+DIV网页样式与布局--设置表单和表格

表格和表单是网页中非常重要的两个元素,在上篇博客中,我们简单的介绍了CSS的页面背景设置,今天小编继续来介绍CSS的相关知识,在我们的CSS中如何设置表格和表单,首先,来看一张思维导图,通过图简单的预览一下该博文主要讲解哪些CSS的基础知识: 首先我们的首先表格中的标记,代码和运行效果如下所示: <span style="font-size:18px;"><html> <head> <title>年度收入</title> &l

CSS + DIV 让页脚始终底部

一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面,但仍然始终保持在底部. 二 position position有四个参数:static  | relative | absolute | fixed position:static,意味元素没有被定位,元素会出现在文档本该出现位置,是页面元素默认的定位的方式,一般无需指定,除非想要覆盖之前设置的定位