修复了包含div的溢出的位置div

Question

我怎样才能得到它，所以div .inner涵盖了整个屏幕？ jsfiddle

HTML：

<div class="outer">
   <div id="inner">This should cover the entire screen</div>
</div>

CSS：

.outer {
     margin: auto;   width: 100%;
     top: 0; bottom: 0;
     height: 100vh;
     max-width: 20rem;
     background: blue;
}

.inner {
    top: 0; bottom: 0; left: 0; right: 0;
    position: fixed;
    background: gray;
    z-index: 2
}

Answer 1

在css中，它应为#inner

#inner {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    background: gray;
    z-index: 2;
}

Answer 2

将内部div id的属性更改为class

<强> HTML：

<div class="outer">
   <div class="inner">This should cover the entire screen</div>
</div>

<强> CSS：

.outer {
     margin: auto;   width: 100%;
     top: 0; bottom: 0;
     height: 100vh;
     max-width: 20rem;
     background: blue;
}

.inner {
    top: 0; bottom: 0; left: 0; right: 0;
    position: fixed;
    background: gray;
    z-index: 2
}

Answer 3

将.inner替换为您的css文件中的#inner，也不需要在内部css中提供right:0;和bottom:0;

Answer 4

尝试将宽度设置为最小宽度。

.outer {
     margin: auto;
     min-width: 100%;
     top: 0;
     bottom: 0;
     height: 100vh;
     max-width: 20rem;
     background: blue;
}