ASP.net masterpage 中的 Flexbox 粘性页脚

Question

我试图让我的页脚贴在页面底部，无论我有多少内容。我想用 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 中不起作用？

Answer 1

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

如果您希望页脚始终位于底部。你需要声明 position fixed 和 bottom: 0。我不认为你可以只使用 flexbox 来实现它。

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

Answer 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>

ASP.net masterpage 中的 Flexbox 粘性页脚

Flexbox sticky footer in ASP.net masterpage

html

css

footer

flexbox