풀페이지 창크기 줄일시 여백 없어지는 문제점

풀페이지 사용시 창의 크기가 줄어들면 여백이 없어진다

 

---

 

 

이렇게 여백이 사라져 위에 컨텐츠와 딱 붙어버림

 

 

 

 

---

pc 버전에서 분기점을 두어 

푸터섹션을 제외한 풀페이지 섹션에 최소 높이를 지정한다.

 

/* pc분기점에서 섹션높이가 750이하일때 적용 */
/* 섹션중에서 푸터가 아닌것은 높이에 제한을 주겠다. */
/* 최소높이를 750으로 해야 안줄어들음 아니면 다닥다닥 붙음*/
@media (min-width:1200px) and (max-height:750px) {
  #fullpage .section:not(#footer) {
    min-height: 750px;
  }
}

 

 

그럼 창높이를 줄여도 여백이 줄지않음

---

단 가로를 줄여 타브릿 . 모바일로 갔을때 

풀페이지 fp-tableCell 자동속성에 따라 min-height이 먹히지않는다

 

fp-tableCell 의 height을 auto 로 풀어주어 여백 패딩값을 다시 지정한다.

이때 상위에 먹힐수 있도록 !important 적용

/* 타블렛분기점 */
@media (max-width:1200px) {
  #fullpage .section:not(.main_visual) {
    height: auto !important;
  }
  #fullpage .section .fp-tableCell {
    height: auto !important;
  }
  .main_about {
    padding: 118px 0;
  }
}

---

그럼 내용만큼 높이가 줄어듬을 확인 

내용이없는 다른 섹션은 그냥 줄어든다.

---