个人中心
gpt4 book ai didi

html - Flexbox:内容不填满容器的高度

转载 作者：太空宇宙 更新时间：2023-11-04 01:22:57 28 4
gpt4 key购买 nike

我有这个 HTML 和 CSS:

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Test</title>

</head>

<body>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        .wrapper {
            display: flex;
            flex-direction: row;
            font-weight: bold;
            text-align: center;
            width: 100vw;
            height: 98vh;
        }

        aside.left {
            flex-basis: 400px;
        }

        main {
            flex-grow: 1;
            flex-shrink: 1;
        }

        main,
        aside.left {
            display: flex;
            flex-direction: column;
        }

        div:not(.wrapper) {
            margin: 5px;
            border: 2px solid black;
        }

        div.left.one {
            flex-basis: 30px;
        }

        div.left.two {
            flex-grow: 1;
            flex-shrink: 1;
            height: 100%;
        }

        div.left.two select {
            height: 100%;
            width: 100%;
        }

        div.left.three {
            flex-basis: auto;
        }

        div.right.one {
            flex-basis: 60px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        div.right.two {
            flex-basis: auto;
            flex-grow: 1;
            flex-shrink: 1;
            max-width: 100%;
            align-self: flex-start;
            white-space: nowrap;
            overflow: auto;
        }

        div.right.three {
            flex-basis: auto;
        }

        div.right.four {
            flex-basis: auto;
        }
    </style>
    <div class="wrapper">
        <aside class="left">
            <div class="left one">
                <?php
echo "<select name='selection_folder' onclick='this.form.submit();' style='width: 400px; height: 26px;'>";

echo "<option value='0'";
echo "selected";
echo ">Alle Files anzeigen</option>";
echo "<option value='x' disabled>-------------------------------</option>";
$directory = 'images/';
foreach (new DirectoryIterator($directory) as $file) {
    if ($file->isDir() && !$file->isDot()) {
        echo "<option value='" . $file . "'>" . $file->getFilename() . "</option>";
    }
}

echo "</select>";
?>
            </div>
            <div class="left two">
            <select multiple='multiple' name='filename_with_path' onClick='this.form.submit();'>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
            <option value="xyz">xyz</option>
</select>
            </div>
            <div class="left three">
                äöohrjiwh bjqwhnjnmjhhh hhhhhhhhh hhhhhhhhhhhhh hhhh hhhhhhhhhh hhhhhhhhhhhhhhh hhhhhhhhhhh hhhhhhhhh
            </div>
        </aside>
        <main>
            <div class="right one">Der Inhalt</div>
            <div class="right two">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
                dolore magna aliquyam erat.<br>
            </div>
            <div class="right three">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
            </div>
            <div class="right four">
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
                aliquyam erat
            </div>
        </main>
    </div>
</body>

</html>

完整页面: http://webentwicklung.ulrichbangert.de/aside-main.php

第一期:这个跟容器.left.two有关。到目前为止，上面的 CSS 工作正常。但是，当我为 .left.two 删除 height:100% 时，尽管 HTML 检查器显示 .left.two 填充剩余空间，但选择不会填充其容器的高度。谁能解释一下？

第二期:在 IE11 中，布局完全被破坏了。谁能帮忙？

最佳答案

不再使用 height: 100%，而是继续使用 Flexbox，我在这里将 display: flex 添加到 div.left.two 并且在 div.left.two 和 div.left.two select 上删除了 height: 100%。

div.left.two 上的 flex-grow: 1; 完成填充其父级高度的工作，成为一个 flex 列 div.left.two 上的 display: flex 将使 select 拉伸(stretch)并填充其父元素，因为它变成了 flex < em>行项。

为了让 IE 正常运行，并允许 div.right.two 不溢出其父级，我更新了 main 如下:

main {
  flex: 1;                 /*  IE need this  */
  min-width: 0;            /*  Firefox need this  */
}

min-width: 0; 防止 main 溢出其父级。

您还有一些边框/填充和边距需要微调，但我将其留给您。

Updated fiddle

堆栈片段

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  display: flex;
  flex-direction: row;
  font-weight: bold;
  text-align: center;
  width: 100vw;
  height: 98vh;
}

aside.left {
  flex-basis: 400px;
}

main {
  flex: 1;                 /*  IE need this  */
  min-width: 0;            /*  Firefox need this  */
}

main,
aside.left {
  display: flex;
  flex-direction: column;
}

div:not(.wrapper) {
  margin: 5px;
  border: 2px solid black;
}

div.left.one {
  flex-basis: 30px;
}

div.left.two {
  flex-grow: 1;
  flex-shrink: 1;
  display: flex;                      /*  added instead of height: 100%  */
}

div.left.two select {
  /*height: 100%;                         removed  */
  width: 100%;
}

div.left.three {
  flex-basis: auto;
}

div.right.one {
  flex-basis: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

div.right.two {
  flex-basis: auto;
  flex-grow: 1;
  flex-shrink: 1;
  max-width: 100%;
  align-self: flex-start;
  white-space: nowrap;
  overflow: auto;
}

div.right.three {
  flex-basis: auto;
}

div.right.four {
  flex-basis: auto;
}
<div class="wrapper">
  <aside class="left">
    <div class="left one">
      <select name='selection_folder' onclick='this.form.submit();' style='width: 400px; height: 26px;'>
        <option value='0' selected>Alle Files anzeigen</option>";
        <option value='x' disabled>-------------------------------</option>
        <option value='file'>filename 1</option>
      </select>
    </div>
    <div class="left two">
      <select multiple='multiple' name='filename_with_path' onClick='this.form.submit();'>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
        <option value="xyz">xyz</option>
      </select>
    </div>
    <div class="left three">
      äöohrjiwh bjqwhnjnmjhhh hhhhhhhhh hhhhhhhhhhhhh hhhh hhhhhhhhhh hhhhhhhhhhhhhhh hhhhhhhhhhh hhhhhhhhh
    </div>
  </aside>
  <main>
    <div class="right one">Der Inhalt</div>
    <div class="right two">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
      <br>
    </div>
    <div class="right three">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
    </div>
    <div class="right four">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat
    </div>
  </main>
</div>

关于html - Flexbox:内容不填满容器的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48701512/

28 4 0
文章推荐： node.js - 查找引用对象id等于user._id的数据
文章推荐： node.js - 仅以值数组形式返回结果
文章推荐： node.js - 在 adonis.js/node.js 中请求后保存 user_id 的中间件
文章推荐： html - 使用 not() 排除部分
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com