CSS Flex-用div填充空白空间

塔昆

我是一位最远的设计师，因此可以为其他人提供视觉设计。我已经购买了模板，设计人员在模板上使用了min-height: 1000px主容器上的属性以确保背景颜色始终延伸到底部。

我正在尝试纠正此问题，因此遇到了以下问题；使div填充剩余屏幕空间的高度-可以清楚地标识new（ish）css3 flex属性的使用。但是，似乎我的当前结构可能无法正确使用它？还是我处理方法不正确？

CSS：

body {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Open Sans',Helvetica, Arial, sans-serif;
  color: #666666;
  -webkit-font-smoothing: antialiased;
  /* Fix for webkit rendering */
  -webkit-text-size-adjust: 100%;
  font-size-adjust: 100%;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.475;
  background-color: #FFF; }

#main {
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  width: 100%;
  position: relative;
  background: #e8e8e8; }

#content_wrapper {
  position: relative;
  display: block;
  -webkit-flex: 1;
  flex: 1;
  left: 0px;
  margin-left: 230px; }

HTML结构：

<body>
    <header>
        <!-- Header Content Here - This is sticky -->
    </header>
    <div id="main">
       <aside id="sidebar_left" class="affix"><!-- Sidebar Content Here - This is sticky --></aside>
       <section id="content_wrapper"><!-- Webpage Content Here - This can scroll when necessary. --></section>
    </div>
</body>

在具有适当内容量的页面上，上面显示的内容没有问题。它的工作方式与作者的原始min-height: 1000px解决方案相同，但是在内容短的页面（例如404错误等）上，内容停止之前占页面的大约1/3-1/2。

Flex无法填补空白！

我没有页脚，也没有计划实施页脚。（以防以后被询问）
我试图height: 100%在html和body标签上使用无济于事
我以前曾尝试使用，height:100vh但意识到它还会增加我的标题区域的高度，因为它存在于视口中。

我应该如何处理这个问题？Flex在这里合适吗？

塔昆

在这种特殊情况下，柔性没有似乎继承了正确的值height: 100%和min-height: 100%-所以我试图用一些calc()功能，我在另一个问题发现（不幸的是我失去了联系，因为我在做另一台计算机上的研究）

请在下面找到我的工作解决方案，以解决此独特问题。我确实希望它能对其他人有所帮助。

#content_wrapper {
  position: relative;
  display: block;
  min-height: calc(100vh - 60px);
  left: 0px;
  margin-left: 230px; }

我没有使用flex，而是将vh（垂直高度）和css混合calc()在一起以删除小标题栏的值，并将剩余值设置为我的最小高度，而不是尝试填充空白空间（从相反的方向解决问题）

虽然我仍然愿意就更相关或经过改进的代码提出建议，但此代码可以完美地满足我的原始帖子的要求。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-03-31

我来说两句

0 条评论

登录后参与评论

上一篇：我如何根据表中的tr追加表的一部分？

TOP 榜单

文章