填写带有标题的“框”的首选方法是什么？

Question

鉴于以下HTML和CSS，设置“内容”以填充除标题之外的所有框的首选方法是什么？

<div id="box">
  <div id="header">Entity01</div>
  <div id="content">This is a thing</div>
</div>

 #box {
   width: 300px;
   height: 200px;
   display: block;
   border: 1px solid blue;
 }
 #header {
   height: 20px;
   background-color: blue;
 }
 #content {
   background-color: gray;
 }

这导致以下结果：

选项1：底部保证金

#box {
  width: 300px;
  height: 200px;
  display: block;
  border: 1px solid blue;
}
#header {
  height: 20px;
  background-color: blue;
}
#content {
  position: absolute;
  top: 20px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background-color: gray;
}

选项2：绝对定位

#box {
  width: 300px;
  height: 200px;
  display: block;
  border: 1px solid blue;
  background-color: gray;
}
#header {
  height: 20px;
  background-color: blue;
}
#content {
  margin-bottom: 20px;
}

选项3：其他......

请考虑溢出，滚动甚至缩放等的可能性......

Answer 1

考虑到您已经为容器定义了固定高度，以下情况应该正常工作，直到您需要一个固定的标题。

＆＃13;

＆＃13;

#box {
   width: 300px;
   height: 200px;
   display: block;
   border: 1px solid blue;
   overflow: auto;
 }
 #header {
   height: 20px;
   background-color: blue;
 }
 #content {
   background-color: gray;
   height: 180px;
 }

＆＃13;

<div id="box">
  <div id="header">Entity01</div>
  <div id="content">This is a thing</div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果你想要一个固定的标题 -

＆＃13;

＆＃13;

#box {
  width: 300px;
  height: 200px;
  display: block;
  border: 1px solid blue;
  overflow: auto;
}
#header {
  position: fixed;
  height: 20px;
  background-color: blue;
  width: 300px;
}
#content {
  background-color: gray;
  height: 180px;
  margin-top: 20px;
}

＆＃13;

<div id="box">
  <div id="header">Entity01</div>
  <div id="content">This is a thing</div>
</div>

＆＃13;

＆＃13;

＆＃13;

如果您需要考虑任何其他标准，请与我们联系。