如何使用CSS制作此页眉/内容/页脚布局？

小编典典

如何使用CSS制作此页眉/内容/页脚布局？

css

|        Header        |
|______________________|
|                      |
|                      |
|        Content       |
|                      |
|                      |
|______________________|
|        Footer        |
|______________________|

我想制作这个UI，每个都是div。标头高度为30像素。页脚为30px。但是我不知道内容的高度。我需要使用用户框架进行计算。

总高度应为100％。

我可以用纯CSS做到吗？

阅读 640

2020-05-16

共1个答案

小编典典

使用flexbox，这很容易实现。

将包含3个隔层的包装器display: flex;的高度设置为100%或100vh。包装器的高度将填满整个高度，这display: flex;将使该包装器的所有子级具有适当的flex-properties（例如flex:1;），由flexbox-magic控制。

标记示例：

<div class="wrapper">
    <header>I'm a 30px tall header</header>
    <main>I'm the main-content filling the void!</main>
    <footer>I'm a 30px tall footer</footer>
</div>

和CSS一起：

.wrapper {
    height: 100vh;
    display: flex;

    /* Direction of the items, can be row or column */
    flex-direction: column;
}

header,
footer {
    height: 30px;
}

main {
    flex: 1;
}

-[下面的旧答案]-

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Layout</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  header {
    height: 30px;
    background: green;
  }
  footer {
    height: 30px;
    background: red;
  }
</style>
</head>
<body>
  <header>
    <h1>I am a header</h1>
  </header>
  <article>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.
    </p>
  </article>
  <footer>
    <h4>I am a footer</h4>
  </footer>
</body>
</html>

适用于所有现代浏览器（FF4 +，Chrome，Safari，IE8和IE9 +）

2020-05-16