CSS：

Question

我离设计师最远，因此视觉设计的其他人看。我购买了一个模板，其中设计师在主容器上使用了min-height: 1000px属性，以确保背景颜色始终延伸到底部。

我正在努力纠正这个问题，因此遇到了以下问题; Make a div fill the height of the remaining screen space - 清楚地标识了新（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 failing to fill in the gaps!

我没有页脚，我也不打算诋毁它。（如果稍后询问）
我试图在html和body标签上使用height: 100%无效
我以前尝试使用height:100vh，但意识到它也会为我的标题区域添加高度，因为它存在于视口本身中。

我该如何处理这个问题？ Flex是适当的分辨率吗？

Answer 1

在这种特殊情况下，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()混合在一起以移除我的小标题栏的值，并将剩余值设置为我的最小高度，而不是尝试填充空的空间（从反方向解决问题）

虽然我仍然愿意接受有关更相关或改进代码的建议，但此代码完全符合原始帖子的要求。

Answer 2

html {
  height: 100%;           /* Fill all the window */
}
body {
  min-height: 100%;       /* At least fill all <html> */
  display: flex;          /* Magic begins */
  flex-direction: column; /* Column layout */
}
#main {
  flex-grow: 1;           /* Grow to fill available space */
}

html {
  height: 100%;           /* Fill all the window */
}
body {
  min-height: 100%;       /* At least fill all <html> */
  display: flex;          /* Magic begins */
  flex-direction: column; /* Column layout */
  margin: 0;
  padding: 0;
}
#main {
  flex-grow: 1;           /* Grow to fill available space */
  display: flex;
  background: #e8e8e8;
}
#content_wrapper {
  background: yellow;
  flex-grow: 1;
}

<header>
  Header
</header>
<div id="main">
  <aside id="sidebar_left">Aside</aside>
  <section id="content_wrapper">Content</section>
</div>

CSS Flex - 用div填充空白区域

CSS：

HTML结构：

2 个答案: