HTML与BODY的表现

dingda 发布于2019-08-01 15:03 / 1460人阅读

摘要：最后的解决办法是如下后来查阅了一些资料，发现这个问题能够通过来解决。。。默认情况下，不是高度显示的，想让支持，需要在上添加。

最近纠结于一个body满铺的问题，具体情况是：

body背景图高度固定在2000px左右；
body内内容高度不固定（可能会小于浏览器可视窗口高度，也可能会高于背景图高度即高于2000px）；

稍早前的实现方案是做一块背景div，用js监控滑动位置，再对其进行fixed定位或者absolute定位操作。
具体如下：

body>.fixed-bg-pic {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 1200px;
    background: url(bg.jpg) center 0px no-repeat;
    z-index: -1;
}
body>.fixed-bg-pic.scroll {
    position: fixed;
    top: auto;
    height: 1752px;
    bottom: 0px;
    left: 0px;
}
body>.fixed-bg-pic.bottom {
    bottom: 210px;
    height: 1752px;
    top: auto;
}

高度控制

    _p.bgPicResize = function(){
            var scrollH = $(window).scrollTop(),
                docHeight = $(document).height();
            //内容小于背景图
            if(docHeight < 1752){
                _p._$backPic.removeClass("bottom");
                _p._$backPic.removeClass("scroll");
            }
            //从上往下滑动到背景图底部
            else if(!_p._$backPic.hasClass("scroll")&&!_p._$backPic.hasClass("bottom")&&scrollH+_p._winHeight>1752)
                _p._$backPic.addClass("scroll");
            //从下往上滑动，背景图触顶时
            else if(_p._$backPic.hasClass("scroll")&&scrollH+_p._winHeight<1752){
                _p._$backPic.removeClass("scroll");
            //从上往下活动，背景图触底时
            }else if(!_p._$backPic.hasClass("bottom")&&scrollH>docHeight-242-_p._winHeight){
                _p._$backPic.removeClass("scroll");
                _p._$backPic.addClass("bottom");
            //从下往上滑动，背景图离底时
            }else if(_p._$backPic.hasClass("bottom")&&scrollH
后来遇到一个问题：
当body内内容小于浏览器可视窗口高度时，会导致背景div无法满铺整个窗口。
如果给body和html都设置高度100%，这样又会导致背景div无法完全展开（只能有可视窗口高度）。
最后的解决办法是如下：
html{
    height: 100%;
}
body{
    background: #000;
    position: relative;
    min-height: 100%;
    height: auto;
}
后来查阅了一些资料，发现这个问题能够通过background:fixed;来解决。。。（学艺不精，无话可说）
之前的思路还能沿用，不需要多带带的背景div，直接将背景放在body上，控制背景的位置就可以了：
html{
    height: 100%;
}
body{
    position: relative;
    min-height: 100%;
    height: auto;
    background: url(bg.jpg) center 0px fixed no-repeat;
    background-color: #000;
}
body.scroll {
    background-attachment:fixed;
    background-position:left bottom;
}
body.bottom {
    background-attachment: scroll;
    background-position: center 1542px;
}
关于html与body的一些表现
背景色
一般控制背景色body{color:#000}; 浏览器界面都满铺黑色，看似是body标签下背景色起作用了，但是如果body内容不足以撑满浏览器界面时，body高度是没有充满浏览器的，而背景色却能够满铺。
body{
    background: #fec;
    padding: 100px;
    margin: 100px;
    border: 10px solid #000;
}

如果是在html设置背景色，body背景色会被取代，由html背景色填充整个浏览器窗口。
html{
    background: #cdf;
}
body{
    background: #fec;
    padding: 100px;
    margin: 100px;
    border: 10px solid #000;
}

background的fixed固定定位
一般情况下大部分浏览器是支持的，当html标签带着background属性时，如：
html{
    background:#000;
}
body{
    background: url(bg.jpg) center 0px fixed no-repeat;
}
这时候，背景图片不能固定，推测原因应该和上面说的背景色有关系，即html设置背景色后，浏览器的背景色取的是html的背景色，body背景不再作为浏览器背景，而body没有满铺的原因。
height:100%
关于高度百分之百的作用，一般来说，满足两个条件：
其一，父标签有高度可寻，就是向上遍历父标签要找到一个定值高度（body，html另外讨论），如果中途有个height为auto或是没有设置height属性，则高度百分比不起作用；
其二，标签本身的属性，如果inline属性的标签，如果没有浮动，zoom，或是绝对定位之类属性是不支持百分比高度的，block或inline-block属性可以说是高度百分比起作用的前提条件之一吧。
默认情况下，body不是高度100%显示的，想让body支持height100%，需要在html上添加height：100%。

GPU云服务器云服务器 html两个body 内存故障的表现 linux硬盘损坏的表现 cn域名在国外的表现

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49734.html

JavaScript中DOM的层次节点（一）

摘要：是针对和文档的一个，描绘了一个层次化的节点树，允许开发人员添加修改删除节点的一部分。类型级定义了接口，该接口由中的所有节点类型实现。添加的这些属性分别对应于每个元素中都存在的下列标准特性。 DOM是针对HTML和XML文档的一个API，描绘了一个层次化的节点树，允许开发人员添加、修改、删除节点的一部分。 DOM将HTML和XML文档描绘成一个有多个节点构成的结构，节点分为12种不同的...

leap_frog 2019-08-19 17:19 评论0 收藏0
CSS权威指南学习笔记系列(1)CSS和文档

摘要：行内元素不会在它本身之前或之后生成分隔符，所以可以出现在另一个元素的内容中，而不会破坏其显示。标记标记基本目的是允许创作人员将包含标记的文档与其他文档相关联。更多细节请看权威指南题外话：HTML是一种结构化语言，而CSS是它的补充；这是一种样式语言。CSS是前端三板斧之一，因此学习CSS很重要。而我还是菜鸟，所以需要加强学习CSS。这个是我学习CSS权威指南的笔记，如有不对，请谅解和...

peixn 2019-08-28 18:30 评论0 收藏0
深入探究iOS下fixed定位导致的问题

摘要：讨论背景众所周知，元素在下的表现是糟糕的，元素在滚动页面中使用会出现各种奇怪的问题，在微信浏览器中使用就更甚如页面滚动，元素与页面相互分离页面滚动，元素消失等。说明原生渐变颜色终止会覆盖微信重设颜色的机制。讨论背景众所周知，fixed元素在IOS下的表现是糟糕的，fixed元素在滚动页面中使用会出现各种奇怪的问题，在微信浏览器中使用就更甚（如：页面滚动，fixed元素与页面相互分离...

tulayang 2019-08-02 15:57 评论0 收藏0
深入探究iOS下fixed定位导致的问题

摘要：讨论背景众所周知，元素在下的表现是糟糕的，元素在滚动页面中使用会出现各种奇怪的问题，在微信浏览器中使用就更甚如页面滚动，元素与页面相互分离页面滚动，元素消失等。说明原生渐变颜色终止会覆盖微信重设颜色的机制。讨论背景众所周知，fixed元素在IOS下的表现是糟糕的，fixed元素在滚动页面中使用会出现各种奇怪的问题，在微信浏览器中使用就更甚（如：页面滚动，fixed元素与页面相互分离...

toddmark 2019-08-29 13:06 评论0 收藏0
HTML css

摘要：是的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。此元素会被显示为内联元素，元素前后没有换行符。本例中的样式表把段落元素设置为内联元素。CSS 是 Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。 css 有四种引入方式一，行内式： hello 二, 嵌入式嵌入式是将CSS...

cfanr 2019-04-23 11:57 评论0 收藏0