CSS 子元素铺满整个父元素

1、有时候需要咋们的内容容器铺满整个页面，如在pad上访问时，希望它完全铺满，而且外围还不出现滚动条，以至于让它看起来像桌面App一样

2、如下所示".fileTreeContainer"虽然为div设置了"wdth:100%;height:100%"，但是却只有宽度有效，其高度并没有达到我们想要的目的

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>CSS 子元素铺满整个父元素</title><style type="text/css">/*解决方法：1、从根节点html开始设置height: 100%;2、必须是从html开始，然后body，接着就是咋们自己的元素3、这样一步步自适应下去就OK了*/* {margin: 0px;padding: 0px;}html, body {width: 100%;height: 100%;border: 1px sandybrown solid;overflow: hidden;}/*文件树容器*/.fileTreeContainer {width: 100%;height: 100%;border: 1px red solid;}</style>
</head>
<body>
<div class="fileTreeContainer">
</div>
</body>
</html>

CSS + JQuery 实现遮罩层

1、只需要在需要显示遮罩层的时候，调用 showMask方法，不再不需要遮罩层时，调用 hideMask进行移除即可。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Filter 滤镜</title><style>/*遮罩层样式，基于 body 元素进程绝对定位，阴影铺满整个 body*/.showMaskDiv {position: absolute;width: 100%;height: 100%;z-index: 1;top: 0px;left: 0px;background-color: rgba(10, 10, 10, 0.5);}/*遮罩之上的元素样式，同样基于 body 元素进程绝对定位,且必须在遮罩层之上.*/.add_panel {margin-left: 200px;display: none;position: absolute;z-index: 3;border: 1px red solid;color: white;}</style><!-- JQuery CDN--><script src="http://code.jquery.com/jquery-2.1.1.min.js"></script><script type="text/javascript">//显示遮罩层,动态为body追加元素进行遮罩function showMask() {var showMaskJQ = $("<div class='showMaskDiv'></div>");showMaskJQ.appendTo("body");}//动态移除遮罩层function removeMask() {$(".showMaskDiv").remove();}$(function () {$("#add").click(function () {showMask();$(".add_panel").show();});$("#cancel").click(function () {removeMask();$(".add_panel").hide();});});</script>
</head>
<body>
<div>我是底层
</div>
<button type="button" id="add">录入</button>
<div class="add_panel"><h3>录入面板</h3><button type="button" id="cancel">取消</button>
</div>
</body>
</html>

CSS 子元素铺满整个父元素、CSS + JQuery 实现遮罩层相关推荐

子元素宽度如何撑开父元素宽度
子元素宽度如何撑开父元素宽度代码效果如下一个横向滚动栏,子元素高度会自动撑开父元素的高度,但是好像子元素宽度不能自动撑开父元素的宽度.这是我们需要使用css使子元素宽度可以自动撑开父元素宽度,避 ...
HTML浮动导致高度塌陷,HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）...
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
html自适应_web前端入门到实战：HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法...
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
固定父元素的默认高度若子元素超过父元素的高度则父元素被撑开
本来想着用jquery从页面上先进行判断,再进行样式的修改. 问了一下,原来css有min-height属性.真香. min-height 属性设置元素的最低高度. 注意: min-height属性不 ...
CSS单位em是相对于父元素还是当前元素的字体大小？
em是CSS中一个比较常用的相对单位,因此有必要注意一些坑点. 1em等于当前元素的字体大小,除非你在设置font-size 有很多文章说1em是等于父元素的字体大小!这种说法实际上是不准确的.看以下 ...
html文字自动铺满页面,body height:100%让页面容器元素铺满窗口
div 容器height:100% 我们想要让页面中的一个div容器能够实现自适应浏览器窗口的高度,这时候我们一般不希望牵扯js,简单的通过css的height:100%来实现高度的自适应. 这样是不 ...
@css flex 布局子内容将父元素撑开
flex 布局子内容将父元素撑开遇到的问题: 需要显示的文本是通过富文本编辑器提交是文本(包含了p标签),展示时通过flex布局实现.如下图: 但是通过flex布局实现后发现文本内容过长时将后半部分 ...
微信小程序 CSS 解决子元素图片在父元素div宽高小的时候超出div范围
今天写小程序的时候发现了这么个问题,在div内添加了图片,给div一个边框,然后我就发现我的图片不在div的范围内了,而是向下偏移了一点 html: <view class="tel& ...
子元素的margin-top影响父元素原因和解决办法
这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...
html 点击子元素,html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡...
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: 你好, 战无不胜 [注销] js: 方法1: UserLogout.οnclick=function (e) ...

CSS 子元素铺满整个父元素、CSS + JQuery 实现遮罩层

CSS 子元素铺满整个父元素

CSS + JQuery 实现遮罩层

CSS 子元素铺满整个父元素、CSS + JQuery 实现遮罩层相关推荐

最新文章

热门文章