• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 HTML/CSS 게시판 float 속성을 주지 않았는데 붕뜨는 이유

float 속성을 주지 않았는데 붕뜨는 이유

6 글 보임 - 11 에서 16 까지 (총 16 중에서)
  • 글쓴이
  • #15042

    frysweet
    참가자

    html부분 css 추가로 올립니다.
    원래 짜던코드가 양이 많고 복잡해서 질문 올리려고 따로 html 간략하게 만들고 css 는 그대로 연결해서 사용했는데요.
    증상은 원래 코드나 질문용 코드나 똑같습니다 ㅠ (body height이 제대로 나오지 않는것)

    #15049

    codingapple
    키 마스터

    사진으로 봐서는 원인이 뭔지 잘모르겠습니다 프로젝트 파일 전체를 깃헙 이런데 올려주시거나 

    높이 1000px위에 있는 html 요소들을 하나씩 지워보며 테스트 해봅시다 

    #15322

    frysweet
    참가자

    html 지워보면서 테스트 해보고, 다시 재정리도 해봤는데 같은 증상입니다. ㅜㅡㅠ
    -> <body> height 이 원래 크기보다 작은 것

    깃허브에 올려봤는데 확인 부탁드립니다.

    https://github.com/frysweet/layout

    #15341

    codingapple
    키 마스터

    html 태그에 height 100% 준 것 때문에 그런듯요

    height : 100% 의 뜻은 부모 박스 height의 100% 를 의미해서

    html 태그의 부모박스는 브라우저 viewport 입니다

    그래서 html 태그 안의 내용물도 현재 브라우저 높이의 100%밖에 안되는 것입니다 

    #15390

    frysweet
    참가자

    명절인데 답변해주셔서 감사합니다!
    덕분에 해결했어요 😀

    <html>, <body> 둘다 height : 100%; 삭제해서 테스트 해보고,
    <html> 은 height : 100% 주고, <body> 만 height :100% 를 삭제한 경우도 테스트 해봤는데, 
    이런 경우에도  sticky 넣어준 <nav>가 제대로 작동합니다.

    sticky 속성이 들어간 <nav>의 부모는 <body> 인데,
    이런경우의 <nav>는 <html>의 height: 100%; 에는 영향받지 않고 제대로 작동한다.. 고 이해하면 맞나요? 

    #15395

    codingapple
    키 마스터

    네 태그의 높이를 설정하지않았으면 알아서 잘 내용에 맞게 길어집니다

6 글 보임 - 11 에서 16 까지 (총 16 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