后使用快捷导航没有帐号？
只需一步，快速开始
查看: 25934|回复: 7
请问怎么设置DIV满屏显示？
UID517858在线时间 小时积分155帖子离线17540 天注册时间
初级会员, 积分 155, 距离下一级还需 45 积分
DOM结构如下：
body&div.bg&div.bg-inner
想把 div.bg 和 div.bg-inner 都设置为满屏，然后
div.bg 设置一个垂直渐变的颜色
div.bg-inner 给背景添加一个 PNG 小图，增加背景纹理。
找了一下，满屏基本是这样写 CSS 的：
div.bg-inner {
& & height: 100%;
但这样设置会有一个问题：
当页面出现滚动条的时候，背景颜色并不会占满整个 body，只是占满可视区域而已，
请朋友们指点一下，谢谢。
UID494384在线时间 小时积分8062帖子离线17540 天注册时间
露珠可否贴出你的代码？
&!DOCTYPE html&
&meta charset=&utf-8& /&
&title&test&/title&
&style type=&text/css&&
margin: 0;
padding: 0;
html, body {
height: 100%;
background: # /* Old browsers */
background: -moz-linear-gradient(top, #eeeeee 0%, #9e9e9e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #9e9e9e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #eeeeee 0%, #9e9e9e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #eeeeee 0%, #9e9e9e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #eeeeee 0%, #9e9e9e 100%); /* IE10+ */
background: linear-gradient(to bottom, #eeeeee 0%, #9e9e9e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#9e9e9e', GradientType=0 ); /* IE6-9 */
padding: 8% 25%;
background: url(http://31.media.tumblr.com/1f9b43cf68cbe26c6f79f7226cb3cfa7/tumblr_montqvr6NX1s7mbrqo1_500.png) no-repeat center -10%;
.test h1 {
text-align:center
.test h3 {
margin-top:30
line-height: 2.5
text-indent: 2
line-height: 2
&div class=&wrap&&
&div class=&test&&
&h1&太极&/h1&
&h3&名词由来&/h3&
&p&太极是中国思想史上的重要概念，初见于《易传》：“易有太极，是生两仪。两仪生四象，四象生八卦。”与八卦有着非常密切的联系。
东周末年的《易系辞传》（西汉马王堆出土版本）记载有“古者伏羲氏之王天下也，仰则观象于天，俯则观法于地，观鸟兽之文与地之宜，近取诸身，远取诸物，于是始作八卦”的内容，意思易成卦的过程，先是有太极，尚未开始分开蓍草(易占卜用蓍草做工具)，分蓍占后，便形成阴阳二爻，称做两仪。二爻相加，有四种可能的形象，称为四象。由它们各加一爻，便成八卦。这里讲的是八卦画出的过程。原与天文气象及地区远近方向相关，后来被宋代的理学家以哲理方式进一步阐释。&/p&
&p&太极拳转变是从功夫演变而来，最早时候没有武术、也是李小龙先生打出了亚洲，太极拳也早期曾称为“长拳”、“绵拳”、“十三势”、“软手”。清朝乾隆年间，山西人王宗岳著《太极拳论》，才确定了太极拳的名称。“太极”一词 源出《周易。系词》：“易有太极，是生两仪。”含有至高、至极、绝对、唯一之意。&/p&
&h3&什么是太极&/h3&
&p&太极。中国古代哲学用以说明世界本原的范畴，“太极”一词，出于《周易·系辞上》。“易有太极，是生两仪，两仪生四象，四象生八卦。”太，即大；极，指尽头，极点。物极则变，变则化，所以变化之源是太极。&/p&
&p&关于太极的含义，有以下几种解释：&/p&
&p&（1）指宇亩最初浑然一体的元气。唐颖达《周易正义》：“太极谓天地未分之前，元气混而为一。”《易纬·乾凿度》认为“有形生于无形”，提出“有太易，有太初，有太始，有太素”四阶段来解释“易有太极”。以未见气时为太易，气初为太初，形之始为太始，质之始为太素。气形质混然一体而未分离的状态，称之为浑沌。浑沌之物即是古人所说的元气。以元气未分状态为太极，斌以其原始物质的含义。这种观点在两汉较为普遍，如刘歆：“太极中央元气”；王充引易学家的话说：“元气未分，混沌为一”。郑玄则以“淳合未分之气”解释大极。&/p&
&p&（2）以虚无本体为太极，如王弼解释“大衍之数，其一不用”说“不用而用以之道，非数而数以之成，斯易之太极也。”以“一”为太极，认为此“一”不是数，而是“无”, “无”为四十九之策数形成的根据。韩康伯注释“易有太极，是生两仪”说：“夫有必始于无，故太极生两仪也。&&/p&
&p&（3）大衍之数的四十九数未分为太极。崔憬说：“四十九数合而未分，是象太极也。今分而为二，以象两仪矣。分揲其蓍，皆以四为数。一策一时故四策以象四时也。”（李鼎祚《周易集解》引，据《黄氏逸书考》本）崔憬对大衍之数的论述及其太极说，不以不用之一为虚无实体，以四十九数未分为大极，并且认为八卦涵蕴在大衍之数中。此种观点，在易学哲学史上有其重要意义，为宋易将汉易的宇宙生成论转为本体论提供了方法。&/p&
&p&（4）以阴阳混合未分为太极。周敦颐《太极图说》：“无极而太极，太极动而生阳，动极而静，静而生阴，静极复动，一动一静，互为其根，分阴分阳。两仪立焉。”周敦颐以后，对太极的解释分为三大流派。a、以邵雍为代表，以数说大极。指出“太极一也，不动生二，神也”；以一分而为奇偶解释太极生两仪。并认为在人则“心为大极”，在天地则“道为太极。”b、以朱熹为代表，以理说太极。“极是道理之极至，总天地万物之理便是太极。”（《朱子太极图说解》）“太极者，其理也。&（《周易本义·系辞上》）太极乃天地万事万物之理的总和，而在具体的事物中也有太极之理。故曰：“人人有一太极，物物有一太极。”（《朱子语类》）c、以张载“一物而两体，其大极之谓与？”为代表，认为无有阴阳，其合一则变化莫测，其对立则相互推移，以此说明太极乃天地万物运动变化的根源。王夫之阐发张载的学说，坚持以对立统一观说太极。断言太极和两仪是体用关系，非父子关系。并认为太极为阴阳二气合一的实体，此实体自身具有运动的本性和变化规律。且寓于天地万物之中，一切现象都是此阴阳统一体不同的表现形式，发挥了以“太和之气”为世界本原的思想。&/p&
&p&（5）太极也指：“一阴一阳之谓道” 也正是对太极的解释。那么何为道呢，指天道，地道，人道。万事万物都有两面，并且不断的变化，也有一定的关联。天道，地道大家根据科学已经证明并且好理解。关键是人道，人道又主要就是指思想，思想决定了行为，态度。讲的也是大家在尊重自己的思想，尊重自然规律。学会控制情绪，如不生恶念，不怕恶念。探求正确的方法才是我们应该努力。&/p&
&h3&道家中的太极&/h3&
&p&太极在道家中一般是指宇宙最原始的秩序状态，出现于阴阳未分的混沌时期（无极）之后，而后形成万物（宇宙）的本源。比较早使用“太极”概念的，有庄子和《易传》，一般在宇宙论、方法论上用的太极概念，在中国的典籍中，《易》素来是作为穷尽天地奥秘的哲理书，对成卦过程的分析，根本说来，也是对天地开辟的概述。太极生两仪，便是由太极的分化形成天地的过程，两仪，即是天地，亦可是阴阳。太极的概念经常与易学一起出现。道教的易学有自己的独特体系，太极的概念是道教易学的宇宙论、宗教修养理论和法术理论的重要基本概念 。&/p&
&提示：您可以先修改部分代码再运行
UID608788在线时间 小时积分1265帖子离线17540 天注册时间
银牌会员, 积分 1265, 距离下一级还需 1735 积分
js控制，当滚动滚动条的时候加上scrolltop
UID517858在线时间 小时积分155帖子离线17540 天注册时间
初级会员, 积分 155, 距离下一级还需 45 积分
js控制，当滚动滚动条的时候加上scrolltop
不好意思，可能我没说明白。
div 里面的内容是响应式自适应的，
当内容的高度小于屏幕时，通过 heigh: 100% 设置整个背景占满全屏，
但在内容的高度大于屏幕（出现滚动条）时， div 的高度还是当前屏幕的高度，内容溢出了，这时候只能把 heigh: 100% 属性去掉，这样背景又能占满整个屏幕（包括滚动下拉部分）了。
只是想问一下 CSS 可否直接实现，若不行，只能用 JS 来监控了。
UID632859在线时间 小时积分659帖子离线17540 天注册时间
高级会员, 积分 659, 距离下一级还需 341 积分
$('div').height($(document).height());
UID517858在线时间 小时积分155帖子离线17540 天注册时间
初级会员, 积分 155, 距离下一级还需 45 积分
露珠可否贴出你的代码？
[html]&!doctype html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&Document&/title&
html,body,article,section,header,footer,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
body & .main {
min-width: 640
background-color: #427133;
background-image: -webkit-gradient(linear, left top, left bottom, from(#689640),to(#427133));
background-image: -webkit-linear-gradient(top, #7133);
background-image: -moz-linear-gradient(top, #7133);
background-image: -o-linear-gradient(top, #7133);
background-image: -ms-linear-gradient(top, #7133);
background-image: linear-gradient(top, #7133);
body & .main & .main-inner {
background-image: url(data:image/base64,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);
background-repeat:
&div class=&main&&
&div class=&main-inner&&
&header&&h2&文章标题&/h2&&time& 12:12:12&/time&&/header&
&p&这里是文章内容&/p&
&p&我想实现：&br&1、当文章内容不能全屏显示完时，背景是铺满全屏的；（当前代码不能实现）&br&2、当文章内容超出一屏时背景还是铺满全屏的。（当前代码可以实现）&/p&
&/section&
&li&&a href=&#&&相关文章&/a&&/li&
&li&&a href=&#&&相关文章&/a&&/li&
&li&&a href=&#&&相关文章&/a&&/li&
&/article&
&提示：您可以先修改部分代码再运行
@ludousha @happyWEBdesign
其实现在写的就像 #4楼 baihe107 写的。
我想实现：
1、当文章内容不能全屏显示完时，背景是铺满全屏的；（当前代码不能实现）
2、当文章内容超出一屏时背景还是铺满全屏的。（当前代码可以实现）
谢谢。如果不能我就 JS 监控 resize 事件然后重绘 div.main 和 div.main-inner 的高度吧。
非常感谢~~~
UID517858在线时间 小时积分155帖子离线17540 天注册时间
初级会员, 积分 155, 距离下一级还需 45 积分
&!doctype html&
&html lang=&en&&
&meta charset=&UTF-8&&
&title&Document&/title&
html,body,article,section,header,footer,h1,h2,h3,h4,h5,h6 {
margin: 0;
padding: 0;
body & .main {
min-width: 640
background-color: #427133;
background-image: -webkit-gradient(linear, left top, left bottom, from(#689640),to(#427133));
background-image: -webkit-linear-gradient(top, #7133);
background-image: -moz-linear-gradient(top, #7133);
background-image: -o-linear-gradient(top, #7133);
background-image: -ms-linear-gradient(top, #7133);
background-image: linear-gradient(top, #7133);
body & .main & .main-inner {
background-image: url(data:image/base64,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);
background-repeat:
&div class=&main&&
&div class=&main-inner&&
&header&&h2&文章标题&/h2&&time& 12:12:12&/time&&/header&
&p&这里是文章内容&/p&
&p&我想实现：&br&1、当文章内容不能全屏显示完时，背景是铺满全屏的；（当前代码不能实现）&br&2、当文章内容超出一屏时背景还是铺满全屏的。（当前代码可以实现）&/p&
&/section&
&li&&a href=&#&&相关文章&/a&&/li&
&li&&a href=&#&&相关文章&/a&&/li&
&li&&a href=&#&&相关文章&/a&&/li&
&/article&
&提示：您可以先修改部分代码再运行
（之前发的帖子，出现了点问题，不能编辑了，重新回复一下~）
我想通过CSS实现：
1、当文章内容不能全屏显示完时，背景是铺满全屏的；（当前代码不能实现）
2、当文章内容超出一屏时背景还是铺满的。（当前代码可以实现）
如果CSS不能，我就通过 JS 监控 resize 事件然后重绘 div.main 和 div.main-inner 的高度吧。
非常感谢~~~
UID494384在线时间 小时积分8062帖子离线17540 天注册时间
分两种情况的话，还是用 JS 来判断吧
Powered by