자식 div를 부모 너비에 맞추는 크로스 브라우저 방법

자식 div를 부모 너비에 맞추는 크로스 브라우저 방법

---

나는 아이 div를 부모의 width.

여기에서 본 대부분의 솔루션 은 브라우저 간 호환display: table-cell; 되지 않습니다 (예 : IE에서 지원되지 않음 <=8).

---

해결책은 단순히 선언하지 않는 것 width: 100%입니다.

기본값은이며 width: auto, 블록 수준 요소 (예 div:)의 경우 어쨌든 사용 가능한 "전체 공간"을 사용합니다 (어떻게 width: 100%수행 하는지에 따라 다름 ).

참조 : http://jsfiddle.net/U7PhY/2/

내 대답에서 아직 명확하지 않은 경우를 대비 width하여 자녀에게 a 를 설정하지 마십시오 div.

대신 에 관심box-sizing: border-box 이있을 수 있습니다 .

---

box-sizingcss 속성을 사용할 수 있으며 크로스 브라우저 (ie8 + 및 모든 실제 브라우저)이며 이러한 경우에 매우 좋은 솔루션입니다.

#childDiv{
   box-sizing: border-box;
   width: 100%; //or any percentage width you want
   padding: 50px;
}

깡깡이

---

이미지에서 패딩을 아이 바깥에 두었습니다. 그렇지 않다. 패딩은 요소의 너비에 추가되므로 패딩을 추가하고 너비를 100 %로 지정하면 너비가 100 % + 패딩이됩니다. 원하는 것을하려면 부모 div에 패딩을 추가하거나 내부 div에 여백을 추가하면됩니다. div는 블록 수준 요소이기 때문에 자동으로 부모의 너비로 확장됩니다.

---

position:relative;외부 요소 를 착용 하면 내부 요소가 이에 따라 배치됩니다. 그러면 width:auto;내부 요소의 a 는 외부 요소의 너비와 동일합니다.

---

패딩 공간을 사용하려는 경우 ... 다음은 다음과 같습니다.

http://jsfiddle.net/qD4zd/

모든 색상은 배경색입니다.

---

width: 100%자녀 div 에는 필요하지 않습니다 .

http://jsfiddle.net/DanielDZC/w2mev/1/

참고 URL : https://stackoverflow.com/questions/6593425/cross-browser-method-to-fit-a-child-div-to-its-parents-width