table和div设置height:100%无效的完美解决方法

刚接触网页排版的新手，常出现这种情况：设置table和div的高height="100%"无效，使用CSS来设置height:"100%"也无效，为什么会这样呢？解决height:100%无效，table和div的解决方法并不相同。

首先说一下table，他比较容易解决，当我们使用Dreamweaver来制作网页，新建一张网页，通常在代码头部会有类似以下的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
没错，你猜对了，问题就出在这里，你试着把这短代码删除，然后再刷新一下网页，你就会看到所有table以你的设置height="100%"的展示！
这段代码是告诉浏览器你的网页是遵循什么标准的，如上面的“W3C”标准，删除掉一般是不影响的。
下面说一下div，div和table一样，如果要实现width:100%是很容易的，但要div的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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试</title>
</head>
<body>
<div style="height:100%"></div>
</body>
</html>
就算和Table一样去掉头部的那段代码也不能100%显示，原因很简单，你让div的height="100%"，执行网页时，css先执行到，而整个网页中的内容还没有完全载入，是获取不到div外面的<body>等的高度的，所以height="100%"也就不能如愿显示了。加上
body{height:100%}
就轻松解决啦，一开始就让body以100%显示，他的下级div自然就100%的，不过对于FF浏览器还应该把HTML也先给height:100%，即
html,body{height:100%}
这样div就听话了：D

