[sticky menu] 고정 메뉴를 위한 css 처리_ 스티키 푸터
*고정 메뉴를 위한 방법 찾기 v.1
[하단 푸터 고정 방법]
** 참고글 css trick **
-> https://css-tricks.com/couple-takes-sticky-footer/
1) Ryan Fait's HTML5 CSS Sticky Footer
https://css-tricks.com/snippets/css/sticky-footer/
Sticky Footer | CSS-Tricks
Works great if you can apply a fixed height to the footer. Content! I'm the Sticky Footer. * { margin: 0; } html, body { height: 100%; } .page-wrap {
css-tricks.com
이 방법은 빈 요소가 필요하다.(컨텐츠와 푸터 사이에 여백을 주기 위해)
고정된 푸터의 높이값을 콘텐츠 랩(wrap)의 padding-bottom값으로 준 뒤, 박스사이징을 이용하여 높이 값을 100%로 맞춰준다.
HTML
|
1
2
3
4
5
6
7
8
|
<div class="page-wrap">
Content!
<footer class="site-footer">
I'm the Sticky Footer.
</footer>
</div>
|
cs |
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
* { margin: 0; }
html, body {
height: 100%;
}
.page-wrap {
min-height: 100%;
padding-bottom: 100px;/* 고정된 푸터의 높이값 */
box-sizing:border-box;
}
.site-footer {
position:absolute;
bottom:0;
width:100%;
height:100px;
background:orange;
}
|
cs |
2) calc() 함수를 이용한 고정 푸터
https://priteshgupta.com/2016/05/sticky-css-footer/
- clac() 함수를 이용해서 콘텐츠 랩(wrap) 부분에 푸터의 높이값인 70px을 뺀 나머지 값[ clac(100vh - 70px) ]을 높이로 정하고, 70px을 푸터의 높이값으로 정하여, 고정 푸터를 생성합니다.
HTML
|
1
2
3
4
5
6
|
<body>
<div class="wrap">
content
</div>
<footer class="footer"></footer>
</body>
|
cs |
CSS
|
1
2
3
4
5
6
7
8
9
10
11
|
body {
margin: 0; /* If not already reset */
}
.wrap{
min-height: calc(100vh - 70px);
}
footer {
height: 70px;
}
|
cs |
3) flex 를 활용한 고정푸터 만들기1
이 방법은 flex 속성을 이용하여 고정 푸터를 만드는 방법이다.
플렉스 정렬을 통해 항상 하단에 푸터가 위치 할 수 있도록 돕는다.
- ie 버전을 flex속성을 어디까지 지원하는지 canIuse 에서 확인해보도록 하자.
HTML
|
1
2
3
4
5
6
7
|
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
|
cs |
CSS
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}
|
cs |
-> flex를 바디에 설정한뒤 column으로 수직정렬을 해준다.
-> .content에 flex: 1을 설정, .footer에는 flex-shrink:0을 설정하여 .content 다음에 올수있도록 설정
3-1) flex 를 활용한 고정푸터 만들기2
HTML
|
1
2
3
4
5
|
<body class="body">
<header>header</header>
<main class="content">content</main>
<footer>footer</footer>
</body>
|
CSS
|
1
2
3
4
5
6
7
8
9
|
.body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
.content {
flex: 1;
}
|
cs |
*번외
css 중에 position: stycky; 가 있음(!!!!!!!!!!!!), 다만 ie11 지원불가,,,(그냥 쓰지말라는거-_-)
- 레진기술블로그에 소개된 css-sticky
https://tech.lezhin.com/2019/03/20/css-sticky
CSS { position: sticky }
프리미엄 웹툰 서비스 - “레진코믹스” 를 만들고 있는 레진엔터테인먼트가 운영하는 기술 블로그입니다. 글로벌 콘텐츠 플랫폼을 만들면서 익힌 실전 경험과 정보, 최신 기술, 팁들을 공유하고 있습니다. 훌륭한 개발자님들을 계속 모시고 있으니 편하게 지원해주세요!
tech.lezhin.com
- w3c school 튜토리얼
https://www.w3schools.com/howto/howto_css_sticky_element.asp
How To Create a Sticky Element
How TO - Sticky Element Learn how to create a sticky element with CSS. Try it Yourself » Note: This example does not work in Internet Explorer or Edge 15 and earlier versions. Sticky Element Example div.sticky { position: -webkit-sticky; /* Safari */ p
www.w3schools.com