웹 사이트 디자인에서 자주 묻는 질문은 "요소 높이를 100 %로 설정하는 방법"입니다.
이것은 쉬운 대답처럼 보일 수 있습니다. CSS 를 사용하여 요소의 높이를 100 %로 설정하기 만하면 브라우저 창 전체에 맞게 요소가 늘어나는 것은 아닙니다. 왜 이런 일이 일어나고이 비주얼 스타일을 달성하기 위해 무엇을 할 수 있는지 알아 보겠습니다.
픽셀 및 백분율
CSS 속성 과 픽셀을 사용하는 값을 사용하여 요소의 높이를 정의하면 해당 요소는 브라우저에서 많은 수직 공간을 차지합니다.
예를 들어, 높이가 100px 인 문단. 귀하의 디자인에 세로 공간의 100 픽셀을 차지합니다. 그것은 얼마나 큰 귀하의 브라우저 창이 중요하지 않습니다,이 요소는 높이 100 픽셀 것입니다.
백분율은 픽셀보다 다르게 작동합니다. W3C 사양에 따르면 높이의 백분율은 컨테이너 높이에 따라 계산됩니다. 그래서 높이가있는 문단을 넣으면 : 50 %; 100px 높이의 div 내부에서는 단락의 높이가 50 픽셀로 부모 요소의 50 %입니다.
백분율 높이가 실패하는 이유
웹 페이지를 디자인 할 때 창 전체 높이를 차지할 열이 있다면 자연스러운 경사는 높이를 100 %로 추가하는 것입니다. 그 요소에. 너비를 너비로 설정하면 결국 : 100 %; 요소가 페이지의 전체 가로 공간을 차지하므로 높이가 동일하게 적용되어야합니다. 불행히도, 이것은 전혀 그렇지 않습니다.
왜 이렇게되는지 이해하려면 브라우저가 높이와 너비를 해석하는 방법을 이해해야합니다. 웹 브라우저는 사용 가능한 총 너비를 브라우저 창을 여는 정도에 따라 계산합니다. 문서에 너비 값을 설정하지 않으면 브라우저가 자동으로 윈도우의 전체 너비를 채우도록 내용을 흐르게합니다 (기본값은 100 %입니다).
높이 값은 너비와 다르게 계산됩니다. 사실 브라우저는 내용이 너무 길어서 뷰포트 외부로 나가기 (스크롤 막대가 필요함) 또는 웹 디자이너가 페이지의 요소 높이를 절대 높이로 설정하지 않으면 높이를 전혀 평가하지 않습니다. 그렇지 않으면 브라우저는 내용이 끝날 때까지 뷰포트 너비 내에서 단순히 흐르게합니다. 높이는 실제로 계산되지 않습니다.
높이가 설정되지 않은 부모 요소가있는 요소에 백분율 높이를 설정하면 문제가 발생합니다. 즉, 부모 요소의 높이는 auto입니다. . 사실상 브라우저는 정의되지 않은 값으로부터 높이를 계산하도록 요청합니다. null 값과 같으므로 브라우저는 아무 것도하지 않습니다.
웹 페이지의 높이를 백분율로 설정하려면 높이를 정의 할 모든 부모 요소의 높이를 설정해야합니다. 즉, 다음과 같은 페이지가있는 경우 :
여기 콘텐츠
당신은 아마도 div와 paragraph의 높이가 100 %가 되길 원하지만 그 div는 실제로 두 개의 부모 요소를 가지고 있습니다 :
과. div의 높이를 상대적 높이로 정의하려면 body 및 html 요소의 높이도 설정해야합니다.
따라서 CSS를 사용하여 div뿐 아니라 body 및 html 요소의 높이를 설정해야합니다. 100 % 높이로 설정 한 모든 것을 빨리 처리 할 수 있으므로 원하는 효과를 얻으려면이 작업이 어려울 수 있습니다.
100 % 높이에서 작업 할 때주의해야 할 사항
이제 페이지 요소의 높이를 100 %로 설정하는 방법을 알게되었으므로 이동하여 모든 페이지에 적용하는 것이 흥미로울 수 있습니다. 그러나 알아 두어야 할 몇 가지 사항이 있습니다.
- 여백과 패딩은 원하지 않는 곳에 스크롤 막대를 추가 할 수 있습니다. 백분율 높이 (및 너비)로 작업하면서 발견 된 가장 성가신 일 중 하나는 스크롤 바를 사용하지 않고 모든 내용을 표시 할지라도 동일한 요소의 여백과 여백이 페이지에 스크롤 막대를 추가 할 수 있다는 것입니다. 이것은 요소의 높이 또는 너비가 계산 된 첫 번째 것이기 때문입니다. 그런 다음 마진과 패딩이 추가됩니다. 따라서 높이가 100 %이고 위쪽과 아래쪽 여백이 각각 10 픽셀 인 요소가있는 경우 추가 20 픽셀의 스크롤 막대가 있습니다. CSS 상자 모델은 여백, 테두리 및 패딩을 요소의 크기에 추가하므로 다른 상자 모델 값과 함께 100 %가 실제로 100 % 이상이됩니다.
- 콘텐츠가 정의 된 높이보다 많이 사용되면 이후의 모든 내용을 덮어 씁니다. 즉, 높이가 80 % 인 디자인이 있고 그 안에있는 내용이 높이의 100 %를 차지하는 경우 추가 20 %는 열 아래에서 계속 진행되어 시각적 디자인을 중단합니다 귀하의 페이지의 해당 열 아래에 내용이있는 경우 텍스트는 단순히 그 위에 씁니다. 나는 웹 디자이너가 페이지의 높이를 강요하려고 시도 할 때 종종 발생하는 것을 보지만, 페이지의 내용이 미래에 바뀌면 절대 높이가 페이지의 흐름을 완전히 깨뜨릴 수 있습니다. 뷰포트의 크기에 따라 너비와 높이가 변경되어야하는 반응 형 웹 사이트를 구축 할 때 이는 두 가지 사실입니다.
이 문제를 해결하려면 요소의 높이도 설정할 수 있습니다. 자동으로 설정하면 필요에 따라 스크롤 막대가 나타나지만 그렇지 않은 경우에는 사라집니다. 비주얼 브레이크가 수정되었지만 원하지 않는 곳에 스크롤바가 추가되었습니다.
뷰포트 단위 사용
이 문제를 해결할 수있는 또 다른 방법은 CSS 뷰포트 단위로 실험하는 것입니다. 뷰포트 높이 단위를 사용하여 뷰포트 의 정의 된 높이를 차지하도록 요소의 크기를 조정할 수 있으며, 뷰포트가 변경되면 변경됩니다. 이것은 페이지에서 100 % 높이의 영상을 얻는 좋은 방법이지만 다른 장치 및 화면 크기에 대해 유연하게 사용할 수 있습니다.