컨테이너에 아무것도 포함되어 있지 않습니다.

Question

페이지가 있고 페이지 너비를 브라우저에 맞게 조정하고 싶습니다. 나는 예를 들어 div이라는 이름의 'container'를 시작하고 페이지 전체를 넣고 width: 100%;으로 브라우저 너비를 완전히 채우기 위해 div을 말하면 모두 크기가 조정됩니다. 그러나 그렇지 않습니다. div은 페이지가 내부에 있다고 생각조차하지 않습니다.

<header> 
    <div id="header"> 
    <table width="100%" border="0"> 
     ... 
    </table> 
    </div> 
</header> 

Answer 1

찾고있는 동작은 display:block입니다. 이는 기본적으로 이미 발생하고 있습니다. 단지 understanding how it works의 문제 일뿐입니다.

실험 할 수있는 div의 위/아래에는 이미 두 가지 요소가 있습니다.

html { 
    background: orange; 
} 
body { 
    background: blue; 
} 

이 그런 다음 div에이 스타일을 제공 :

당신의 CSS에서이 일을 시도

div { 
    width: 300px; 
    background: white; 
} 

을 지금, 당신의 페이지를 눌러 Control 및 - (윈도우) 또는에있는 동안 키보드에서 Command 및 - (Mac)을 몇 번 누릅니다. 배경색이 어떻게 작동하는지 확인하십시오.

마지막으로 위에 나열된 값 대신 div에 width:100%;을 설정하십시오.

이들의 조합을 실험하고 결국 당신이 보자는 :

• 일부 요소는 기본적으로 display:block 있습니다.
• 모두 display:block 요소는 달리 지정하지 않는 한 사용 가능한 모든 너비의 비트를 사용합니다.
• 각 요소의 "사용 가능한 너비"는 상위 요소입니다 (컨테이너라고도 함).
• 최상위 요소의 "사용 가능한 너비"(html)는 창의 너비입니다.

일부 테이크 아웃 노트는해야한다 : 당신은이 작업을 수행하는 사업부가 필요하지 않습니다

• - 그것은 여분의 코드와 not semantic입니다. 모든 요소가 명시 적으로 100%또는이 block 이외의 표시 형식이다, (등 자식, 손자)의 후손의 사항도가 폭의 폭을지지 않습니다 이외의 다른 설정의 폭이있는 경우
• 창.