CSS设置height为100%无效的情况

时间：2022-09-13 10:32:00

CSS设置height为100%无效的情况

笔者是小白，不是特别懂前端。今天写一个静态的HTML页面，然后想要一个div占据页面的100%，但是尝试了很多办法都没有实现，不知道什么原因。

后来取百度搜了一下，发现了问题所在。由于<body>和<html>标签没有设定大小和边距，导致大小是由内容决定，否则默认为0。因此其他的组件在此基础上想在没有内容的情况下设置height是没有办法的。因此我们需要写一段这样的css代码。

        body,html{

            height: 100%;

            width: 100%;

            margin: 0px;

            padding: 0px;

        }

CSS设置height为100%无效的情况的更多相关文章

  1. 解决html设置height：100&percnt;无效的问题

    通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决办法很简单 解决:你只需要在css处添加上html, ...

  2. css设置height 100&percnt;

    需要显式设置html,body为100%,body是相对于html,wrapper是相对于body html,body{ height: 100%; } .wrapper{ height: 100; ...

  3. 解决body设置height&colon;100&percnt;无效问题

    1. 解决html设置height:100%无效问题 通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决 ...

  4. css中 出现height为100&percnt;失效的原因及解决方案

    我们都知道需要给html和body标签设置了高度height:100%之后,再给内部的div设置height:100%的时候,内部div的高度100%才会起到作用.这是由于:%是一个相对父元素计算得来 ...

  5. CSS中设置height&colon;100&percnt;无效的解决方案

    在网页设计中有时会设置某个DIV或者TABLE的高度自适应,即元素的高度充满父元素的高度.一般使用设置CSS  height:100%来实现.但是当元素层级嵌套比较深的时候,设置该属性并不能得到应有的 ...

  6. 设置height&colon;100&percnt;无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  7. table和div设置height&colon;100&percnt;无效的完美解决方法

    刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...

  8. &lbrack;转载&rsqb;css菜鸟之HTML 中块级元素设置 height&colon;100&percnt; 的实现

    HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...

  9. css菜鸟之HTML 中块级元素设置 height&colon;100&percnt; 的实现

    HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...

随机推荐

  1. &lbrack;Python&rsqb; Python中的一些特殊函数

    1. 过滤函数filter 定义:filter 函数的功能相当于过滤器.调用一个布尔函数bool_func来迭代遍历每个列表中的元素:返回一个使bool_func返回值为true的元素的序列. a=[ ...

  2. 静态方法中的this

    1using System; 2using System.Web.Script.Serialization; 3 4namespace Demo 5{ 6    /**//// <summary ...

  3. 开始使用 Fresco

    如果你仅仅是想简单下载一张网络图片,在下载完成之前,显示一张占位图,那么简单使用 SimpleDraweeView 即可. 在加载图片之前,你必须初始化Fresco类.你只需要调用Fresco.ini ...

  4. hdu 4753 2013南京赛区网络赛 记忆化搜索 &ast;&ast;&ast;&ast;

    看到范围基本可以想到dp了,处理起来有点麻烦 #include<iostream> #include<cstdio> #include<cstring> #incl ...

  5. 20141015--for语句1

    for 语句 break (跳出循环体) 100节楼梯,第1-49节分数等于节数,50以后(包括50)每节10分,

  6. 【转】 Android——eclipse共享library以及导出jar包

    原文网址:http://blog.csdn.net/jscese/article/details/36627195 android的apk在在eclipse上进行开发的时候,有时候需要import其它 ...

  7. Node&period;js权威指南 &lpar;6&rpar; - 在Node&period;js中操作文件系统

    6.1 同步方法与异步方法 / 856.2 对文件执行读写操作 / 86 6.2.1 文件的完整读写 / 86 6.2.2 从指定位置处开始读写文件 / 916.3 创建与读取目录 / 97 6.3. ...

  8. eclipse 使用hadoop-plugins 插件出现EOFException问题

    相当郁闷的一个问题,之前也看了好多外国的网站,也没有解答 主要出在了使用http访问 http://192.168.5.128:50030/jobtracker.jsp http://192.168. ...

  9. Eclipse&plus;EPIC&plus;PadWalker

    来源: http://www.cnblogs.com/itech/archive/2010/02/23/1671676.html http://blog.csdn.net/haoyujie/artic ...

  10. Codeforces Round &num;436 C&period; Bus

    题意:一辆车在一条路上行驶,给你路的总长度a,油箱的容量b,加油站在距离起点的距离f,以及需要走多少遍这条路k(注意:不是往返) 问你最少加多少次油能走完. Examples Input 6 9 2 ...

相关文章