div와 width : 100 %가 다릅니다.

일부 div는 모두 너비로 설정되어 있습니다. 내 웹 사이트에서 100 % :div와 width : 100 %가 다릅니다.

<div id="participate" class="test"> 
    participate 
</div> 

<div id="description" class="test"> 

    <div id="brief" style="display:table-cell"> 
&nbsp; 
    </div> 

    <div id="price" style="display:table-cell"> 
&nbsp; 
    </div> 

</div> 

<div id="bottom" class="test"> 

    <div id="partners" class="test"> 
&nbsp; 
    </div> 

    <div id="content" class="test"> 
&nbsp; 
    </div> 

</div>

#bottom 만 display : table을 설정했습니다. 내가 경계를 설정할 때 #border는 다른 div보다 덜 excatly 2px라는 것을 본다.

#border width : 100.3 %로 설정하면이 솔루션이 나에게 재현 된 것처럼 보입니다. 문제는 크롬에 존재하며 파이어 폭스에는 없다.

이유가 무엇이며 어떻게 제거 할 수 있습니까?

어떤 힌트를 주셔서 감사하겠습니다.

출처

2011-08-16 lord.didger

된 div가 부모에 의해 묶여있다. 바깥 쪽 div에 패딩이나 테두리가있는 경우 내부 div의 100 % 너비가 사용 가능한 항목 만 채 웁니다. –

https://developer.mozilla.org/en/CSS/box-sizing

div 요소. 국경 가 width의 일부있는 display: table 힘 box-sizing: border-box을 설정 크롬에서

이

가 여기에 표시됩니다 : 두 div의 일관성이 box-sizing: border-box (및 공급 업체 접두사 변형)을 적용하는 것입니다 수 있도록 http://jsfiddle.net/thirtydot/wsEkc/

가장 쉬운 방법.

참조 : 다른 div의 내부http://jsfiddle.net/wsEkc/3/

출처

2011-08-16 13:50:57 thirtydot

불행히도 상자 크기만으로는 문제가 해결되지 않았습니다. 나는 상자 크기를 사용했다 : border-box; -moz-box-sizing : border-box;/* Firefox */ -webkit-box-sizing : border-box;/* Safari */w3schools 웹 사이트에서 제안하는 내용. 그것은 그 일을합니다. –

글쎄, 그 말은하지 않고 :) 나는 내 답변의 형식을 개선하기 위해 그들을 버렸지 만, 나는 그들을 최종 jsFiddle 데모에 포함 시켰습니다. – thirtydot

div와 width : 100 %가 다릅니다.

답변

관련 문제