css中height:100%不起作用的解决方法

最新推荐文章于 2024-07-01 16:48:04 发布
最新推荐文章于 2024-07-01 16:48:04 发布
阅读量285 收藏
点赞数
文章标签： xhtml
原文链接：http://www.cnblogs.com/Mblog/archive/2010/02/01/1661117.html
版权

在网页设计中，table用height:100%是可以整屏的，但需要在网页头部增加:
<!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">
后就和没有用height:100%一样了，后来发现要给html,body都增加height:100%的属性，这是高度自适应问题的关键所在。
代码如下:
html,body{
margin:0px;
height:100%;
}
一个对象高度是否可以使用百分比显示，取决于对象的父级对象，Table在body之中，因此它的父级是body，而浏览器默认状态下，是没有给 body一个高度属性的，因此当我们直接设置#left为height:100%;时，不会产生任何效果，而当我们给body设置了100%之后，它的子 级对象 Table的height:100%;便发生作用了，这便是浏览器解析规则引发的高度自适应问题。而代码中除了给body应用之外，还 给 HTML对象也应用相同的样式设计，这样做的好处是使IE与firefox浏览器都能够实现高度自适应。另外，Firefox中的HTML标签不 是 100%高度，因此给两个标签都定义为height:100%;以保证两个浏览器下均能够正常显示。

以此类推，如果你要显示的表格或者DIV的层次比较深，那么这一路下去都要是100%

转载于:https://www.cnblogs.com/Mblog/archive/2010/02/01/1661117.html

