html - 固定位置 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;
}