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

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

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

总高度应为100％。

我可以用纯CSS做吗？

解决方法

使用flexBox，这很容易实现。

设置包含3个隔间的包装器以显示：flex;给它一个100％或100vh的高度。包装器的高度将填满整个高度，并显示：flex;将导致具有适当flex属性(例如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;
}

这是Codepen上的代码：http://codepen.io/enjikaka/pen/zxdYjX/left

你可以在这里看到更多的flexBox-magic：http://philipwalton.github.io/solved-by-flexbox/

或者在这里找到一个精心制作的文档：http://css-tricks.com/snippets/css/a-guide-to-flexbox/

– [旧答案] –

你去：http://jsfiddle.net/pKvxN/

<!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)

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

解决方法

猜你在找的CSS相关文章