Skip to content

Instantly share code, notes, and snippets.

@iflamed

iflamed/index.html

Created April 25, 2016 03:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save iflamed/88f85f6e1951132c099483060e2c8729 to your computer and use it in GitHub Desktop.
Save iflamed/88f85f6e1951132c099483060e2c8729 to your computer and use it in GitHub Desktop.
Download ZIP
Sticky footer layout
Raw
index.html
<body>
<header>...</header>
<section class="main-content">...</section>
<footer>...</footer>
</body>
Raw
layout.css
html{
height: 100%;
}
body{
display: flex;
flex-direction: column;
height: 100%;
}
header{
/* 我们希望 header 采用固定的高度，只占用必须的空间 */
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
.main-content{
/* 将 flex-grow 设置为1，该元素会占用所有的可使用空间
而其他元素该属性值为0，因此不会得到多余的空间*/
/* 1 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 1 0 auto;
}
footer{
/* 和 header 一样，footer 也采用固定高度*/
/* 0 flex-grow, 0 flex-shrink, auto flex-basis */
flex: 0 0 auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment