小编The*_*lta的帖子

如何扩展<div>以填充其父级，而不根据其自身内容扩展？

语境

我正在制作一个允许创建csgo绑定/配置文件的网站，所以我将页面分为两半：左侧是用户输入，右侧是配置结果。
在每个面板的末尾都有一个按钮，用于计算输入并下载文件，但是我想一直保持可见状态（当前，它们在页面底部，我需要滚动查找他们）。

对于一个面板，我们有：

由于标题和按钮处于“已知”位置，是否可以扩展lorem ipsum div，将按钮推到面板底部，而不会溢出屏幕？
我不想使用绝对属性，因为期望可以适应较小的屏幕（那时，两个面板将位于另一个面板的下方）。

我尝试了一些东西flex-grow，没有说服力。

我没有为lorem ipsum div 定义高度；我想覆盖面板的最大值，而不会溢出它。

这是一些简化的代码：

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  display: flex;
  flex-flow: column;
}

#wrapper {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
}

.panel {
  flex-grow: 1;
  min-width: 200px;
  max-width: 50%;
  padding: 1em;
}

#lorem {
  overflow-y: scroll;
}


/* add colors :) */

body {
  background-color: lightgreen;
}

#left {
  background-color: red;
}

#right {
  background-color: purple;
}

#lorem …

Run Code Online (Sandbox Code Playgroud)

html css alignment css3 flexbox

The*_*lta

2019 04-12

6
推荐指数

1
解决办法

75
查看次数