Question

我希望中间行能像其他任何网站一样填满整个浏览器。因此，即使内容很少，我也希望中间行填满整个空间。

这是css

@import "compass/css3";

.wrapper {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;  

  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;

  font-weight: bold;
  text-align: center;
}

.wrapper > * {
  padding: 10px;
  flex: 1 100%;
}

.header {
  background: tomato;
}

.footer {
  background: lightgreen;
}

.main {
  text-align: left;
  background: deepskyblue;
}

.aside-1 {
  background: gold;
}

.aside-2 {
  background: hotpink;
}

@media all and (min-width: 600px) {
  .aside { flex: 1 auto; }
}

@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .aside-1 { order: 1; } 
  .main    { order: 2; }
  .aside-2 { order: 3; }
  .footer  { order: 4; }
}

body {
  padding: 2em; 
}

这是html

<div class="wrapper">
  <header class="header">Header</header>
  <article class="main">
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>  
  </article>
  <aside class="aside aside-1">Aside 1</aside>
  <aside class="aside aside-2">Aside 2</aside>
  <footer class="footer">Footer</footer>
</div>

这是小提琴 - https://jsfiddle.net/zL26otcu/

Answer 1

您需要对标记进行轻微更改，并对样式进行一些更改。

最重要的变化是包裹您的Sub Test1() Dim CellColor As Variant Dim SearchDate As String For i = 1 To 19 CellColor = Cells(i, 2).Interior.Color SearchDate = Cells(i, 2).NumberFormat If Cells(i, 2).Value <> "" Then For j = i To 19 If i <> j And CellColor = Cells(j, 2).Interior.Color And SearchDate = Cells(j, 2).NumberFormat Then Cells(j, 8).Interior.Color = RGB(0, 255, 255) End If Next j End If Next i End Sub和main元素并提供aside，使其始终填充剩余空间

Updated fiddle

flex: 1

@import "compass/css3";

html, body {
  margin: 0;
  height: 100vh;
}
body {
  padding: 2em;
  box-sizing: border-box;             /*  include padding size within height  */
}

.wrapper {
  min-height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: column nowrap;   /*  flow as column, no wrap  */
  flex-flow: column nowrap;
  font-weight: bold;
  text-align: center;
}

.header {
  padding: 10px;
  background: tomato;
}

.footer {
  padding: 10px;
  background: lightgreen;
}

.wrapper-inner {
  flex: 1;                            /*  fill remaining space  */
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  font-weight: bold;
  text-align: center;
}

.main {
  padding: 10px;
  text-align: left;
  background: deepskyblue;
}

.aside-1 {
  padding: 10px;
  background: gold;
}

.aside-2 {
  padding: 10px;
  background: hotpink;
}

@media all and (min-width: 600px) {
  .aside {
    flex: 1 auto;
  }
}

@media all and (min-width: 800px) {
  .main {
    flex: 3 0px;
  }
  .aside-1 {
    order: 1;
  }
  .main {
    order: 2;
  }
  .aside-2 {
    order: 3;
  }
}

Answer 2

将height:100vh添加到.main类

https://jsfiddle.net/zL26otcu/1/

Answer 3

如果我复制了你的目标，那么将display: block添加到.main就可以解决这个问题。我已经更新了你的jsfiddle，这里有链接：

https://jsfiddle.net/zL26otcu/2/

使用Flexbox填充剩余空间

3 个答案: