Question

我想创建一个100％（浏览器）的div。以下div在div中，不是全宽度容器（该容器必须站立）我试试这个：

<div class="container">

<div style="
width: 100%;
padding-left: 1000px;
padding-right: 1000px;
margin: 0 -1000px;
background-color: #075283;
padding-top: 10px;
padding-bottom: 10px;">

TEXT

</div>

</div>

但我在浏览器中有滚动条。我如何解决它浏览器和智能手机只显示浏览器长度中div的全部长度？

Answer 1

我不明白为什么你需要100％的div，在另一个较小的div中，但是你总是可以做类似的事情。

.inner-div {
  position: absolute; // Or fixed if the parent div has position: relative or absolute.
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Answer 2

这个怎么样？

<div class="container" style="width: 100%; float:left;">

<div style="
width: 100%;
float:left;
background-color: #075283;
padding-top: 10px;
padding-bottom: 10px;">

TEXT

</div>

Answer 3

尝试使用viewportwidth/viewportheight (vw/vh)！

.wrapper {
    height: 500px;
    width:500px;
    background:red;
}

.inner {
    height: 100vh;
    width: 100vw;
    background: blue;
}

<div class="wrapper">
    <div class="inner"></div>
</div>

Working example on jsfiddle!

盒装div中100％div（通过浏览器）

3 个答案: