이것이 일반적인 문제 일 수 있지만이 웹 사이트 나 다른 솔루션에서 해결책을 찾지 못했음을 알고 있습니다. 내부 div 상위 div의 100 % 너비가 경계를 초과 함
나는이 바이올린 제작 : http://jsfiddle.net/xzdead/jxsYx/3/내부 사업부 'div_mainPanel'100 % 폭을하지만 오른쪽 하단 모서리를 보면 그것은 부모 DIV 이상입니다.
나는 너비를 제거하려고 시도했다 : 내부 div와 너비 문제는 해결되었지만 높이는 100이 아니었다. 어쨌든 왜 wodth를 100 %로 설정하고 여백 - 여백을 0px로 설정하면 부모 div에서 벗어날 수 있습니까?
그게 전부 사전에
감사 국경 속성이 100 % ... 패딩 값과 동일 넘어 때문이다.
그 이유는 2px입니다.
이것은 올바른 동작입니다. inner div는 부모의 너비의 100 %로 설정되지만 테두리에는 테두리가 포함되지 않으므로 100 % + 2px가됩니다.
는, 부모의 경계 외부에 표시되는 내부 사업부를 방지 부모와 아이 모두box-sizing: border-box를 추가하려면
#div_mainContainer {
width: 500px;
height: 300px;
background-color: #f8f8f8;
border: 1px solid red;
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
#div_mainPanel {
width: 100%;
height: 100%;
margin: 0px;
border: 1px solid yellow;
box-sizing: border-box;
}<div id="div_mainContainer">
<div id="div_mainPanel"></div>
</div>테두리 속성이 폭 계산되지 않습니다 상자 중 하나. 따라서 상자는 실제로 테두리의 100 % + 2 픽셀로 계산됩니다. 너비의 경우, 분할 (블록 수준 요소)이 이미 컨테이너의 너비를 채우기 위해 자동으로 확장되므로 너비가 100 %보다 넓을 수 있기 때문에 (채우기, 테두리 및 여백을 고려하기 때문에) width: 100%을 제거하면됩니다.
항상 부모 컨테이너의 정확한 높이를 사용하는 경우 어린이의 정확한 높이를 498 픽셀로 사용하지 않는 것이 좋습니다. 그러면 어린이의 총 높이는 500 픽셀로 계산됩니다.
이제이 문제를 해결하기 위해 더 나은 방법이있다 : 당신의 CSS 크기 조정 border-box를 사용
http://paulirish.com/2012/box-sizing-border-box-ftw/
지금100% 자식 요소의 크기를 설정하는 훨씬 더 자연적인 방법이 될 것입니다.
감사합니다. – xzdead