在所有浏览器中按绝对位置固定元素？

Question

我有这段HT​​ML代码：

<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固定在身体上，而不仅仅是视口。 我试图找出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

Answer 2

我认为你需要这样的东西？

http://jsfiddle.net/QzdCT/4/

你应该能够在这里和那里修改它以满足你的需要。

三个div - 一个父母和两个兄弟姐妹。

<div class='container'>
    <div class='aside'></div>
    <div class='mainBody'></div>
</div>

这是CSS -

.container{
    height:500px;
}
.aside
{
    height:500px;
    width:40%;
    background:#9e9e9e;
    position:fixed;
    left:0;
}
.mainBody
{
    height:500px;
    width:59%;
    float:right;
}

Answer 3

您的孩子似乎正在覆盖它

尝试保持一切相同但只是改变这一点：

.cover {
    left: 30%;
}