3 div - 置顶页眉、置顶页脚、动态内容区域、全部垂直居中、内容水平居中

Question

使用 HTML 和 CSS，我试图实现一个看似简单的布局，其中包含三个组件：一个固定页眉、一个固定页脚和一个占浏览器窗口剩余空间 100% 的中间区域。我还希望我的整个网站水平居中。

我已经从这个论坛搜索并应用了各种答案，但一旦我开始将新特性应用于页面，似乎没有任何效果。

我还想将上述内容区域中的水平表格以及页眉和页脚中的位置元素绝对居中——但我似乎无法掌握基本知识。我做错了什么？

#site {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

#header {
  width: 1024px;
  height: 120px;
  display: table-cell;
  vertical-align: middle;
  background-color: aqua;
}

#content {
  width: 1024px;
  height: 100%;
  vertical-align: middle;
  background-color: red;
}

#footer	{
  width: 1024px;
  height: 120px;
  display: table-cell;
  vertical-align: middle;
  background-color: aqua;
}

.logo { 
  display: inline-block;
  vertical-align: middle;
}

.item {
  display: table-cell;
}

.copy {
  font-size: 12pt;
  font-family: Arial;
  display: inline-block;
  vertical-align: middle;
}

.l1nk {
  display: inline-block;
  vertical-align: middle;
}

.l2nk {
  display: inline-block;
  vertical-align: middle;
}

<div id="site">
    <div id="header">
        <img class="logo" src="Images/logo.png" alt="logo" height="60" width="195" />
    </div>
    <div id="content">
        <img class="item" src="Images/item.png" alt="logo" height="150" width="150" />
    </div>
    <div id="footer">
        <div class="copy">xoxo &copy xoxo </div>
        <div class="l1nk">
            <a href="http://instagram.com/guiser_"><img src="Images/insta100.png" alt="instagram" height="25" width="25" /></a>
        </div>
        <div class="l2nk">
            <a href="https://twitter.com/guiser_"><img src="Images/twttr100.png" alt="twitter" height="25" width="25" /></a>
        </div>
    </div>

我是这个论坛的新手，并且是一名新手程序员，所以我会顺势而为。但我想要一个更坚实的基础，以便我可以继续编写我的代码。非常感谢

Answer 1

个人 我会使用 flexbox 来完成此任务，但也可以使用一种简单的方法来完成此操作，而无需学习 flexbox 看起来有点像这样

https://jsfiddle.net/kriscoulson/2fqu03b2/

这个在内容块中有内容

https://jsfiddle.net/kriscoulson/2fqu03b2/1/

HTML

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  width: 1024px;
  height: 100%;
  position: relative;
}

.header {
  background-color: cyan;
  height: 120px;
}

.content {
  background-color: red;
  height: calc(100% - 240px); 
  overflow: auto;
}

.footer {
  width: 100%;
  height: 120px;
  background-color: cyan;
  position: absolute;
  bottom: 0;
}

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

您可以使用 css 中的 calc 函数来帮助确定高度，因为您知道页眉是 120 像素，页脚是 120 像素，我们知道内容不会占用总共 240 像素。

// 编辑

如果您正在尝试学习 flexbox 来做这件事，那么这是使用 flexbox https://jsfiddle.net/kriscoulson/2fqu03b2/2/

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

