Eveningstar

[sticky menu] 고정 메뉴를 위한 css 처리_ 스티키 푸터 본문

Storage

[sticky menu] 고정 메뉴를 위한 css 처리_ 스티키 푸터

두루루루루 2019. 12. 22. 22:59

*고정 메뉴를 위한 방법 찾기 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

 

저작자표시

'Storage' 카테고리의 다른 글

UI/UX 디자인을 감별해보는 사이트  (0) 2019.02.08
[레이어팝업] 제자리에서 팝업열기  (0) 2019.01.25
[Swiper] thumbs gallery, 썸네일 갤러리  (0) 2019.01.24
[소스코드하이라이터] SyntaxHighlighter  (0) 2018.11.29
pc랑 mobile 구분하기  (0) 2018.10.15
'Storage' Related Articles more
Comments