怎样使div充满全屏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎样使div充满全屏相关的知识，希望对你有一定的参考价值。
参考技术A怎样使div充满全屏
DIV最外层全屏100%宽度
其实DIV全屏即宽度值设置为100%，如果对网页最外层的DIV盒子不设置宽度，这样盒子依然是全屏相当于100%宽度。
如果对DIV设置全屏，一般我们就设置其width宽度样式为100%。
这里为了方便理解，DIVCSS5实例讲解DIV全屏实现对最外层DIV给予id引入CSS命名为warp;同时为了便于观察，我们对div设置一个css背景为黑色，高度为80px。
完整+css代码：
<!DOCTYPE >
< xmlns=":w3./1999/x">
<head>
<meta charset=utf-8 />
<title>div全屏实例</title>
<style>
#warp width:100%;height:80px;background:#000
</style>
</head>
<body>
<div id="warp"></div>
</body>
</>
在一个页面中，只有一个div,想是div充满全屏，常规的想法是设置高度宽度为100% ，代码如下： ??但是这样的话，div四周都会有边距，并没充满全屏。解决办法如下： ,body margin:0px; height:100%; #bg width:100%; height:100%; MARGIN: 0px auto; background-color:blue; ??????
在dreamweaver中怎样让一个盒子充满全屏
你的需求不是很明白啊，比如<div class="page_speeder_429652309"></div>
扫描仪扫的照片怎样能充满全屏幕
扫描仪扫的照片与想要出现在屏幕上的尺寸是不符合的 如果你想要充满全屏幕必须拉伸 如果这样照片会变形 你只有把照片的尺寸与屏幕 相对应就好了
使嵌套的div全屏
【中文标题】使嵌套的div全屏【英文标题】：Make nested div full screen 【发布时间】：2018-04-26 17:13:43 【问题描述】：知道如何将缩略图 div 拉伸为全屏吗？我已经尝试了几种方法，最接近我想要的输出的是通过使用隐藏 div 的内容设置父 div 的 innerHTML 与类容器，但我仍然必须还原它并添加一些动画不变化如此突然。基本上我希望缩略图 div 在 Y 轴上旋转，并且在它的背面可以找到一些信息。完成 Y 轴旋转后，我希望它全屏显示（如弹出窗口）并有一个 X 按钮关闭并让一切恢复正常。
下面是 HTML、CSS 和 JS（没有添加整个 HTML，那会是多余的）
<div class="container">
<div class="info-review">
<p>Latest Version: 6.2.4<br/>
Catia<br/>
Last : 02.07.2013</p>
</div>
<div class="row flex">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="assets/img/Contact.jpg">
<p>1<sup>st</sup> level support<div class="boxed-plus" aria-hidden="true"></div></p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="assets/img/support.jpg">
<p>1<sup>st</sup> level support<div class="boxed-plus" aria-hidden="true"></div></p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="assets/img/license.jpg">
<p>1<sup>st</sup> level support<div class="boxed-plus" aria-hidden="true"></div></p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="assets/img/application.jpg">
<p>1<sup>st</sup> level support<div class="boxed-plus" aria-hidden="true"></div></p>
</div>
</div>
</div> <!-- row -->
</div> <!-- container -->
<div id="info1"><p> BASE: ENGAGE IN THE HOME CARE-RELATED ACTIVITY (H_HOMEACTIVITIES=6)16_6. What do you do first in order to...? Select one.Look for inspiration (e.g., for closet organization)ONLY SHOW IF SELECTED AT Q15_6. SHOW IN SAME ORDER.IF ONLY ONE ANSWER SELECTED FOR ITEM/QUESTION AT Q15_6, AUTOCODE THAT OPTION AT HERE AND DO NOT SHOW THIS QUESTION.<div class="boxed-plus" aria-hidden="true"></div> </p> </div>
CSS：
*
box-sizing: border-box;
html
height: 100%;
width: 100%;
body
margin: 0;
height: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding-top: 115px;
background: #143872; /* fallback for old browsers */
background: -webkit-linear-gradient(#1d355b, #4a83e0, #143872); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(#1d355b, #4a83e0, #143872); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
.container
width: 95%;
margin-left: auto;
margin-right: auto;
padding-right: 15px;
padding-left: 15px;
.navbar
overflow: hidden;
background-color: inherit;
margin-bottom: 20px;
position: fixed;
width: 100%;
top: 0;
z-index: 1030;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top: none;
background: #143872; /* fallback for old browsers */
background: -webkit-linear-gradient(#1d355b, #4a83e0, #143872); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(#1d355b, #4a83e0, #143872); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
@media(max-width: 600px)
.navbar
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
.navbar a
float: left;
font-size: 15px;
color: white;
text-align: center;
padding: 14px 14px 16px 0;
text-decoration: none;
vertical-align: middle;
.navbar-header table
text-align: left;
font-size: 18px;
line-height: 1;
.navbar a:hover
color: #10203a;
.navbar-right
float: right;
.navbar a img
float:left;
.dropmenu
transition: all .5s ease;
height: 50px;
overflow: hidden;
padding: 0;
display: inline-block;
@media(max-width: 547px)
.navbar a
padding: 0;
.navbar-right
float: none;
.dropmenu
margin: 0;
.dropmenu:hover
height: 100px;
.dropmenu a
text-decoration: none;
color: white;
padding: 0;
.dropmenu table
height: 50px;
.lang
padding-bottom: 10px;
.dropmenu li
display: block;
border: none;
padding: 0;
height: 50px;
.info-review
padding: 0 15px;
text-align: center;
margin: 0 auto 30px auto;
border-radius: 6px;
color: white;
border: 1px dashed white;
border-top-left-radius: 85px;
border-bottom-right-radius: 85px;
@media(min-width: 500px)
.container .info-review
width: 40%;
.info-review p
margin-bottom: 15px;
font-size: 30px;
line-height: 1.4;
@media(max-width: 900px)
.info-review p
font-size: 25px;
.arrow-down
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid white;
.selection-arrow
padding-top: 17px;
.thumbnail
overflow: auto;
display: block;
padding: 4px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
-webkit-transform: perspective(500);
-webkit-transform-style: preserve-3d;
-webkit-transition: .5s;
.thumbnail > img
display: block;
height: auto;
max-width: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 6px;
.thumbnail p
color:white;
margin: 2px 0 0 0;
float: left;
.thumbnail > div
max-width: 100%;
.row
margin-left: -15px;
margin-right: -15px;
.flex
display: flex;
flex-wrap: wrap;
.col-md-4, .col-lg-3, .col-sm-6
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
@media(min-width: 600px)
.col-sm-6
width: 50%;
@media(min-width: 900px)
.col-md-4
width: 33.33333333%;
@media (min-width: 1200px)
.col-lg-3
width: 25%;
.white-popup
position: relative;
background: #FFF;
padding: 25px;
width:auto;
max-width: 400px;
margin: 0 auto;
.active
background-color: white;
-webkit-transform: rotateY(180deg) translateY(-3em) translateZ(3em);
.active > p
-webkit-transform: rotateY(-180deg);
color: red;
-webkit-transition: .5s;
float: right;
img
-webkit-transition: .5s;
figure:hover img
box-shadow: none;
figcaption
background-color: white;
visibility: hidden;
border: 1px dashed white;
z-index: 99 !important;
figure:hover figcaption
visibility: visible;
box-shadow: 0 20px 15px -10px hsla(0,0%,0%,.25);
margin: 100px auto;
.boxed-plus
cursor: pointer;
float: right;
border-radius: 20%;
width: 25px;
height: 25px;
background: #143872; /* fallback for old browsers */
background: -webkit-linear-gradient(#1d355b, #4a83e0, #143872); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(#1d355b, #4a83e0, #143872); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
position: relative;
display: inline-block;
margin-top: 1px;
.boxed-plus::after
content: " ";
position: absolute;
display: block;
background-color: #fff;
height: 5px;
margin-top: -2.5px;
top: 50%;
left: 5px;
right: 5px;
z-index: 9;
.boxed-plus::before
content: " ";
position: absolute;
display: block;
background-color: #fff;
width: 5px;
margin-left: -2.5px;
left: 50%;
top: 5px;
bottom: 5px;
z-index: 9;
.activity
-webkit-transform: rotateX(90deg);
#info1
visibility: hidden;
background-color: white;
JS：
var plus_clicked = document.querySelectorAll('.boxed-plus');
var info_1 = document.getElementById('info1');
var clicked = false;
plus_clicked.forEach(function(e)
e.addEventListener('click',function()
if(clicked === false)
var previous_html = e.parentNode.parentNode.parentNode.parentNode.innerHTML;
clicked === true;
e.classList.add('activity');
this.parentNode.classList.add('active');
setTimeout(function()
console.log(e.parentNode.innerHTML);
//e.parentNode.innerHTML = info_1.innerHTML;
e.parentNode.parentNode.parentNode.parentNode.innerHTML = info_1.innerHTML;
, 300);
console.log(this.parentNode.parentNode.parentNode.parentNode);
else
e.innerHTML = previous_html;
);
)
【问题讨论】：
你要全屏哪个div？而全屏，你的意思是隐藏浏览器的地址栏和 OS chrome。或者，您的意思是整页？
在所有带有 class="thumbnail" 的 div 中都有一个 div，它的样式看起来像一个加号。单击此加号后，我希望父 div 旋转然后全屏显示。全屏是指浏览器窗口（整页）。我不希望地址栏隐藏或任何东西。
【参考方案1】：
TLDR ;)
您可以将元素的width 和height 分别设置为100vw 和100vh。
演示：
document.querySelector("div").addEventListener("click", function()
this.classList.toggle("active");
);div
background-color:aliceblue;
border:1px solid black;
box-sizing:border-box;
position:absolute;
left:50%;
div.active
width:100vw;
height:100vh;
position:absolute;
top:0;
left:0;
<div>Click to Expand</div>【讨论】：
这解决了一些问题，谢谢。但我仍然需要将整个内容移动到最左上角，以便展开的 div 覆盖整个页面，并且我没有任何横向滚动 @Shobolan 没问题。只需使用绝对定位。我会更新答案。 这就是问题所在。通过使用绝对定位，缩略图 div 不再是父级（即 ) 但是当将 top 和 left 设置为 0 时，它会转到 div 女巫 class= "container" 的顶部和左侧部分，而不是身体的顶部和左侧部分。 如果父级本身绝对定位，它只会转到父级的左上角。如果没有，它将位于 body 的左上角。 是的，找到问题了。我将位置设置为相对的父级。谢谢大佬。以上是关于怎样使div充满全屏的主要内容，如果未能解决你的问题，请参考以下文章