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>

绝对父 - 显示子内容溢出

1 个答案: