简单的HTML代码无法在离子内容

Question

我遇到了问题。我正在尝试创建类似于this的内容：

<div id="wrapper">
   <div id="a" class="panels">FIXED PANEL</div>
   <div id="b" class="panels">Scrolling-Panel 1</div>
   <div id="c" class="panels">Scrolling-Panel 2</div>
   <div id="d" class="panels">Scrolling-Panel 3</div>
</div>

html,body {
  padding:0;
  margin:0;
  background:black;
}

#wrapper {
  position:absolute;
  height:100%;
  width:100%;
}

.panels {
  position:relative;
  height:100%;
  min-height:100%;
  width:100%;
  z-index:1000;
}

#a{
  background:#eee;
  position:fixed;
  color:red;
  top:0;
  z-index:-99;
}

#b{
  margin-top:100%;
  background:yellow;
}

#c{
  background:pink;
}

#d{
  background:green;
}

当我将此代码放在ion-content中时，它根本不起作用。我只看到第一个div，但我无法滚动查看其余部分。