【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" content="text/html; charset=utf-8">
<style type="text/css">
*{ margin:0; padding:0;}
html,body{ padding:0; margin:0; height:100%;}  //必须html,body一起写。单独写body只有ie6可行。
#container{ height:100%; background-color:#0F0;}
</style>
</head>
<body><div id="container"><h1>100% Height Demo</h1><p>内容内容内容内容</p>
</div></body></html>

此demo可实现container撑满浏览器的高度

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

时间: 2024-10-28 10:38:56

【css】容器撑满浏览器--- height:100%的相关文章

关于height:100%

要想高度百分比起作用,一般来说,要满足两个条件:其一,父标签有高度可寻,就是向上遍历父标签要找到一个定值高度(body,html另外讨论),如果中途有个height为auto或是没有设置height属性,则高度百分比不起作用:其二,标签本身的属性,如果inline属性的标签,如果没有浮动,zoom,或是绝对定位之类属性是不支持百分比高度的,block或inline-block属性可以说是高度百分比起作用的前提条件之一吧.而这里要讲的是关于body和html的高度百分比显示的.默认状态下,body

height:100%不起作用怎么办

height:100%不起作用怎么办: 有时候给一个元素设置height:100%,希望能够实现高度自适应,但是往往不能够实现我们的效果. 下面先看一个例子: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.51texiao.cn/" /> <t

【css】float:left不撑满容器与opacity将子元素透明demo

<!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" xml:lang="en"> <head> <meta h

让div撑满整个屏幕的方法(css)

在body只有一个div的时候,可以通过这样的方式让div撑满整个屏幕. 1.给div设置定位. 复习一下-- css中position有五种属性: static:默认值,没有定位 absolute:绝对定位,相对于父级元素进行定位 relative:相对定位 fixed:固定定位,相对于浏览器窗口进行定位 inherit:从父元素继承定位信息 除了默认值static和inherit之外,添加其他三种都可以实现窗口自适应. 代码如下: 1 <style> 2 *{ 3 margin: 0; 4

固定大小容器内,不同比例的图片高度撑满,宽度居中裁剪

在一个商品展示列表中,一个需求是在一个正方形的方块中,按原比例展示商品图片,但是图片比例不定,需要居中显示,高度撑满,宽度多余的隐藏. 结构: imgOuter是固定容器,宽高都是120px: CSS代码: .imgOuter{ width: 120px; height: 120px; border-radius: 10px; overflow: hidden; border: 1Px solid #d7d7d7; position: relative; z-index: 1; } img居中显

CSS 布局_如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?

实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 要实现这样一个布局,我们首先需要如下的 HTML: <div id="float-container"> <div class="float-element"></div> <div class="float-element"></div> <div class="float-elem

CSS 布局实例系列(四)如何实现容器中每一行的子容器数量随着浏览器宽度的变化而变化?

Hello,小朋友们,还记得我是谁吗?对了,我就是~超威~好啦,言归正传,今天的布局实例是: 实现一个浮动布局,红色容器中每一行的蓝色容器数量随着浏览器宽度的变化而变化,就如下图: 肯定有人心里犯嘀咕了,哈~这么简单,不就是全部左浮动嘛,这也好意思拿出来讲?别急啊,其实里面的坑还是挺多的,且待我一个个填上. 要实现这样一个布局,我们首先需要如下的 HTML: <div id="float-container"> <div class="float-eleme

关于块级元素撑满整个浏览器窗口

我们经常会需要将一个块级元素设置大小让它显示在页面中,最常用的就是设置具体的值. 例如在页面上显示一个粉色背景的像素为200px*200px的方形 ... #mydiv{ width:200px; height:200px; background-color:pink } ... <div id="mydiv"></div> ... 如果想让该div撑满整个浏览器窗口呢? 1.获取窗口的大小,然后再将值赋给改div的宽和高.(可以用javascript实现) 2

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

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