使用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 © 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>
我是这个论坛的新手，也是一个新手程序员，所以我会不知所措。但我希望有一个更强大的基础，以便我可以继续使用我的代码。非常感谢
答案 0 :(得分：0)
个人我会使用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函数来帮助确定高度，因为你知道标题是120px而页脚是120px我们知道内容不会占用总数的240px。
//编辑
如果你正在尝试学习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>
答案 1 :(得分：-1)
我在等待有关它的反馈时，我会选择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>
对于display table-layout，你应该从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>