폭 100 %의 블록을 배치 할 때 창 크기의 예상치 못한 증상

width : 100 %; 블록을 만들 때의 주의점

폭 100 %는 부모 요소에 의존

머리글과 바닥 글의 폭을 100 %로 할 수는 상당히 있습니다. 단, 그 경우에는 창 폭에주의하지 않으면 안됩니다. 라고하는 것은, 폭 100 %라는 것은 "부모 요소"에 대해, 그래서 부모 블록이 좁아 그 요소도 함께 작아지기 때문입니다.

<div id="wrap">

<div id="box"></div>

</div>

#wrap {

 width: 100%;

}

#box {

 width: 720px;

}

창을 폭 720px 미만까지 줄이면 메뉴 블록 전체를 볼 수 없게되기 때문에, 창 아래쪽에 가로 스크롤 막대가 나타나게 됩니다..

폭 100 %에 의한 폐해

실제로 해 보면 알 수있는 것은 폭 100 %의 부모 요소가 어딘가가 중요한 것. 하늘색 블록의 부모 요소는 body이었습니다. 즉, 윈도우 폭 500px 때 옆 스크롤 막대를 늦추면, body도 500px 그 아들 인 하늘색 영역도 폭 500px 것입니다. 스크롤 막대를 옆으로 움직여도 윈도우 폭이 500px이면 폭 100 %의 값도 500px이므로, 이번처럼 배경이 도중에 단념 해 버리는 현상이 일어나는군요.

이 증상의 대처법은?

해결 방법은 매우 간단하고 폭 100 %의 블록에 'min-width'를 지정하기 만하면. 예를 들어, 이번 경우는 내포 블록 720px 이하가되어야 좋기 때문에 다음과 같이하면 창 폭을 좁혀도 720px 미만이되지 않습니다.

#wrap {

 width: 100%;

 min-width: 720px;

}