.container {
  width: 1024px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.header {
  background-color: cyan;
  height: 120px;
}

.content {
  background-color: red;
  overflow: auto;
  flex: 1;
}

.footer {
  width: 100%;
  height: 120px;
  background-color: cyan;
  justify-content: flex-end;
}

<div class="container">
  <div class="header"> header </div>
  <div class="content"> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus fugit atque magni quis at, voluptate consectetur voluptates laboriosam distinctio beatae quos sunt architecto? Quis nihil optio incidunt a, ad iure!</div>
  <div>Obcaecati expedita maiores ab. Tempora alias culpa, error quasi, quia delectus. Ratione, sapiente, at repellendus aspernatur debitis nesciunt eum fuga quibusdam in, suscipit omnis minima vero error perspiciatis, eaque corrupti?</div>
  <div>Ullam praesentium doloremque inventore! Similique dolor delectus, consequatur at doloremque quibusdam sed ullam officiis molestias dignissimos doloribus in obcaecati explicabo ipsum ducimus et error, atque. Itaque consequatur perspiciatis dignissimos eligendi!</div>
  <div>Maxime natus asperiores autem nobis in dicta necessitatibus consequuntur et expedita architecto molestias veniam, voluptate adipisci corporis qui sed modi sunt saepe sapiente vel voluptatem placeat facere nihil repudiandae. Cumque?</div>
  <div>Rerum quod asperiores reprehenderit itaque sunt repellat natus nostrum, modi exercitationem impedit odit adipisci voluptates, facilis eligendi eum ex accusamus tenetur omnis fugiat iste provident ipsa earum. Optio, culpa, repudiandae.</div>
  <div>Quo amet ex obcaecati natus, nesciunt accusamus eius laudantium magni id. Dolorum mollitia ab nam saepe excepturi, sapiente quisquam ducimus, perspiciatis obcaecati modi qui, sit laborum vero vitae cumque sequi!</div>
  <div>Repudiandae laborum ducimus totam! Neque aliquam alias necessitatibus praesentium numquam fuga totam inventore quis ab tempore aliquid dolore, similique voluptatem ipsam nisi earum ea quidem dolor, optio quibusdam? Sed, corrupti.</div>
  <div>Culpa a quos, explicabo adipisci pariatur impedit obcaecati consectetur aut maxime architecto eos facere ex voluptate provident iste blanditiis sed laboriosam magni aspernatur esse corrupti quasi quod! Officiis corrupti, voluptatibus.</div>
  <div>Optio sunt ipsam, et esse libero consequatur maiores illum nihil ad asperiores sed rem soluta sapiente quia nobis voluptatem, velit pariatur sint non aperiam, nostrum. Dolorum officiis, amet tenetur odio?</div>
  <div>Culpa dicta in soluta, cum, sapiente natus atque, vitae, laudantium ipsam dolorem obcaecati ad quibusdam. Accusantium consequatur sit odit minima, omnis nihil unde pariatur. Distinctio doloremque earum, deserunt doloribus culpa.</div>
  <div>Doloribus nobis, minima animi. Rerum magni hic dicta iste, laborum similique, sed corrupti accusamus ad quam assumenda ab consectetur suscipit nostrum. Sapiente aliquid, voluptatibus eius optio modi tenetur, unde iure.</div>
  <div>Impedit, dicta, atque nesciunt quos laboriosam facilis, nihil assumenda officiis omnis reiciendis iste quisquam asperiores eveniet ad corrupti error voluptatum consectetur velit neque. Minima distinctio, corporis expedita eius sapiente cumque?</div>
  <div>Repellendus tempora rem corporis ullam soluta est veritatis, itaque! Quo fugit dicta minus obcaecati minima repellendus numquam, ipsam non eligendi porro exercitationem nesciunt vel similique nemo necessitatibus dolorem dolorum id?</div>
  <div>Ad obcaecati voluptas nobis veniam explicabo ut atque eaque itaque, magni sed, veritatis totam ea, repellendus in quia iure soluta suscipit aliquam? Adipisci fugit ipsum delectus nisi vitae, veritatis ducimus.</div>
  <div>Dolorem inventore facere doloremque quod excepturi. Quo nostrum non quaerat pariatur. Pariatur necessitatibus deleniti ea dolores ut sequi saepe sint nulla. Minima harum explicabo voluptate sunt, adipisci quisquam delectus distinctio.</div>
  <div>Neque, numquam libero tempora harum accusantium tempore veniam reprehenderit ea ratione, delectus alias molestias reiciendis eos cumque labore nulla quasi aliquam qui eaque accusamus dolor iste sed veritatis? Maxime, cum!</div>
  <div>Reiciendis veritatis recusandae aliquid eos laudantium culpa, consectetur aspernatur voluptate expedita? Explicabo, quisquam! Alias mollitia velit nesciunt, tempore ipsum distinctio, iusto, quidem dolor odio consequatur, ipsa iste. Repellendus veritatis, quas?</div>
  <div>Quos omnis repudiandae, corrupti consequuntur culpa. Magnam aperiam, ad accusantium consequuntur. Nemo iure ab temporibus molestias et nesciunt eum excepturi magni, ipsum quae, molestiae eaque reprehenderit voluptatem! Fugit, praesentium, beatae!</div>
  <div>Sit officia, quasi veritatis sint inventore odit consequatur iusto et ex sequi nihil quisquam praesentium, quos neque eum. Atque recusandae dolorum illum iusto consectetur dolores maiores blanditiis! Libero, explicabo officiis?</div>
  <div>Ratione repudiandae ad officia quas nemo eos molestias quasi, perferendis facere, aspernatur. Aliquid nobis est dolor natus soluta harum veniam enim deserunt sint. Unde corrupti magni nobis, non a, necessitatibus.</div> </div>
  <div class="footer"> footer </div>
</div>

Answer 2

在等待有关它的反馈时，我会选择flex 选项。 ...

header,
footer {
  background: tomato;
  min-height: 15vh;/* any height is fine actually, mind some room for main if small window ... header& footer should not be covering the entire window */
  display: flex;/* to dispatch children */
  flex-direction: column;/* not in a row ! */
}

main {
  background: turquoise;
  flex: 1;/* fill up entire space */
  overflow: auto;/* if space too small, let me scroll */
  display: flex;/* to easy center content */
  flex-direction: column;/* lets behave as block container */
}

div {
  margin: auto;/* flex children will center on both axis , an easy one !*/
}

body {
  max-width: 1024px;/* so it can shrink beloww , else remove the max- prefix */
  height: 100vh;/* window's height */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

main:hover div:after {
  display: block;
  content: 'test';
  height: 200vh;
}

<header>
  <div>
    <h1>header</h1>
  </div>
</header>
<main>
  <div>main, hover me to make me taller and scroll</div>
</main>
<footer>
  <div>footer </div>
</footer>

---

对于显示表格布局，你应该从 body 开始：

html, body {
  height:100%;
  margin:0;
}
body {
  width:1024px;
  margin:auto;
  display:table;
}
header,footer,main {
  display:table-row;
}
header>div,main>div,footer>div {
  display:table-cell;
  vertical-align:middle;
}
main {
  height:100%;
  background:turquoise;
}
footer,header {
  height:120px;
  background:tomato;
}

<header>
  <div>
    <h1>header</h1>
  </div>
</header>
<main>
  <div>main content, i will not scroll, i will push the footer</div>
</main>
<footer>
  <div>footer </div>
</footer>