티스토리 뷰

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을 넣게되면 되더라 ㅋㅋㅋㅋㅋㅋ 다른작없없이..

반응형

'IT > HTML&CSS' 카테고리의 다른 글

textarea 삼각형 없애기 짱쉬움! How to remove triangle in textarea  (0) 2019.07.03
background-position 안먹힘 오류  (0) 2019.06.17
css 수직정렬 가로정렬 꿀팀 제일 쉬운 방법!!!  (0) 2019.06.16
box-shadow 안보일때 div 앞으로 보내기  (0) 2019.06.15
html <progress> css progress bar Element  (0) 2019.02.21
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함