body 태그에 height 110vh를 줘써 그렇게하고 화면 아래 잘린 10%는 footer 태그를 쓰려고했거든
그런데 위에 보이는것처럼 header가 들어있는 div에 padding 10%를 주니까 110vh가 아니라 더 늘어난다 이게 문제인거야
그러다보니까 내가 원했던건 한 화면에 푸터를 제외한 모든 정보를 보여주는거였는데
그게 이뤄지질 않고있어
아까 답변 고마운데 조금 설명 덧붙여주면 안댈까
각 태그에 지정된 크기를 변경하지 않으면서 마진이랑 패딩을 주는 방법이 필요해
div에 padding 10%가 무슨 의도인거지
내용이 너무 가장자리에 붙어있길래 조금 띄워주려고했지
box-sizing: border-box 써보셈
신기하게 padding에는 되는데 마진에는안대네 110vh준게 좋지않은 방식인건가
margin의 의도가 요소 바깥에 공간을 주는거라 요소 크기에 포함 안되는건 당연한거임
스크롤없이 쓰고 싶은데 110vh이거말고 좋은방법이 따로있어?
자스로 화면 크기 알아낸다음 비율 주기?
height에 110vh는 왜넣은거?
스크롤 없이 모든 정보를 보여주려고했어 10 남는건 그냥 아래에 푸터 넣고
친구야 FLEX나 Grid에 대해 배워보지 않을래?
flex 사용중이야
flex-row로 가로 세줄 만들고 flex column으로 분홍이랑 노랑나눈건데
vh 기준으로 푸터를 잡는건 별로 좋지 않음, 브라우저가 작은 경우에 푸터의 최소 사이즈를 보장을 못해줌
footer { height: 10vh; min-height: 15rem; }
min만 걸어주면 댈까여
푸터 저렇게 잡고 컨테이너를 따로 잡음 .container { display: flex; flex-direction: column; height: 100vh; } 세로방향 플렉스로 중간에 메인 컨텐츠가 쫙쫙 늘어나게 만들거임 main { flex-grow: 1; }
container header, main, /contaienr footer 편의상 100vh짜리 컨테이너 만들고 그 안에 다 때려박은거임 계층을 자연스럽게 만들거면 헤더를 바깥으로 빼서 헤더랑 푸터를 같은 계층에 놓고 헤더는 푸터처럼 높이를 따로 잡아줘야함 그러면 메인은 100vh - (header + footer)
암튼 컨테이너를 잡고 컨테이너를 세로 방향으로 플렉스 때리고 메인을 쫙쫙 늘려주니까 헤더가 자리 잡은 다음에 그 남은 공간을 메인이 채움
와 개어렵다!
헤더에 패딩을 준다고 했을때 패딩이나 마진을 준 만큼 늘어나는건 당연한거임 대신 위처럼 만들면 메인의 높이는 남는 공간을 최대한 채우는거니까 헤더가 늘어나는 만큼 자동으로 줄어들겠지
5vh만큼만 이해가대네
헤더에 패딩 마진을 주더라도 일정 크기 이상 안늘어났으면 좋겠다고 했을때 header { height: 10vh; min-height: 15rem; max-height: 20rem; }
캡쳐완료
딱 봐도 좆고수 ㄷㄷ
해당 댓글은 삭제되었습니다.
분홍이랑 노랑있져? 딱 저거까지만 한 화면에서 보여주고 (100vh) 그리고 스크롤로 10vh 만큼 내리면 푸터가 추가로 보이는 그걸 원해써여
그렇게한다해도 마진이랑 패딩주면 늘어나는건 같지않나여
생각해낸게 위아래 마진 2씩 총 4 들간다하면 내용물에서 4를빼주는건데 이건 최후의 수단으로
나보다 뛰어난 사람이 다른방법을 고안해내지못했다면 그또한 좆타!