个人头像

柠檬酸

1月前来过

控制台
欢迎来到我的博客!
默认封面

00:00/

播放列表

CSS秘密花园: Sticky footers布局

发布于2017-10-15 / 552次浏览

在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。

它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。

解决这类问题,Flexbox是最完美的方案。我们只需要几行CSS代码就可以完美的实现。

1.我们需要在<body>元素上设置display:flex。如果父元素(<body>)的三个块元素,使用Flexbox切换布局,还需要设置flex-flow:column
2.需要给<body>设置min-height值为100vh,让<body>内容不足视窗高度时也能占据整个视窗
3.这里我们需要在页头和页脚设置高度,但其内容的高度自动伸缩的来适配剩余空间。我们可以在<main>上设置flex值大于0(常用的是1):

记下来,防止自己忘记,当博客的文章高度不够时,可以很好的让footer置底。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<style>
html,body{
min-height: 100%;
}
*{margin:0; padding:0;}
body{
display:flex;
min-height:100vh;
flex-flow: column;

}
main{
flex:1;
}
footer{
background: linear-gradient(#222, #444);
color: white;
height: 75px;

}
</style>
</head>
<body>
<header>
<h1>Site name</h1>
</header>
<main>
<input type="checkbox" id="contents" /><label for="contents">Toggle contents</label>
<p>Bacon ipsum dolor sit amet turkey veniam shankle, culpa short ribs kevin t-bone occaecat. Et laborum venison nostrud, ut veniam sint kielbasa ullamco pancetta. Qui drumstick tail, bacon leberkas shoulder capicola laborum. Minim ipsum bacon, mollit laboris t-bone pariatur. Ham hock reprehenderit sint beef, sausage pig eiusmod t-bone shankle strip steak.</p>
<p>Cow enim excepteur, boudin dolore lorem magna fugiat consequat voluptate. Picanha fugiat chicken, cupim aliquip magna filet mignon prosciutto ut nostrud. Kielbasa rump frankfurter sunt corned beef. Andouille in cillum deserunt, rump et picanha landjaeger tongue anim.</p>
<p>Ad meatball ipsum ground round shank. Quis ipsum meatball exercitation. Laborum swine spare ribs, sunt ball tip magna t-bone venison. Velit doner voluptate non occaecat do ribeye kevin strip steak et. Esse biltong shank ribeye dolor pariatur aute deserunt non est eiusmod pork belly pancetta pork chop. Pork chop id consectetur rump, meatball short loin brisket tail andouille deserunt alcatra irure prosciutto do.</p>
<p>Dolore reprehenderit ex, meatball doner commodo consectetur ea ribeye. Ad aliqua kevin, chuck excepteur minim et cow esse ham hock landjaeger. Alcatra bresaola dolore tempor do, excepteur in velit flank officia dolore meatloaf corned beef picanha. Eu pancetta brisket eiusmod ipsum aute sausage, culpa rump shoulder excepteur nostrud venison sed pork loin. Tempor proident do magna ground round. Ut venison frankfurter et veniam dolore. Pig pork belly beef ribs kevin, doner exercitation magna esse shankle.</p>
<p>Flank anim chuck boudin id consectetur bresaola ham pork loin cupim andouille frankfurter. Proident do ball tip nostrud nulla sed, frankfurter ut commodo corned beef ut. Ex aute in, pig deserunt beef ribs turducken pastrami irure ball tip pork belly pork chop sausage id. Chicken sunt nisi tempor sed. In eiusmod non fatback tempor tenderloin pastrami adipisicing cow lorem ut tail jerky cupidatat venison. Jowl consequat commodo pork loin ipsum pork belly prosciutto aute beef. Ball tip shoulder aliqua, fugiat landjaeger kevin pork chop beef ribs leberkas hamburger cillum turkey ut doner culpa.</p>
</main>
<footer>
<p>© 2015 No rights reserved.</p>
<p>Made with ♥ by an anonymous pastafarian.</p>
</footer>
</body>
</html>

还有一种固定布局的解决方案,慕课老师那儿偷学的:

如图:要把最下面的X实现Sticky footers布局

直接说css的实现:

detail 是一个fixed布局的遮盖层,长宽都为100%

.detail{
  color: #fff;
  width: 100%;
  height: 100%;
  position: fixed;
  left:0;
  z-index:999;
  background-color:rgba(7,17,27,.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

作为我们的主体 detail-close 的同级 detail-wrapper,我们要设置detail-wrapper的最小高度为100%,保证撑满整个detail

.detail .detail-wrapper{
  min-height: 100%;
}

然后关键是我们的detail-close,要设置一个负的margin-top,这样就能为自身预留出位子,实现Sticky footers

.detail .detail-close{
  font-size:32px;
  color:rgba(255,255,255,.5);
  margin:0 auto;
  width: 32px;
  height: 32px;
  margin: -64px auto 0;
}

参考文章:
Sticky footers
Flex 布局教程:语法篇
慕课网

喜欢 3
TAGS:  
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。 转载请注明出处链接 : CSS秘密花园: Sticky footers布局

2 条评论

  1. 野兔 说道: 来自 Google Chrome 62.0.3202.89 in Windows 10
    2017-12-14 20:06

    好的,学习了(假装看懂了) :evil:

    • admin 博主 说道: 来自 Google Chrome 63.0.3239.59 in Windows 8.1
      2017-12-18 17:10

      @野兔 看不懂的话我口把口教你~ :cool: