HTML -> 固定顶部，灵活底部，最小高度和动态平方内容

Question

我真的很难像这样创建 css 布局：

顶行：固定大小：例如：50px；

内容：当前宽度可以容纳的最大正方形。所以这个宽度=高度。它应该尊重底行最小高度。

底行：占用所有剩余空间，并具有最小高度。例如：50 像素。

没有滚动条。我们的想法是尽可能以最佳方式使用当前屏幕以适应任何分辨率。除非只有 js 才有可能，否则没有 javascript。

有什么想法吗？

这是我目前为止最好的：

   <div class="shell">
      <div class="header"></div>
      <div class="square"></div>
      <div class="footer"></div>
    </div>

css

body {
  margin: 0px;
}
.shell {
  background-color: #000000;
  height: 100vh;
  max-width: calc(100vh - 100px);
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.header {
  background-color: #0000ff;
  height: 50px;
}

.square {
  width: 100%;
  background-color: #dc143c;
}

.footer {
  background-color: #00008b;
  height: 100vh;
}

Answer 1

您可以使用填充来获取纵横比：

body {
  margin: 0px;
}
.shell {
  background-color: #000000;
  height: 100vh;
  max-width: calc(100vh - 100px);
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.header {
  background-color: blue;
  height: 50px;
}

.square {
  width: 100%;
  padding-top: 100%;
  background-color: green;
}

.footer {
  background-color: red;
  height: 100%;
}

<div class="shell">
  <div class="header"></div>
  <div class="square"></div>
  <div class="footer"></div>
</div>

参考here

Answer 2

我认为您的问题已经在这里解决了： Make a div fill the height of the remaining screen space

结合你的尝试：

body {
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  background-color: #000000;
  height: 100vh;
  max-width: calc(100vh - 100px);
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}


.box .row.header {
  flex: 0 1 50px;
  background-color: #0000ff;
}

.box .row.content {
  flex: 1 1 auto;
  width: 100%;
  background-color: #dc143c;
}

.box .row.footer {
  flex: 0 1 40px;
  background-color: #00008b;
}

<div class="box">
  <div class="row header">
  </div>
  <div class="row content">
  </div>
  <div class="row footer">
  </div>
</div>

小提琴：https://jsfiddle.net/901s2kdL/

Answer 3

内容：当前宽度可以容纳的最大正方形。所以宽度= 这个高度。它应该尊重底行最小高度。

如果你想要最大的square，footerheight 将被固定，它总是等于min-height（应该是），所以你是否设置它并不重要height 到 100% 或 50px。 max-width 的正方形确定实际尺寸。如果你看这个max-width: calc(100vh - 100px)，- 100px 部分是真正的剩余空间，包括header 和footer，所以如果header height 设置为50px，footer @987654337 @ 也是50px。

body {
  margin: 0px;
}

.shell {
  background-color: black;
}

.header {
  height: 50px;
  background-color: red;
}

.square {
  max-width: calc(100vh - 100px);
  margin: 0 auto;
  background-color: green;
}

.square:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.footer {
  height: 50px;
  background-color: blue;
}

<div class="shell">
    <div class="header"></div>
    <div class="square"></div>
    <div class="footer"></div>
</div>