Question

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

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

总高度应为100％。

我可以在纯CSS中完成吗？

Answer 1

使用flexbox，很容易实现。

将包含3个分区的包装器设置为display: flex;，并将其设置为100%或100vh的高度。包装器的高度将填充整个高度，display: 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 +）

Answer 2

以下是如何：

页眉和页脚的高度为30px。

页脚粘贴在页面底部。

HTML：

<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>

CSS：

#header {
    height: 30px;
}
#footer {
    height: 30px;
    position: absolute;
    bottom: 0;
}
body {
    height: 100%;
    margin-bottom: 30px;
}

在jsfiddle上试试：http://jsfiddle.net/Usbuw/

Answer 3

试试这个

<!DOCTYPE html>

<html>

<head>

<title>Sticky Header and Footer</title>

<style type="text/css">

/* Reset body padding and margins */

body {
    margin:0;

    padding:0;
}

/* Make Header Sticky */

#header_container {

    background:#eee;

    border:1px solid #666;

    height:60px;

    left:0;

    position:fixed;

    width:100%;

    top:0;
}

#header {

    line-height:60px;

    margin:0 auto;

    width:940px;

    text-align:center;
}

/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/

#container {

    margin:0 auto;

    overflow:auto;

    padding:80px 0;

    width:940px;

}

#content {

}

/* Make Footer Sticky */

#footer_container {

    background:#eee;

    border:1px solid #666;

    bottom:0;

    height:60px;

    left:0;

    position:fixed;

    width:100%;
}

#footer {

    line-height:60px;

    margin:0 auto;

    width:940px;

    text-align:center;

}

</style>

</head>

<body>

<!-- BEGIN: Sticky Header -->
<div id="header_container">

    <div id="header">
        Header Content
    </div>

</div>
<!-- END: Sticky Header -->

<!-- BEGIN: Page Content -->
<div id="container">

    <div id="content">

            content
        <br /><br />
            blah blah blah..
        ...
    </div>

</div>
<!-- END: Page Content -->

<!-- BEGIN: Sticky Footer -->
<div id="footer_container">

    <div id="footer">

        Footer Content

    </div>

</div>

<!-- END: Sticky Footer -->

</body>

</html>

Answer 4

在摆弄了一段时间后，我找到了一个适用于＆gt; IE7，Chrome，Firefox的解决方案：

http://jsfiddle.net/xfXaw/

* {
    margin:0;
    padding:0;
}

html, body {
    height:100%;
}

#wrap {
    min-height:100%;

}

#header {
    background: red;
}

#content {
    padding-bottom: 50px;
}

#footer {
    height:50px;
    margin-top:-50px;
    background: green;
}

HTML：

<div id="wrap">
    <div id="header">header</div>
    <div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. </div>
</div>
<div id="footer">footer</div>

Answer 5

试试这个

CSS

.header{
    height:30px;
}
.Content{
    height: 100%; 
    overflow: auto;
    padding-top: 10px;
    padding-bottom: 40px;
}
.Footer{
    position: relative;
    margin-top: -30px; /* negative value of footer height */
    height: 30px;
    clear:both;
}

HTML

  <body>
    <div class="Header">Header</div>
    <div class="Content">Content</div>
    <div class="Footer">Footer</div>
  </body>

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

5 个答案: