css - 在所有浏览器中通过绝对位置固定元素？

Question

我有这段 HTML 代码:

<aside>
<div class="cover"></div>
<header>
    <div> ... </div>
</header>
</aside>

和我的 CSS:

aside { 
    max-width:500px;
    width:30%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background:#000;
    overflow:hidden; 
}
.cover { 
    background:url('../img/cover-1.jpg') no-repeat center center;
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

我想将 aside 固定到 body 而不仅仅是视口(viewport)。我试图弄清楚如何 medium.com已经做到了，但我做不到...我的情况和 medium.com 很相似，有人可以帮助我吗？编辑:我搜索了一下，他们说将 position:relative 添加到 body 标签，但是当我添加它时，aside 消失了!

Answer 1

我能想到的最简单的方法:

Live demo

<div id="container">  
  <aside>(Menu at the bottom)</aside>  
  <section>Lorem ipsum dolor sit amet...</section>
</div>

body{
    overflow:hidden;            /* Don't scroll please */
}

aside, section{                 /* Note the common properties */
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}   

aside{
    background: url("bg.jpg") center center;
    background-size: cover;
    width: 30%;                 /* note */ 
}    
section{
    margin-left: 30%;           /* note */
    overflow: auto;             /* Scroll this guy */
}

Better Demo with content (with width) and aside's bottom menu