可滚动内容和固定页脚的可变高度面板

Question

我正在开发一个带有4个面板的grid布局的应用程序。我希望在一个面板中显示信息，如果内容开始超过面板，可以滚动overflow。我想在不使用max-height属性的情况下完成这个任务，因为面板的高度取决于屏幕大小等。我想避免使用媒体查询来设置最大高度或类似的东西。

目标摘要：

没有calculation

• Flex的
• 可滚动内容面板或带有按钮

的可变

• 框结束位置页脚

下面是一个粗略的设计。我有一个工作代码片段，其中包含我当前的进度，使用的是一些flex框定位和溢出，但是将max-height属性设置为550px。

我想尝试将max-height与calc()函数结合使用，但并不完全理解高度的级联以及如何选择父panel-1。我还试着使用最大视图高度来计算max-height，但这并不像我想要的那样有效(calc(100vh - 50%))。

任何对我的思维过程的洞察力或修正都是非常感谢的。

​

​

​

body {
  height: 100vh;
}
.wrapper {
  height: 100%;
  width: 100%;
}

.grid {
  padding: 16px;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(16, 1fr);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #ccc;
}

.panel-1 {
  grid-area: 1 / 1 / 12 / 6;
  background-color: red;
  padding: 0.25rem;
}

.panel-2 {
  grid-area: 1 / 6 / 12 / 17;
  background-color: #333;
}

.panel-3 {
  grid-area: 12 / 13 / 17 / 17;
  background-color: #333;
}

.panel-4 {
  grid-area: 12 / 1 / 17 / 13;
  background-color: #666;
}

.panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #999;
  justify-content: space-between;
}

.panel-content {
  display: flex;
  flex-direction: column;
  background-color: blue;
}

.panel-content-header {
  font-size: 24px;
  color: #fff;
}

.panel-content-scrollable {
  flex: 1;
  overflow: hidden scroll;
  max-height: 550px;
  background-color: #888;
}

.panel-footer {
  background-color: #777;
  display: flex;
  justify-content: center;
  align-items: end;

}

<div class="wrapper">
  <div class="grid">
    <div class="panel-1">
      <div class="panel">
        <div class="panel-content">
          <div class="panel-content-header">Panel Header</div>
          <div class="panel-content-scrollable">
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>

            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>

            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>

            <div>Line Item</div>
            <div>Line Item</div>
            <div>Line Item</div>
          </div>
        </div>
        <div class="panel-footer">
          <button>Change Panel</button>
        </div>
      </div>
    </div>
    <div class="panel-2"></div>
    <div class="panel-3"></div>
    <div class="panel-4"></div>
  </div>
</div>

​

Answer 1

您可以使用display:flex和flex-basis: x%;作为您的身高值。

由于flex-direction: column;，flex基将计算弹性子元素的高度值。我不明白你怎么计算你的问题的高度，但我认为这会让你更接近于解决问题。

​

*,
*::before,
*::after {
  box-sizing: border-box;
}


body {
  min-height: 100vh;
  margin: 0;
  background-color: bisque;
  display: grid;
  place-content: center;
}

.container{
  height: 50vh;
  width: 50vw;
  background-color: aliceblue;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.header{
  width: 100%;
  background-color: blue;
  height: 2.5rem;
  text-align: center;
  flex-basis: 10%;
}

.header p{
  color:white;
  font-size: 1rem;
}
.scroll-panel p {
  font-size: 1.5rem;
}

.scroll-panel{
  overflow-y: scroll;
  height: 100%;
  margin: 0 1rem;
  background-color: cadetblue;
  text-align: center;
  flex-basis: 80%;
}

button{
  width: 100%;
  margin-top: auto;
  flex-basis: 10%;
}

<div class="container">
      <div class="header">
        <p>HEADER</p>
      </div>
      <div class="scroll-panel">
        <p>Lorem, ipsum.</p>
        <p>Lorem, ipsum.</p>
        <p>Lorem, ipsum.</p>
        <p>Lorem, ipsum.</p>
        <p>Lorem, ipsum.</p>
        <p>Lorem, ipsum.</p>
        <p>Lorem, ipsum.</p>
        <p>Lorem, ipsum.</p>
        <p>Lorem, ipsum.</p>
        <p>Lorem, ipsum.</p>
        <p>Lorem, ipsum.</p>
        <p>Lorem, ipsum.</p>
        <p>Lorem, ipsum.</p>
        <p>Lorem, ipsum.</p>
        <p>Lorem, ipsum.</p>
        <p>Lorem, ipsum.</p>
      </div>
      <button>Change</button>
</div>

​