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

由于您的表单元素过于嵌套，因此目前无法与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主页中的Flexbox粘性页脚

1 个答案: