html - 复杂嵌套 Div 的 CSS 溢出滚动问题

Question

我有一个 float 的 div(弹出窗口)，其中包含一个 div 标题、一个滚动内容部分和一个页脚。这是一个简化:

html,
body,
.outer {
  height: 200px;
  background: pink;
  border: 1px
}
.inner {
  display: inline-block;
  height: 100%;
  width: 100%;
  background: lime;
  border: 1px;
  overflow: hidden
}
.tabs {
  height: 50px;
  background: blue;
}
.header {
  height: 50px;
  background: yellow;
}
.main {
  height: auto;
  overflow: scroll;
  background: orange;
}
.footer {
  background: red;
  position: absolute;
  padding: 1em;
  bottom: 0;
  width: 100%;
}

<div class="outer">
  <div class="inner">
    <div class="tabs">
      Tabs
    </div>
    <div class="header">
      Header Info
    </div>
    <div class="main">
      .. line1 ..
      <br/>.. line2 ..
      <br/>.. line3 ..
      <br/>.. line4 ..
      <br/>.. line5 ..
      <br/>.. line6 ..
      <br/>.. line7 ..
      <br/>.. line8 ..
      <br/>.. line9 ..
      <br/>.. line10 ..
      <br/>.. line11 ..
      <br/>.. line12 ..
      <br/>
    </div>
    <div class="footer">
      Footer Info
    </div>
  </div>
</div>

这是在 JSFiddle 中的:JSFiddle Example

问题是主要部分中的内容被剪切而不是滚动。

Answer 1

在 .main 而不是 .outer 上指定高度。

http://jsfiddle.net/fknc5p27/1/

https://jsfiddle.net/gptuk4uz/6/

html,
body,
.outer {
  /*height: 200px;*/
  background: pink;
  border: 1px
}
.inner {
  display: inline-block;
  height: 100%;
  width: 100%;
  background: lime;
  border: 1px;
  overflow: hidden
}
.tabs {
  height: 50px;
  background: blue;
}
.header {
  height: 50px;
  background: yellow;
}
.main {
  height: 150px;
  overflow: auto;
  background: orange;
}
.footer {
  background: red;
  position: absolute;
  padding: 1em;
  bottom: 0;
  width: 100%;
}

<div class="outer">
  <div class="inner">
    <div class="tabs">
      Tabs
    </div>
    <div class="header">
      Header Info
    </div>
    <div class="main">
      .. line1 ..
      <br/>.. line2 ..
      <br/>.. line3 ..
      <br/>.. line4 ..
      <br/>.. line5 ..
      <br/>.. line6 ..
      <br/>.. line7 ..
      <br/>.. line8 ..
      <br/>.. line9 ..
      <br/>.. line10 ..
      <br/>.. line11 ..
      <br/>.. line12 ..
      <br/>
    </div>
    <div class="footer">
      Footer Info
    </div>
  </div>
</div>