IT/HTML&CSS

[레이아웃 css] 헤더포함 height 100% 높이 만들기

9aram 2019. 6. 14. 10:59
반응형

 

이런구조일때 height 100% 임에도 불구하고 스크롤바가 생기는 현상이 발생한다

 

html의 구조는 이렇다

 

헤더  - <nav>

사이드메뉴바 - <aside>

 

 

 

이럴때 해결방법

 

1.일단 호완성을 위해 독타입설정

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.html, body에 height 100%

html, body {
height: 100%;
}

3.사이드바 설정

사이드바가 height: 100%의 속성을 가지면 헤더 높이만큼의 스크롤이 생기게된다

그렇기 때문에 헤더 길이 만큼의 마이너스 margin값을 사이드바에 주면 스크롤은 사라진다

그런데 이때 마이너스값때문에 이렇게 사이드바가 잘리는 현상이 생기는데

    margin: -60px 0;

이때 padding값을 똑같이 주게되면 잘리는 현상이 사라지고 다시 스크롤이 생기게된다 

padding: 60px 0;

.main-sidebar {
    float: left;
    height: 100%;
    width: 200px;
    background: #4260b4;
    margin: -60px 0;
    padding: 60px 0;
}

4. 여기서 body에 overflow:hidden 속성을주면 딱 이렇게 안짤리고 잘나온다

html, body {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-family: 'NanumSquare';
    font-size: 15px;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;

사실 하다가 알게됬는데 그냥 바로 body에 overflow: hidden을 넣게되면 되더라 ㅋㅋㅋㅋㅋㅋ 다른작없없이..

반응형