你可能感兴趣的:(height)

  • CSS让div层悬浮在最上方 昨夜今夕 CSS
    效果如下：这里是使得一张div里面的图片悬浮在了地图的上方，css代码如下.tl{width:240px;height:193px;position:absolute;/*这里一定要设置*/z-index:999999;/*这里是该元素与显示屏的距离，据说越大越好，但是我也没有看到效果，因为没有它也是可以的*/margin-top:20%;margin-left:-209px;background
  • 如何设置角标或者标签 z遥不可及 前端htmljavascript
    .tagRight{display:inline-block;height:20px;width:200px;background:#f00;text-align:center;margin-top:40px;margin-left:-45px;text-decoration:none;color:#fff;-webkit-transform:rotate(-45deg);-moz-transfo
  • python 词云示例 布道天下 python
    python词云示例以2021年中央1号文件和政府工作报告文件为例，输出50个关键词。#testPython.pyimportjiebaimportwordclouddefoutputWordCloud(text,outPngName):#配置词云对象参数temp=wordcloud.WordCloud(width=1000,height=1000,font_path="msyh.ttc",max
  • 水平垂直居中的几种方法（总结） LJ小番茄 CSS_玄学语言htmljavascript前端csscss3
    1.使用flexbox的justify-content和align-items.parent{display:flex;justify-content:center;/*水平居中*/align-items:center;/*垂直居中*/height:100vh;/*需要指定高度*/}2.使用grid的place-items:center.parent{display:grid;place-item
  • python tif转png Python与遥感 python开发语言
    importosfromosgeoimportgdalimportnumpyasnpfromPILimportImage#提取432三波段fromspectralimport*#输入文件夹路径defget_img(dataset_img):width=dataset_img.RasterXSize#获取行列数height=dataset_img.RasterYSizebands=dataset_i
  • 03-Cesium自定义着色器完整代码以及注释 fxshy 着色器javascript
    1.效果展示2.完整代码自定义着色器完整代码#map{position:absolute;width:100%;height:100%;top:0;left:0;right:0;bottom:0;}Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhZjZkZDAwZC1mNTFhLTRhO
  • uniapp使用内置地图选择插件，实现地址选择并在地图上标点 神夜大侠 Uniappvue.jsuniapp
    uniapp使用内置地图选择插件，实现地址选择并在地图上标点代码如下：page{background:#F4F5F6;}::-webkit-scrollbar{width:0;height:0;color:transparent;}page{height:100%;width:100%;font-size:24rpx;}image,view,input,textarea,label,text,na
  • 8 冰鈊夢
    transition动画transform.box{width:200px;height:200px;background-color:gold;margin:50pxauto0;transition:all1sease;}.box:hover{transform:translate(50px,50px);}.box2{width:200px;height:200px;background-col
  • leetcode 11. 盛最多水的容器 Source_Chang
    leetcode核心思想：双指针，数字小的那个指针移动classSolution{public:intmaxArea(vector&height){intleft=0;intright=height.size()-1;intmaxArea=0;while(left
  • css2中的透明 琪33
    .out{width:400px;height:400px;background-color:blue;margin:100pxauto;border:1pxsolid#000;opacity:0.6;}.in{width:200px;height:200px;background-color:red;margin:100pxauto;}
  • C++深拷贝构造函数解决浅拷贝的堆区内存重复释放问题 程序猿练习生 c++c++
    1.简单介绍先简单介绍一下浅拷贝和深拷贝：浅拷贝->简单的赋值拷贝操作，默认的拷贝构造函数就是浅拷贝。深拷贝->在堆区重新申请空间，进行拷贝操作。2.问题展示下面用代码示例明了地展示默认拷贝构造函数浅拷贝带来地堆区内存重复释放问题：#includeusingnamespacestd;classPerson{public:intm_Age;int*m_Height;public:Person(){c
  • 【LeetCode 算法笔记】84. 柱状图中最大的矩形 Sardar_ 算法leetcode笔记
    目录问题描述暴力求解：栈问题描述给定n个非负整数，用来表示柱状图中各个柱子的高度。每个柱子彼此相邻，且宽度为1。求在该柱状图中，能够勾勒出来的矩形的最大面积。示例1:输入：heights=[2,1,5,6,2,3]输出：10解释：最大的矩形为图中红色区域，面积为10示例2：输入：heights=[2,4]输出：4提示：1int:area=0n=len(heights)foriinrange(n):
  • 一串奇特的代码 hi武林高手
    一个空的div元素，所有浏览器的渲染结果都不一样。body{display:table-cell;vertical-align:middle;//垂直居中}div{margin:atuo;height:100px;width:100px;outline:inset100pxgreen;//设置4个边框的样式outline-offset:-125px;//对轮廓进行偏移}html{display：t
  • 【LINUX】SHELL贪吃蛇 缘起性本空 java前端服务器
    MapHeight=19MapWidth=17SnakeLength=3SnakeX=(234)SnakeY=(555)MoveDirection="Right"Food=(714)Map=(11111111111111111119100000000000000000191000000000000000001910000000000000000019100000000000000000191000
  • javascript添加p元素，html添加文字，appendChild 游勇一 javascripthtml添加pappendChild
    javascript添加p元素，html添加文字，appendChild。网页添加p元素效果截图。个人签名：游志勇，预制板，南托岭预制场。文字展示#wordsadd{font-size:70px;word-break:break-all;}#wordsaddp{margin:002px0;padding:002px0;line-height:93%;}.btn_width{width:90px;}
  • OpenGL之基础纹理一 我的大好时光
    先看下效果图：纹理效果图.pngDemo下载地址：点击下载一、像素图像的数据包装图像存储空间=图像width*图像height*每个像素的字节数ps：有一张RGB的图像（每个颜色通道8位），图像的宽度199个像素，每行需要存储多少空间？解：8位为一个字节，有三个颜色，所以一个RGB需要3个字节存储。199（width）*1（height）*3(字节)二、像素的存储方式/**@parampname:
  • css鼠标移上去向上移动,css3鼠标移动图片上移效果 yo xiba css鼠标移上去向上移动
    css3的功能真是很强大，学无止境，不多说，直接上代码css部分：*{margin:;padding:;}.text-center{text-align:center}.col_cont{width:300px;height:300px;margin:auto}.thumbnail{cursor:pointer;text-decoration:none;display:block;padding:
  • css3实现鼠标放到图标上自动切换图标 黄丫丫07 csscss3html
    作业div{font-family:'icomoon';width:1217px;height:1217px;background:url(images/1.jpg)no-repeat00;transition:all.2s;}div:hover{background:url(images/1.jpg)no-repeat-1200px0;}
  • CSS实现鼠标移动到购物车显示详情 AsiaFT. csscss3html
    需求：鼠标滑动到购物车时，购物车下面显示购物车详情信息解析：清除所有默认样式：{margin:0;padding:0;}2.CSS3新增属性：box-sizing:border-box;这个属性基本盒子都增加该属性；代码：鼠标划过显示购物车详情/*清除所有默认样式*/*{margin:0;padding:0;}.shoppingcart{/*css3新增属性，控制WIDTH和HEIGHT属性是盒子
  • el-dialog高度设置 夏之小星星 前端vue.jselementuicss
    el-dialog高度设置::v-deep.el-dialog{height:78vh;overflow:auto;}
  • C++ 判断点否在矩形内部，矩形与矩形是否相交 好学松鼠 C++c++
    1、判断点是否在矩形内部boolpointInRect(Point2fpt,Rectrect){if((pt.x>rect.x)&&(pt.y>rect.y)&&(pt.x=x3&&x1=x1&&x3=y3&&y1=y1&&y3out.x&&in.y>out.y&&in.x+in.width
  • 【C语言编程】【小游戏】【俄罗斯方块】 星毅要努力 c语言开发语言学习游戏
    #include#include#include#include#include#include#defineWIDTH12#defineHEIGHT18#defineBUFFER_WIDTH(WIDTH*2+20)#defineBUFFER_HEIGHT(HEIGHT+2)charfield[HEIGHT][WIDTH]={0};intscore=0;charbuffer[BUFFER_HEIG
  • CSS截取字符串，多余文字用省略号显示 这真的是一个帅气的名字
    line-height:30px;text-align:center;text-overflow:ellipsis;/*让超出的用...实现*/white-space:nowrap;/*禁止换行*/overflow:hidden;/*超出的隐藏*/display:block;多行：border:1pxsolid#ddd;width:200px;word-break:break-all;text-o
  • python有趣游戏代码大全 uolo_python 游戏
    一.贪吃蛇运行以下代码，将会弹出一个窗口显示贪吃蛇游戏。你可以使用箭头键控制贪吃蛇的移动。吃到食物后蛇的长度会增加，如果蛇触碰到边界或者自己则游戏结束。按下Q键退出游戏，按下C键重新开始游戏。importpygameimportrandom#初始化pygame.init()#设置游戏窗口window_width,window_height=640,480window=pygame.display.
  • transform-origin设置变形中心点 每一天，每一步 HTML/CSShtmlcsscss3
    HTML代码：CSS代码：.box{width:100px;height:100px;background-color:purple;margin-left:150px;transition:all.5s;/*transform-origin:center;默认盒子的正中心为旋转中心点*//*transform-origin:left;设置左边线中心点为旋转中心点*//*transform-ori
  • div盒子垂直居中的3种方法 每一天，每一步 HTML/CSShtmlcss
    初始HTML代码如下：初始CSS代码如下：.father{width:300px;height:300px;background-color:pink;margin:20pxauto;}.son{width:100px;height:100px;background-color:blue;}初始效果图如下：垂直居中方法如下：使用子盒子与父盒子的外边距margin控制垂直方向位置.father{ov
  • CSS 元素超出部分滚动, 并隐藏滚动条（2种方法） 就像风1样 cssCSS样式专栏css溢出滚动隐藏滚动条
    方法一,利用css3的新特性-webkit-scrollbar,但是这种方式不兼容火狐和IE超出部分隐藏滚动条#box{width:500px;height:300px;overflow-x:hidden;overflow-y:scroll;line-height:30px;text-align:center;}#box::-webkit-scrollbar{display:none;}你好你好你
  • 微信小程序仿微信聊天界面 微特尔普拉斯 微信小程序微信notepad++
    界面结构:消息列表:使用scroll-view实现滚动，每条消息使用view组件包裹，根据消息类型(文本、图片、文件)显示不同内容。输入框区域:包含输入框(textarea)、发送按钮(button)和上传文件按钮(view组件模拟)。头像:使用image组件展示。功能实现:多行输入框高度自适应:使用textarea组件的auto-height属性，并监听linechange事件动态调整高度。消息
  • echarts象形渐变柱状图 星星跌入梦境* echartsangular.js前端
    一、效果图如下：二、代码如下（1）父组件importitemfrom'../bigdata/components/item.vue'exportdefault{components:{item}}.page-con{width:100%;height:100%;.main-con{width:35%;height:33%;}}（2）子组件importechartsfrom"echarts";exp
  • C# 在WPF中实现图表生成 A_nanda WPF赏析c#wpf开发语言
    在现代应用程序中，数据可视化是一个重要的功能，它可以帮助用户更直观地理解数据。在C#WPF（WindowsPresentationFoundation）中，有多种方式可以生成图表。以下是五种常见的方法，每种方法都有其独特的优势和局限。1.使用System.Windows.Shapes命名空间代码示例：<RectangleWidth="50"Height="50"Fill="Blue"Canva
  • mondb入手 木zi_鸣 mongodb
    windows 启动mongodb  编写bat文件， mongod --dbpath D:\software\MongoDBDATA mongod --help  查询各种配置 配置在mongob 打开批处理，即可启动，27017原生端口，shell操作监控端口  扩展28017，web端操作端口 启动配置文件配置， 数据更灵活 
  • 大型高并发高负载网站的系统架构 bijian1013 高并发负载均衡
            扩展Web应用程序 一.概念         简单的来说，如果一个系统可扩展，那么你可以通过扩展来提供系统的性能。这代表着系统能够容纳更高的负载、更大的数据集，并且系统是可维护的。扩展和语言、某项具体的技术都是无关的。扩展可以分为两种：         1.
  • DISPLAY变量和xhost(原创) czmmiao display
    DISPLAY 在Linux/Unix类操作系统上, DISPLAY用来设置将图形显示到何处. 直接登陆图形界面或者登陆命令行界面后使用startx启动图形, DISPLAY环境变量将自动设置为:0:0, 此时可以打开终端, 输出图形程序的名称(比如xclock)来启动程序, 图形将显示在本地窗口上, 在终端上输入printenv查看当前环境变量, 输出结果中有如下内容:DISPLAY=:0.0
  • 获取B/S客户端IP 周凡杨 java编程jspWeb浏览器
       最近想写个B/S架构的聊天系统，因为以前做过C/S架构的QQ聊天系统，所以对于Socket通信编程只是一个巩固。对于C/S架构的聊天系统，由于存在客户端Java应用，所以直接在代码中获取客户端的IP，应用的方法为：    String ip = InetAddress.getLocalHost().getHostAddress(); 然而对于WEB
  • 浅谈类和对象 朱辉辉33 编程
        类是对一类事物的总称，对象是描述一个物体的特征，类是对象的抽象。简单来说，类是抽象的，不占用内存，对象是具体的， 占用存储空间。     类是由属性和方法构成的，基本格式是public  class 类名{ //定义属性 private/public 数据类型 属性名； //定义方法 publ
  • android activity与viewpager+fragment的生命周期问题 肆无忌惮_ viewpager
    有一个Activity里面是ViewPager，ViewPager里面放了两个Fragment。 第一次进入这个Activity。开启了服务，并在onResume方法中绑定服务后，对Service进行了一定的初始化，其中调用了Fragment中的一个属性。 super.onResume(); bindService(intent, conn, BIND_AUTO_CREATE);
  • base64Encode对图片进行编码 843977358 base64图片encoder
    /** * 对图片进行base64encoder编码 * * @author mrZhang * @param path * @return */ public static String encodeImage(String path) { BASE64Encoder encoder = null; byte[] b = null; I
  • Request Header简介 aigo servlet
    当一个客户端(通常是浏览器)向Web服务器发送一个请求是，它要发送一个请求的命令行，一般是GET或POST命令，当发送POST命令时，它还必须向服务器发送一个叫“Content-Length”的请求头(Request   Header)   用以指明请求数据的长度，除了Content-Length之外，它还可以向服务器发送其它一些Headers，如：    
  • HttpClient4.3 创建SSL协议的HttpClient对象 alleni123 httpclient爬虫ssl
    public class HttpClientUtils { public static CloseableHttpClient createSSLClientDefault(CookieStore cookies){ SSLContext sslContext=null; try { sslContext=new SSLContextBuilder().l
  • java取反 -右移-左移-无符号右移的探讨 百合不是茶 位运算符 位移
    取反： 在二进制中第一位，1表示符数，0表示正数 byte a = -1; 原码：10000001 反码：11111110 补码：11111111 //异或: 00000000 byte b = -2; 原码：10000010 反码：11111101 补码：11111110 //异或: 00000001
  • java多线程join的作用与用法 bijian1013 java多线程
            对于JAVA的join，JDK 是这样说的：join public final void join （long millis ）throws InterruptedException Waits at most millis milliseconds for this thread to die. A timeout of 0 means t
  • Java发送http请求(get 与post方法请求) bijian1013 javaspring
    PostRequest.java package com.bijian.study; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOException; import java.io.InputStreamReader; import java.net.HttpURL
  • 【Struts2二】struts.xml中package下的action配置项默认值 bit1129 struts.xml
    在第一部份，定义了struts.xml文件，如下所示：   <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts
  • 【Kafka十三】Kafka Simple Consumer bit1129 simple
    代码中关于Host和Port是割裂开的，这会导致单机环境下的伪分布式Kafka集群环境下，这个例子没法运行。 实际情况是需要将host和port绑定到一起，   package kafka.examples.lowlevel; import kafka.api.FetchRequest; import kafka.api.FetchRequestBuilder; impo
  • nodejs学习api ronin47 nodejs api
    NodeJS基础 什么是NodeJS JS是脚本语言，脚本语言都需要一个解析器才能运行。对于写在HTML页面里的JS，浏览器充当了解析器的角色。而对于需要独立运行的JS，NodeJS就是一个解析器。 每一种解析器都是一个运行环境，不但允许JS定义各种数据结构，进行各种计算，还允许JS使用运行环境提供的内置对象和方法做一些事情。例如运行在浏览器中的JS的用途是操作DOM，浏览器就提供了docum
  • java-64.寻找第N个丑数 bylijinnan java
    public class UglyNumber { /** * 64.查找第N个丑数 具体思路可参考 [url] http://zhedahht.blog.163.com/blog/static/2541117420094245366965/[/url] * 题目：我们把只包含因子 2、3和5的数称作丑数（Ugly Number）。例如6、8都是丑数，但14
  • 二维数组（矩阵）对角线输出 bylijinnan 二维数组
    /** 二维数组 对角线输出 两个方向 例如对于数组： { 1, 2, 3, 4 }, { 5, 6, 7, 8 }, { 9, 10, 11, 12 }, { 13, 14, 15, 16 }, slash方向输出： 1 5 2 9 6 3 13 10 7 4 14 11 8 15 12 16 backslash输出： 4 3
  • [JWFD开源工作流设计]工作流跳跃模式开发关键点(今日更新) comsci 工作流
       既然是做开源软件的,我们的宗旨就是给大家分享设计和代码,那么现在我就用很简单扼要的语言来透露这个跳跃模式的设计原理    大家如果用过JWFD的ARC-自动运行控制器,或者看过代码,应该知道在ARC算法模块中有一个函数叫做SAN(),这个函数就是ARC的核心控制器,要实现跳跃模式,在SAN函数中一定要对LN链表数据结构进行操作,首先写一段代码,把
  • redis常见使用 cuityang redis常见使用
    redis 通常被认为是一个数据结构服务器，主要是因为其有着丰富的数据结构 strings、map、 list、sets、 sorted sets 引入jar包 jedis-2.1.0.jar  (本文下方提供下载) package redistest; import redis.clients.jedis.Jedis; public class Listtest
  • 配置多个redis dalan_123 redis
    配置多个redis客户端 <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"       xmlns:xsi=&quo
  • attrib命令 dcj3sjt126com attr
      attrib指令用于修改文件的属性.文件的常见属性有:只读.存档.隐藏和系统.    只读属性是指文件只可以做读的操作.不能对文件进行写的操作.就是文件的写保护.    存档属性是用来标记文件改动的.即在上一次备份后文件有所改动.一些备份软件在备份的时候会只去备份带有存档属性的文件. 
  • Yii使用公共函数 dcj3sjt126com yii
    在网站项目中，没必要把公用的函数写成一个工具类，有时候面向过程其实更方便。 在入口文件index.php里添加 require_once('protected/function.php'); 即可对其引用，成为公用的函数集合。 function.php如下：   <?php /**   * This is the shortcut to D
  • linux 系统资源的查看（free、uname、uptime、netstat） eksliang netstatlinux unamelinux uptimelinux free
    linux 系统资源的查看 转载请出自出处：http://eksliang.iteye.com/blog/2167081   http://eksliang.iteye.com 一、free查看内存的使用情况 语法如下：   free [-b][-k][-m][-g] [-t] 参数含义 -b:直接输入free时，显示的单位是kb我们可以使用b(bytes),m
  • JAVA的位操作符 greemranqq 位运算JAVA位移<<>>>
    最近几种进制，加上各种位操作符，发现都比较模糊，不能完全掌握，这里就再熟悉熟悉。   1.按位操作符 ：    按位操作符是用来操作基本数据类型中的单个bit,即二进制位，会对两个参数执行布尔代数运算，获得结果。    与（&）运算：    1&1 = 1, 1&0 = 0, 0&0 &
  • Web前段学习网站 ihuning Web
      Web前段学习网站 菜鸟学习：http://www.w3cschool.cc/   JQuery中文网：http://www.jquerycn.cn/   内存溢出：http://outofmemory.cn/#csdn.blog   http://www.icoolxue.com/   http://www.jikexue
  • 强强联合：FluxBB 作者加盟 Flarum justjavac r
    原文：FluxBB Joins Forces With Flarum作者：Toby Zerner译文：强强联合：FluxBB 作者加盟 Flarum译者：justjavac FluxBB 是一个快速、轻量级论坛软件，它的开发者是一名德国的 PHP 天才 Franz Liedke。FluxBB 的下一个版本(2.0)将被完全重写，并已经开发了一段时间。FluxBB 看起来非常有前途的，
  • java统计在线人数（session存储信息的） macroli javaWeb
    这篇日志是我写的第三次了 前两次都发布失败！郁闷极了！   由于在web开发中常常用到这一部分所以在此记录一下，呵呵，就到备忘录了！ 我对于登录信息时使用session存储的，所以我这里是通过实现HttpSessionAttributeListener这个接口完成的。 1、实现接口类，在web.xml文件中配置监听类，从而可以使该类完成其工作。 public class Ses
  • bootstrp carousel初体验 快速构建图片播放 qiaolevip 每天进步一点点学习永无止境bootstrap纵观千象
    img{ border: 1px solid white; box-shadow: 2px 2px 12px #333; _width: expression(this.width > 600 ? "600px" : this.width + "px"); _height: expression(this.width &
  • SparkSQL读取HBase数据，通过自定义外部数据源 superlxw1234 sparksparksqlsparksql读取hbasesparksql外部数据源
    关键字：SparkSQL读取HBase、SparkSQL自定义外部数据源     前面文章介绍了SparSQL通过Hive操作HBase表。   SparkSQL从1.2开始支持自定义外部数据源(External DataSource)，这样就可以通过API接口来实现自己的外部数据源。这里基于Spark1.4.0，简单介绍SparkSQL自定义外部数据源，访
  • Spring Boot 1.3.0.M1发布 wiselyman spring boot
        Spring Boot 1.3.0.M1于6.12日发布，现在可以从Spring milestone repository下载。这个版本是基于Spring Framework 4.2.0.RC1,并在Spring Boot 1.2之上提供了大量的新特性improvements and new features。主要包含以下：   1.提供一个新的sprin
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他