50% 的部分不会在移动设备上堆叠

Question

编辑 我更正了一个错字并更新了 JSFiddle 和这篇文章以反映这一变化。标题应该占据 100% 的高度，但事实并非如此。仍在寻找想法。

这在桌面上看起来就像我想要的那样。我不明白为什么在移动设备上它不会占据 100% 的高度并堆叠在一起。标题也失去了彩色背景。 Here's the JSFiddle

HTML

    <div class="about-header">
      <h2>Headline</h2>
    </div>

    <div class="about-section">

      <div class="about-text">
        <p>The first chunk of text to let users know they gotta read a 
         little bit. If they want. It's not mandatory or anything.</p>

        <p>The second group of text, a nice chunk of descriptive text that 
        explains some more about this website. It really hopes you can help 
        me troubleshoot this problem that I am facing.</p>

        <p>Another grouping of text goes right in this little section here 
        that should go on for a while.</p>
     </div><!-- END ABOUT TEXT -->

    </div> <!-- END ABOUT SECTION-->
 </section>
</div><!-- END CONTAINER -->

CSS

*{
  margin:0;
  padding:0;
}

html{
  font-size:62.5%;
}

html,
body{
  height:100%;
  background-color:#FFF;
  color:#000;
  font-family:"Arial", "Helvetica", sans-serif;
  font-size:12px;
  font-size:1.2rem;
}

.container{
  width:100%;
  height:100%;
 }

.container *{
  box-sizing:border-box;
}

.row{
  min-width:85%;
  margin:0 auto;
}

.row:before,
.row:after{
  content:"";
  display:table;
  clear:both;
}

#about{
  height:100%;
}

.about-header{
  width:100%;
  height:100%;
  background-color:lightblue;
  position:relative;
}

.about-header h2{
  display:table-cell;
  vertical-align:middle;
  text-align:center;
  text-transform:uppercase;
}

.about-section p{
  font-size:1rem;
  padding-left:1.2rem;
  padding-right:3rem;
  padding-bottom:1.5rem;
}

.about-text{
  display:table-cell;
  vertical-align:middle;
}

.about-section{
 width:100%;
 height:100%;
 position:relative;

}

/**** MEDIA QUERY****/
@media all and (min-width:500px){

.about-section{
  width:50%;
  height:100%;
  background-color:#FFF;
  left:50%;
  display:table;
  position:absolute;
}

.about-header{
  width:50%;
  height:100%;
  background-color:lightblue;
  right:50%;
  display:table;
  position:absolute;
}

}

Answer 1

你有一个错字。

.about-head{
    width:100%;
    height:100%;
    background-color:lightblue;
    position:relative;
}

应该是：

.about-header {
    width:100%;
    height:100%;
    background-color:lightblue;
    position:relative;
}