ASP.net 母版页中的 Flexbox 粘性页脚答案

【问题标题】：Flexbox sticky footer in ASP.net masterpageASP.net 母版页中的 Flexbox 粘性页脚
【发布时间】：2016-12-22 13:51:02
【问题描述】：

无论我有多少内容，我都试图让页脚贴在页面底部。我想用 flexbox 来做这个。

我在 ASP.net (Microsoft Visual Studio) 中使用母版页，但它不起作用。

我用我的代码创建了this fiddle。

html {
    height: 100vh;
} 

.alignCenter {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site {
    display: flex;
    min-height: 100%;
    flex-direction: column;
}

.siteContent {
    flex: 1;   
}

我在 html CSS 中尝试了 % 和 vh。

我也尝试过使用常规的 HTML 和 CSS，我可以让它在那里工作，如 this fiddle 所示。

那么为什么它不能在 ASP.net 中工作呢？

【问题讨论】：

标签： html css flexbox footer

【解决方案1】：

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 5vh;
  background-color: red;
}

如果您希望页脚始终位于底部。您需要声明 position fixed 和 bottom: 0。我认为仅使用 flexbox 是无法实现的。

JSFiddle：https://jsfiddle.net/8eep942d/5/

【讨论】：

【解决方案2】：

它目前不适用于flexbox，因为您的表单元素嵌套得太多了。

所以试试这个 - 将 flex 应用到表单并添加这个：

form {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

检查并告诉我您的反馈。谢谢！

/* -------------- start of flexbox code ---------------- */

html {
  height: 100%;
}
.alignCenter {
  display: flex;
  align-items: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  justify-content: center;
}
.site form {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
.siteContent {
  flex: 1;
}
/* -------------- end of flexbox code ---------------- */

/* -------------- Not so relevant for the flexbox problem ---------------- */

form {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
header {
  width: 100%;
}
nav {
  text-align: center;
  height: 20vh;
}
nav ul li {
  display: inline-block;
  text-align: center;
  line-height: 30px;
  vertical-align: middle;
  padding: 20px 15px;
  font-size: 22px;
}
/* footer */

footer {
  height: 5vh;
  background-color: red;
}

<body class="site">
  <form id="form1" runat="server">
    <header>

      <nav class="alignCenter">
        <!-- for vertical and horizontal alignment -->

        <ul>
          <li><a href="Default.aspx" title="">Forside</a>
          </li>
          <li><a href="portfolio.aspx" title="">Portfolio</a>
          </li>
          <li><a href="kontakt.aspx" title="">Kontakt</a>
          </li>
        </ul>
      </nav>
    </header>
    <main class="siteContent">
      <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
      </asp:ContentPlaceHolder>
    </main>

    <footer>
      <p>Some footer text</p>
    </footer>
  </form>
</body>

【讨论】：

确实如此，非常感谢:) 你能帮我理解它为什么起作用吗，我不明白为什么定位表单有什么要说的。
那是因为flex 作用于直接子 div 并且定位是必要的以拉伸 form 元素以填充主体
那么通过为表单添加五行 CSS 来填满整个屏幕？
是的，它填满了body 元素——你可以通过在浏览器中检查元素来查看。