那些遇到过的问题

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

The*_*lta 6 html css alignment css3 flexbox

语境

我正在制作一个允许创建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 {
  background: yellow;
}

#wrapper {
  background-color: darkblue;
}

textarea {
  resize: none;
}

h2 {
  background-color: green;
}

input[type=button] {
  border: 1px solid black;
  background-color: blue;
}
Run Code Online (Sandbox Code Playgroud) 
<h1>Test</h1>
<div id="wrapper">
  <div class="panel" id="left">
    <div id="title">
      <h2>Plic</h2>
    </div>
    <div id="lorem">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus.
        Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis
        ante nunc, nec dictum ex fringilla sit amet.</p>
      <p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
        Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi,
        congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum,
        velit diam convallis ex, id ornare leo arcu at sapien.</p>
      <p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique
        ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
      <p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet
        ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar
        porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
      <p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet
        eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
      <p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis
        ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum
        ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
      <p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius
        pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
      <p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis
        ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis
        dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
      <p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis.
        Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
    </div>
    <div id="button">
      <input type="button" value="Press Me">
    </div>
  </div>
  <div class="panel" id="right">
    <div>
      <h2>Ploc</h2>
    </div>
    <div>
      <textarea></textarea>
    </div>
    <div>
      <input type="button" value="Press Me">
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

kuk*_*kuz 1

让每个panel元素成为一个列弹性框height: 100%（也考虑border-box包含padding在 中height）。

现在只需添加min-height: 0到wrapper元素 - 请参阅下面的演示：

html {
  height: 100%;
}

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

#wrapper {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
  min-height: 0; /* added */
}

.panel {
  flex-grow: 1;
  min-width: 200px;
  max-width: 50%;
  padding: 1em;
  display: flex; /* added */
  height: 100%; /* added */
  flex-direction: column; /* added */
  box-sizing: border-box; /* added */
}

#lorem {
  overflow-y: scroll;
}


/* add colors :) */

body {
  background-color: lightgreen;
}

#left {
  background-color: red;
}

#right {
  background-color: purple;
}

#lorem {
  background: yellow;
}

#wrapper {
  background-color: darkblue;
}

textarea {
  resize: none;
}

h2 {
  background-color: green;
}

input[type=button] {
  border: 1px solid black;
  background-color: blue;
}
Run Code Online (Sandbox Code Playgroud) 
<h1>Test</h1>
<div id="wrapper">
  <div class="panel" id="left">
    <div id="title">
      <h2>Plic</h2>
    </div>
    <div id="lorem">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra ante sit amet velit rutrum eleifend. Integer efficitur convallis dui, in aliquet augue pellentesque ut. Aenean ut lobortis nibh. Nullam et laoreet arcu, sed consectetur lectus.
        Phasellus ut nunc orci. Fusce mauris neque, ullamcorper at auctor vel, mollis vitae dolor. Mauris eget eleifend dui. Donec ut vestibulum ex. Nullam laoreet mi ut augue posuere pellentesque. Curabitur aliquet rutrum leo iaculis aliquet. Donec convallis
        ante nunc, nec dictum ex fringilla sit amet.</p>
      <p>Nam vel lacus non leo auctor ornare. Integer sit amet lectus in elit tristique eleifend ut a libero. Nam eu mauris in sapien semper venenatis. Integer malesuada fringilla sapien vel blandit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
        Nulla pretium sem quis nulla efficitur fermentum. Vestibulum leo nisi, imperdiet ut venenatis sed, consectetur cursus purus. Morbi ac ipsum aliquet, tempor enim bibendum, cursus mi. Phasellus eget semper augue, ut viverra tellus. Nulla lacus nisi,
        congue imperdiet imperdiet sed, sollicitudin eu ex. Ut non dapibus elit. Donec at mollis ante. In aliquet pulvinar sollicitudin. Duis ac orci lobortis, pellentesque lacus in, feugiat urna. Suspendisse consectetur, risus ac elementum condimentum,
        velit diam convallis ex, id ornare leo arcu at sapien.</p>
      <p>Donec bibendum elit id orci rutrum, at eleifend urna porttitor. Vivamus odio quam, gravida at euismod in, vestibulum et dui. Morbi egestas urna eu erat hendrerit, in porttitor libero pharetra. Integer justo mauris, pulvinar tincidunt turpis a, tristique
        ullamcorper nisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin mollis tincidunt nunc eget tempor. Mauris bibendum pretium quam id pretium.</p>
      <p>Phasellus quis nisi vehicula, viverra lacus non, porttitor dui. Suspendisse fringilla ullamcorper finibus. Praesent nec auctor elit. Nulla sit amet risus egestas, lacinia orci feugiat, imperdiet metus. Morbi purus metus, egestas eu massa in, aliquet
        ullamcorper lectus. Praesent condimentum vehicula condimentum. Morbi nec neque a massa egestas tempus. Donec a cursus dui. Nullam scelerisque ultricies odio a dictum. Proin at ullamcorper justo, non auctor justo. Morbi id nunc id augue pulvinar
        porttitor. Vestibulum congue magna eu odio condimentum rutrum. Pellentesque non pretium nibh.</p>
      <p>Nunc ante leo, dapibus sit amet felis id, mattis auctor nisi. Praesent nec lacus posuere, commodo orci in, varius purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Phasellus in euismod nibh, nec congue purus. Aenean euismod laoreet
        eros, et iaculis mi pharetra vitae. Curabitur eget massa non nibh consectetur pellentesque. In varius pharetra urna, ac tristique sapien lobortis vel.</p>
      <p>Quisque eu velit mauris. Nunc sit amet placerat tellus. Praesent in fermentum orci. Sed pulvinar facilisis ornare. Vestibulum et metus eget libero tristique vulputate vitae vitae justo. Duis sit amet malesuada dolor. Etiam semper purus id turpis
        ultrices, eu facilisis purus varius. Vivamus interdum elit ligula, eget condimentum purus tincidunt ac. Nullam at mattis arcu. Nunc vitae mi consequat, hendrerit urna et, gravida nulla. Ut ac purus blandit, volutpat leo non, facilisis lorem. Vestibulum
        ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi dignissim porttitor sem et auctor. Praesent rutrum dignissim orci sit amet euismod.</p>
      <p>Pellentesque hendrerit, arcu a iaculis semper, nisi libero porta turpis, et suscipit velit ipsum eu eros. Integer ex elit, pretium vel sapien eget, pulvinar sagittis tellus. Etiam non finibus ante, vitae viverra sem. Nulla in purus in lectus varius
        pulvinar quis non turpis. Suspendisse sit amet arcu orci. Aliquam erat volutpat. Cras tincidunt enim vitae aliquam commodo. Curabitur non justo viverra, porttitor lorem sed, viverra diam.</p>
      <p>Etiam et lobortis quam. Etiam accumsan pharetra lorem, nec sagittis leo vestibulum nec. Aenean pulvinar nisl ac sapien ultricies, eget lacinia neque aliquet. Fusce egestas libero id nisl rutrum, eget egestas turpis interdum. Etiam consectetur convallis
        ex. Pellentesque mollis tortor vel dapibus tincidunt. Phasellus varius, nibh non consequat rhoncus, nisi est mollis quam, sed lacinia risus nisl sit amet arcu. Donec id tellus eu justo rutrum dictum. Integer tristique risus ut odio rutrum, quis
        dignissim est varius. Cras a tortor semper, accumsan urna sed, mattis dolor. Ut eget placerat purus. Aliquam in sollicitudin tellus. Vestibulum a semper quam, ut hendrerit enim.</p>
      <p>Sed et erat consequat, ultrices est quis, sollicitudin lectus. Sed eu semper sapien. Sed suscipit bibendum lacus in semper. Duis mi tellus, gravida a risus id, bibendum tincidunt lectus. Nam consectetur iaculis tempus. Phasellus id consequat felis.
        Aenean at ipsum molestie, ornare dui in, mollis turpis. Suspendisse sagittis in sapien ac consequat.</p>
    </div>
    <div id="button">
      <input type="button" value="Press Me">
    </div>
  </div>
  <div class="panel" id="right">
    <div>
      <h2>Ploc</h2>
    </div>
    <div>
      <textarea></textarea>
    </div>
    <div>
      <input type="button" value="Press Me">
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

PS：添加min-height: 0是为了覆盖列方向上弹性项目的默认设置- 您可以看到一些这样的示例：min-height: auto

归档时间：

查看次数：

75 次

最近记录：

6 年，6 月 前
如何使div 100%的浏览器窗口高度？ 2016
为什么弹性项目不会缩小内容大小？ 247
更多相关链接
相关归档
隐藏<select>元素的下拉箭头的正确"-moz-appearance"值是什么 67
链接到当前页面中的元素 41
在div中包含图像？ 32
没有"white-space:nowrap"的文本溢出省略号？ 19
将div的高度设置为标题下剩余空间的100% 9
什么css级别wkhtmltopdf支持8/2015 7
除了第一个之外,我怎么能隐藏所有<h2>？ 2
是否可以使用CSS使文本的颜色在两种颜色之间淡化？ 2
将图标左对齐,文本与中心对齐以反应原生 2
如何在Flex容器内右侧对齐项目？ 1
难疑归档
迭代HashMap 3244
深度克隆对象 2135
如何从Bash脚本检查程序是否存在？ 2032
在UITableView中使用自动布局来获取动态单元格布局和可变行高 1477
如何使用sed替换换行符(\n)？ 1295
如何使用自定义对象对NSMutableArray进行排序？ 1253
jQuery document.createElement等价？ 1226
Pythonic方式创建一个长多行字符串 1160
LF将被git中的CRLF取代 - 这是什么,它是否重要？ 1146
简单的面试问题变得更难:给出数字1..100,找到丢失的数字 1115