css - 绝对父级 - 在子内容上显示溢出

Question

http://codepen.io/Kalesh/pen/xbBmdj?editors=110

包含标题和内容 div 的绝对父级。两者都是动态的。我想仅在内容上显示滚动条。

我不想给页眉任何高度，也不想让内容与顶部 X 绝对。

有什么办法可以做到这一点吗？

#parent { 
  position:absolute;
  top: 10px; bottom: 225px; right: 340px; width: 320px;
  border: 1px solid black;  
}

#header {
  border-bottom: 2px solid #426da9; padding: 4px 10px 0; font-size: 32px;
}

#content {    
  padding: 10px;
  font-size: 20px;          
}

<div id="parent">
  <div id="header">
    HEADER
    Duis risus eros, bibendum nec pretium at, eleifend non nisi. 
  </div>
  <div id="content">
     CONTENT
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut sollicitudin arcu, sit amet varius purus. Proin eget magna nec sapien vehicula tincidunt. Vestibulum commodo magna sit amet tempor posuere. Ut ac consequat ipsum. Phasellus nulla est, elementum in dictum pulvinar, lacinia sit amet turpis. Nulla auctor placerat dapibus. Nulla vestibulum non nunc sed venenatis. In ac enim scelerisque, ornare leo at, posuere diam. Sed molestie metus semper fermentum maximus. Aliquam in accumsan risus, id maximus mauris.
    Duis risus eros, bibendum nec pretium at, eleifend non nisi. Curabitur auctor, odio eu congue aliquet, sapien sapien rutrum orci, sit amet hendrerit sem sem et lectus. Nulla facilisi. Praesent fermentum id nunc et volutpat. Vivamus ac sodales nisi. Duis nec libero eu quam faucibus iaculis et vel magna. Cras erat mauris, imperdiet a porta eu, pharetra eu augue.  
    Duis risus eros, bibendum nec pretium at, eleifend non nisi. Curabitur auctor, odio eu congue aliquet, sapien sapien rutrum orci, sit amet hendrerit sem sem et lectus. Nulla facilisi. Praesent fermentum id nunc et volutpat. Vivamus ac sodales nisi. Duis nec libero eu quam faucibus iaculis et vel magna. Cras erat mauris, imperdiet a porta eu, pharetra eu augue.  
  </div>
</div>

Answer 1

由于页眉必须有灵活的高度，旧的 CSS 很难做到这一点。然而，新的浏览器支持灵活的盒子，这非常适合:

#parent { 
  display: flex; /* Magic begins */
  flex-direction: column; /* Column layout */
}
#content {    
  flex: 1; /* Starting at 0, grow to fill the remaining space */
  overflow: auto; /* Add scrollbars if necessary */
}

#parent { 
  position:absolute;
  top: 10px; bottom: 225px; right: 340px; width: 320px;
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}
#header {
  border-bottom: 2px solid #426da9; padding: 4px 10px 0; font-size: 32px;
}
#content {    
  padding: 10px;
  font-size: 20px;    
  flex: 1;
  overflow: auto;
}

<div id="parent">
  <div id="header">
    HEADER
    Duis risus eros, bibendum nec pretium at, eleifend non nisi. 
  </div>
  <div id="content">
    CONTENT
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut sollicitudin arcu, sit amet varius purus. Proin eget magna nec sapien vehicula tincidunt. Vestibulum commodo magna sit amet tempor posuere. Ut ac consequat ipsum. Phasellus nulla est, elementum in dictum pulvinar, lacinia sit amet turpis. Nulla auctor placerat dapibus. Nulla vestibulum non nunc sed venenatis. In ac enim scelerisque, ornare leo at, posuere diam. Sed molestie metus semper fermentum maximus. Aliquam in accumsan risus, id maximus mauris.
    Duis risus eros, bibendum nec pretium at, eleifend non nisi. Curabitur auctor, odio eu congue aliquet, sapien sapien rutrum orci, sit amet hendrerit sem sem et lectus. Nulla facilisi. Praesent fermentum id nunc et volutpat. Vivamus ac sodales nisi. Duis nec libero eu quam faucibus iaculis et vel magna. Cras erat mauris, imperdiet a porta eu, pharetra eu augue.  
    Duis risus eros, bibendum nec pretium at, eleifend non nisi. Curabitur auctor, odio eu congue aliquet, sapien sapien rutrum orci, sit amet hendrerit sem sem et lectus. Nulla facilisi. Praesent fermentum id nunc et volutpat. Vivamus ac sodales nisi. Duis nec libero eu quam faucibus iaculis et vel magna. Cras erat mauris, imperdiet a porta eu, pharetra eu augue.  
  </div>
</div>