容器内

Question

它内部有一个带有页眉，正文和页脚部分的块。页眉和页脚高度是固定的，身高由其内容决定。我需要外部块大小为其内容的大小，但不超过其容器的大小。如果身高超过最大可能尺寸，则显示身体的y-scroll，但页眉和页脚将保留在外部块的顶部和底部。

我做了FIDDLE。但是我只能在调整窗口大小时才会出现外部块的滚动，而不是仅用于块体。

这是CSS和HTML：

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  position: absolute;
  top: 10px; bottom: 10px; left: 10px; width: 200px;
  border: 1px solid red;
}

.innerContainer {
  border: 1px solid purple;
  max-height: 100%;
  overflow: auto;
}

.header, .footer {
  height: 30px;
  background: blue;
}

.body {
  background: green;
}

<div class='container'>
  <div class='innerContainer'>
    <div class='header'></div>
    <div class='body'>text<br>text<br>...</div>
    <div class='footer'></div>
  </div>
</div>

是否可以在不使用JavaScript的情况下完成我需要的工作？

编辑：我制作了一张图片，以说明我需要的内容。

Answer 1

  

那么根据我的理解，您需要标题，这是您的代码   在底部粘贴顶部和页脚，如果是，则可以滚动主体   容器尺寸必需。

    <div class='container'>
      <div class='innerContainer'>
        <div class='header'></div>
        <div class='body'>text<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>texttext<br>text
</div>
        <div class='footer'></div>
      </div>
    </div>

我们需要单独设置页脚和标题的样式以及您的样式，如下面的代码所示 您添加到 .innerContainer （position: absolute; bottom: 0; right: 0; left: 0; height: 100%; overflow: hidden;），然后添加 .body 添加（height: 50%; overflow-y: auto;）

   body, html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.container {
  position: absolute;
  top: 10px; bottom: 10px; left: 10px; width: 200px;
  border: 1px solid red;
}

.innerContainer {
  border: 1px solid purple;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  position: absolute;
}

.header, .footer {
  height: 30px;
  background: blue;
}

.body {
  background: green;
  min-height: 20px;
  max-height: 36%;
  overflow-y: auto;
  font-size: 20px;
}

我希望您想要的是什么，如果您有任何疑问，请告诉我。

Answer 2

我发现的唯一解决方案是使用CSS3 calc。但是在Android浏览器中不起作用，但是...... FIDDLE

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    position: absolute;
    top: 10px; bottom: 10px; left: 10px; width: 200px;
    border: 1px solid red;
    overflow: hidden;
}

.header, .footer {
    height: 30px;
    background: blue;
}

.body {
    height: 300px;
    background: green;
}

.bodyContainer {
    max-height: calc(100% - 60px);
    overflow-y: auto;
}

<div class='container'>
        <div class='header'></div>
        <div class='bodyContainer'>
            <div class='body'></div>
        </div>
        <div class='footer'></div>
</div>