如何使用 CSS 制作此頁眉/內容/頁腳布局？

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

在擺弄了一段時間后，我發現了一個適用於> 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 4

試試這個

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

下面是示例代碼，您可以運行一個片段來查看結果。

 html,body { display: flex; flex-direction: column; height: 100%; } sidenav{ border:1px solid black; flex: .3; } container{ border:1px solid black; flex: 1; } header{ border:1px solid black; flex:.1; } content{ display:flex; flex:1; border:1px solid black; } footer{ border:1px solid black; flex:.1; }

 <body> <header >header</header> <content> <sidenav>sidenav</sidenav> <container>container</container> </content> <footer>footer</footer> </body>

Answer 6

帶網格

<div class='container'>
 <header>header</header>
 <div>content</div>
 <footer>footer</footer>
</div>


.container {
  display: grid;
  grid-template-columns: auto 1fr auto;
  height: 100vh;
}

Answer 7

試試這個

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 制作此頁眉/內容/頁腳布局？

問題描述

7 個解決方案

解決方案1
31 已采納 2011-08-19 14:43:26

解決方案2
5 2011-08-19 14:38:21

解決方案3
3 2013-10-18 13:54:00

解決方案4
3 2013-10-24 05:43:48

解決方案5
0 2021-08-31 06:01:56

解決方案6
0 2021-10-21 21:39:06

解決方案7
-1 2011-08-19 14:56:16

如何使用 CSS 制作此頁眉/內容/頁腳布局？

問題描述

7 個解決方案

解決方案1 31 已采納 2011-08-19 14:43:26

解決方案2 5 2011-08-19 14:38:21

解決方案3 3 2013-10-18 13:54:00

解決方案4 3 2013-10-24 05:43:48

解決方案5 0 2021-08-31 06:01:56

解決方案6 0 2021-10-21 21:39:06

解決方案7 -1 2011-08-19 14:56:16

解決方案1
31 已采納 2011-08-19 14:43:26

解決方案2
5 2011-08-19 14:38:21

解決方案3
3 2013-10-18 13:54:00

解決方案4
3 2013-10-24 05:43:48

解決方案5
0 2021-08-31 06:01:56

解決方案6
0 2021-10-21 21:39:06

解決方案7
-1 2011-08-19 14:56:16