灵活的 css 布局，包含容器内的页眉、页脚和滚动体

Posted 2023-03-06

【中文标题】灵活的 css 布局，包含容器内的页眉、页脚和滚动体

【英文标题】：Flexible css layout with header, footer and scrolling body inside container

【发布时间】：2015-08-26 17:40:03

【问题描述】：

里面有一个带有页眉、正文和页脚部分的块。页眉和页脚高度是固定的，正文高度由其内容决定。我需要外部块大小为其内容的大小，但不大于其容器的大小。如果正文高度超过最大可能大小，则为正文显示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 做我需要的事情？

编辑：我制作了一张图片以说明我需要什么。

【参考方案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;

我希望你想要什么，如果你有任何问题，请告诉我。

【讨论】：

不幸的是，这不是我需要的。 footer 必须在 innerContainer 的底部，所以如果 body 高度小于屏幕尺寸，它应该贴在 body 底部，而不是贴在屏幕底部。

你指的是class还是tag哪个body？

标签。我需要的行为与我链接的小提琴完全一样，但是当您调整窗口大小时，滚动不应该出现在整个容器中，而是出现在 .body div 容器中，并且页脚应该保持可见。

好的，应该和我一样，但是底部的页脚与body div一起流动，对吧？

是的，.body div 不应溢出页眉和页脚。

【参考方案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>