css height:100% 为什么失效

在网页设计中，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/my2018/p/10263026.html

时间： 2024-10-07 06:27:15

css height:100% 为什么失效的相关文章

CSS难点 为什么height设置100%会失效，分栏目等高布局(高度自适用布局)的实现方案

前言 相信在平时写CSS的时候大家都或多或少遇见过设置了height为百分比的时候发现不起作用.今天我们就来一探究竟 原因:父元素未设置具体高度,子元素设置height:100%是无效的. 现象以及方案 [1] 设置高度为100%时,无法实现全屏 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> .case-box{

css top,right,bottom,left设置为0有什么用？它和width:100%和height:100%有什么区别？

 壹 ? 引 当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论.  贰 ? 关于top left right bottom position定位属性大家都不会陌生,添加position属性的元素可以定位,而top,left,right,bottom属性决定元素定位后所在的位置,而在使用定位属性需要注意两点: 第一点,top,left此类定位属性只对添加了pos

height:100%失效

height明明设置了100% 为什么却看不到效果.很多时候在基础不是很扎实的时候,经常会遇到这样的问题,究其原因其实简单 首先你要确保 html{height:100%;} body{height:100%;} 这样的话,在加载页面时,会获取设置页面的高度为可视窗口的高度,即100%:这样去设置子层级时,才能获取达到你想要的高度值 height:100%失效

【css】容器撑满浏览器--- height:100%

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>100% Height CSS</title> <meta http-equiv="Content-Type" cont

纯CSS 实现DIV 高度 height 100% 全屏布局

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <style type="text/css"> *{ margin: 0; padding:0;

flex引起height:100%失效

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-8" /> <style> * { margin: 0; padding: 0; b

CSS高度自适应 height:100%;

在初次尝试高度自适应时都会遇到这样的问题: 对象的heith:100%; 并不能直接产生实际效果 为什么呢?之所以没有效果,与浏览器的解析方式有一定关系,查看下面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>一列布局</title> <style> html, body { margin: 0; padding: 0; wi

CSS中元素的height:100%如何起作用的？自适应高度

Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度.如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度.而当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 答: 高度的计算方式完全不一样.事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现).或者你给整个页面设置一个绝对高度.否则,浏览器就会简单的让内容往下堆砌

如何使CSS中height:100% 起作用

1.按照w3c中的width和height属性,可以明确%设定宽高是根据父元素的宽高来的: 2.Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度.如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度.即我们不设置宽,会自动填满整个横向宽度,因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度. 解决方案: html,body{ height: 100%; margin: 0; padding: 0;