aoba7740
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
IE6 CSS高度height:100% 计算失效/无效
09-25
在CSS布局中，`height: 100%` 是一个常见的设置，用于使元素的高度与它的父元素保持一致。然而，在Internet Explorer 6 (IE6) 这个古老的浏览器中，`height: 100%` 的计算方式与现代浏览器有所不同，这导致了在某些...
设置height:100%无效的原因以及两种解决方法
热门推荐
小多的博客
01-04 2万+
原因：我们知道在把盒子宽度自适应为浏览器窗口宽度，只需设置width:100%就可轻松解决问题，但是让盒子的高度自适应浏览窗口的高度并非那么容易，这是因为css内部计算的原因 <!-- 高度实际为字体大小 --> <div class="box" style="width:100%;height:100%;background-color:red;"> width:100%;height:100%; </div> 解决方法一：设置父元素高度 html, bod
css height:100% 为什么不起作用
weixin_35843253的博客
12-14 3423
2. 父元素的高度为百分比值：如果父元素的高度也是以百分比值来设置的，那么它的实际高度将取决于其祖先元素的高度。的确可以设置元素的高度为其父元素的百分比高度。但要注意的是，为了实现这个效果，父元素的高度必须已经通过某种方式设置为一个确定的值，而不是默认的。4. 父元素使用了浮动或绝对定位：如果父元素使用了浮动或绝对定位等布局属性，那么它的高度将会塌缩为0，此时子元素的。1. 没有设置父元素的高度：如果父元素的高度未设置或设置为。3. 父元素的高度为可视窗口高度：如果父元素的高度是。也无法确定正确的高度。
height: 100%
最新发布
2301_78986604的博客
07-01 423
的用法是希望某个元素的高度能够占据其父元素高度的100%。的高度实际上会占据整个视口的高度。
CSS 宽高度百分比数减去固定像素值无效的解决办法（例：100%-60px）
sea9528的博客
07-13 1155
uniapp 想设置列表栏高度不同设备自动切换，结果发现下面这样写没有效果。 //uni-app .item-list { height: calc(100vh-120rpx) ; } 查资料发现 calc（ x - y ） 减号两边要有空格才生效 //uni-app .item-list { height: calc(100vh - 120rpx) ; } ...
css属性设置calc后(动态计算)，不生效的问题
engineer_why的博客
06-12 2273
的左右两边需要空格，，没有空格不生效。为了统一，/ 和 * 最好都带上空格。父元素需设置宽高，若没有可设置100%在书写calc语法时，运算符(
【css】height: 100%无效 不生效的原因及解决办法
hzxOnlineOk的博客
12-20 1704
参考的父级是离它最近的有定位属性的父级而非直接父级（因为脱离文档流了）；参考的依旧是直接父级，无论直接父级是否有定位属性；如果子元素为绝对定位元素，则。
span设CSS样式总是不起作用的解决方法
09-25
然而，有时我们会发现为 `span` 元素设置的 CSS 样式似乎不起作用，这可能给开发过程带来困扰。这个问题的解决方法在于理解 `span` 的本质以及如何正确地应用 CSS 样式。 首先，`<span>` 是一个内联元素（inline ...
关于css中line-height(行高)设置无效的问题的解决方法
12-13
在CSS（层叠样式表）中，`line-height` 是一个非常重要的属性，它用于设置元素内文本行之间的垂直间距。然而，在某些情况下，我们可能会遇到`line-height`设置无效的问题，这通常与CSS的解析顺序和优先级有关。本文...
CSS设置盒子容器(div)高度(height)始终为100%
11-19
然而，直接在CSS中为一个元素（如`div`）设置`height: 100%`并不总是有效，因为这涉及到CSS布局中的层次关系和百分比高度的计算规则。这个问题在描述中已经有所提及，现在我们将深入探讨这个问题，并提供解决方案。 ...
div宽度设置width:100%后再设置padding或margin超出父元素的解决办法
09-28
在传统的CSS2.1盒模型中，元素的宽度和高度只包含内容区，不包括`padding`和`border`。这种模型被称为`content-box`模型。 然而，当`box-sizing`属性设置为`border-box`时，元素的宽度和高度将包括内容区、内边距和...
解决css盒子的height:100%失效问题
weixin_46215920的博客
10-02 1343
解决css盒子的height:100%失效问题 一 问题描述、 我们知道在把盒子宽度自适应为浏览器窗口宽度，只需设置width:100%就可轻松解决问题，但是让盒子的高度自适应浏览窗口的高度并非那么容易，这是因为css内部计算的原因。今天我在做模态框背景覆盖时就遇到了这样的问题。 二 解决方案、 1、网上搜了很多答案，基本上都是只要把html 和 body 也设置成height : 100% 就行了，然并卵。。。 2、然后我看了框架的f12样式，发现只需要盒子中加入css position属性（abslou
为什么设置height:100%有时没有生效的原因
jian091309的博客
04-23 3657
为什么设置height:100%有时没有生效的原因
关于css中height:100%无效的问题
a951593826的博客
10-14 781
做项目的时候想要让一个div块自适应浏览器按比例宽度和高度占据页面左边，css是这样的, .nav-left{ float:left; width:15%; height:100%; } 结果发现，给边框加上颜色，发现是空白的，也就是说width和height都没有生效。 但是如果给这个div块加上内容，比如说加上背景...
div设置height:100%;无效的原因
weixin_34112208的博客
10-18 879
2019独角兽企业重金招聘Python工程师标准>>> ...
解决css中height:100%失效的问题
王维璋
07-01 1万+
关于css得height：100%; 不生效问题； 今天在做项目的时候突然遇到height:100%；无效，但是写上固定高度就好使。 解决方法： 1、html, body { height: 100%; } 2、div { height: 100%; position: absolute; } 前提是，父元素要设置宽高，并且position:relative/absolute....
table和div设置height:100%无效的完美解决方法
weixin_30652879的博客
03-18 1063
刚接触网页排版的新手，常出现这种情况：设置table和div的高height="100%"无效，使用CSS来设置height:"100%"也无效，为什么会这样呢？解决height:100%无效，table和div的解决方法并不相同。 首先说一下table，他比较容易解决，当我们使用Dreamweaver来制作网页，新建一张网页，通常在代码头部会有类似以下的代码：<!DOCTYPE ht...
css height: 100%；失效
weixin_42220130的博客
06-14 1004
body{ height：100% }
CSS--DIV height:100%无效的解决办法
每一件自己觉得值得的事都要不留余力的去做
07-06 6612
在设置DIV高度的时候，会用到一个height:100%的大小，来让div撑满浏览器高度。但是我们会发现，直接在div中写上“style:”height:100%;””是无效的。那么如何才能让div的css height:100%生效呢？解决办法很简单……在设置DIV高度的时候，会用到一个height:100%的大小，来让div撑满浏览器高度。但是我们会发现，直接在div中写上“style:”hei
.logo_0{ top: 0px; left: 0px; width: 100%; height: 10%; position: relative; } .logo_0::before { content: ""; display: block; padding-top: 100%; } .logo_0 img{ width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; }哪里有问题导致图片上有一个空白
07-15
为了解决这个问题，你可以尝试将 `::before` 伪元素的样式移动到 `.logo_0 img` 的样式中。这样，图片将填充整个 `.logo_0` 元素的空间，避免出现空白。 以下是修改后的代码示例： ```css .logo_0 { top: 0px; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值