html - 部分页面上的滚动条

Question

我有一些弹出窗口看起来像:

但是我有3个问题:

1. 滚动条在所有弹出窗口上拉伸(stretch)，但我只想在弹出窗口的内部内容上拉伸(stretch)。
2. 行分隔符应与浅绿色背景颜色在同一行。

3. 固定表头隐藏了内容，但我希望表格在表头之后开始。

   

我的代码:

body {
  margin: 0;
  width: 417px;
  font-size: 16px;
  height: 505px;
}

#popup_header {
  height: 70px;
  background-color: #0a3d63;
  color: white;
  border-bottom: 5px solid #2672fb;
  position: fixed;
  width: 100%;
}

td:not(.tds),
th {
  padding: 15px 15px;
}

#scan-history-table {
  width: 100%;
}

#cog-button {
  float: right;
  background: none;
  color: white;
  border: none;
  cursor: pointer;
  float: right;
  margin: 12px;
  margin-top: 20px;
}

#popup_logo_div {
  width: 210px;
  float: left;
  /*    margin: 20px 0px 0px 10px;*/
  margin: 15px 0px 0px 5px;
}

img {
  height: 35px;
}

hr {
  /*    background-size: 5px 1px;*/
  opacity: 0.4;
}

a {
  /*    font-size: 16px;*/
  cursor: pointer;
}

a:hover {
  color: #a0ce38;
}

#bottom_banner {
  /*    position: absolute;*/
  /*    position: fixed;*/
  bottom: 0px;
  width: 100%;
  position: fixed;
  background-color: aqua;
  text-align: center;
  /*    background-color: red;*/
  /*    margin-top: 70px;*/
  /*     font-size: 12px;*/
}

i {
  margin-top: 7px;
}

.tds {
  text-align: center;
  /*    height: 20px;*/
  /*    width: 50%;*/
}

<div id="popup_header">
  <div id="popup_logo_div"><img alt="Settings" src="img/GS logo - one line - white.png" /></div>
  <button id="cog-button" type="button">
      <a id="index_link"> <i class="fa fa-cog  fa-lg fa-fw" style="font-size:27px;"></i></a>
  </button>
</div>

<section id="inner-content">
  <table id="scan-history-table" border=1 frame=void rules=rows>
    <tbody></tbody>
  </table>
</section>


<div id="bottom_banner">
  <hr>
  <a id="clear_compleated_btn">Clear</a>
</div>

Fiddle

Answer 1

我认为您不需要为弹出标题设置固定位置。你可以查看我的pen举个例子。

-