Chrome에서 패딩으로 Div 오버 플로우가 발생했습니다.

아무도이 코드로 수직 오버플로가 발생하는 이유를 설명 할 수 있습니까?Chrome에서 패딩으로 Div 오버 플로우가 발생했습니다.

<html> 
    <body style="width:120px; height:120px; background-color:white;"> 
     <div style="padding:20px; background-color:blue;"> 
      <div style="width:100%; height:100%; background-color:white"> 
       <div style="padding:20px; background-color:green;"> 
        <div style="width:100%; height:100%; background-color:white"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

크롬 8에서는이 같은 렌더링 :

alt text

출처

2011-01-19 rob

나는 당신이처럼 보이게 할 가정하지만, 녹색 테두리가 파란색 하나 밖에 돌출하지하고있어 전체가 120px * 120px 안에 들어 있습니다.

해당 코드에 doctype을 지정하지 않아 다른 브라우저간에 작업을 수행하기가 어려워집니다. 일부 브라우저는 "quirks 모드"로 분류됩니다.

코드를 사용하면 IE8은 레이아웃을 창의 너비까지 확장합니다. 그게 크롬, IE8, 파이어 폭스, 오페라 사이에 일관성을 보이게 추가

<!DOCTYPE html>

: 그것은 일관성 보이게

첫 번째 단계는 같은 HTML5의 문서 타입 등의 문서 타입을 추가하는 것입니다

그것은 또한 잘못 보이게, 당신은 % 및 px 기반 방식 측정을 섞어 위해 노력하고 있기 때문에 문제를 해결하는 간단한 방법은 없습니다 ..하지만

nts (간단한 수정은 % 또는 단지 px을 사용하는 것입니다). height: 100%과 padding: 20px을 사용하면 전체 높이가 패딩과 부모 요소의 높이가 합쳐지기 때문에 요소가 너무 커집니다 (이것이 오버 플로우의 원인입니다).

Live Demo이

<!DOCTYPE html> 
<html> 
<body style="width:120px; height:120px"> 
    <div style="background:blue; width:100%; height:100%; position:relative"> 
     <div style="background:green; position:absolute; top:20px; right:20px; bottom:20px; left:20px"> 
      <div style="background:white; position:absolute; top:20px; right:20px; bottom:20px; left:20px"></div> 
     </div> 
    </div> 
</body> 
</html>

출처

2011-01-19 19:16:27 thirtydot

완벽! 감사! – rob

당신은 환영합니다 :) – thirtydot

지난 3 시간 동안이 답변을 찾으 셨습니다. 1000 번 이상 감사합니다 !!! – jcmitch

당신이 찾고있는 해답을 찾을 수 있습니다 : 그래서 여기

는 다른 방법을 사용하여 찾고있는 시각 효과를주는 새로운 코드의 이 페이지의 내용 :

Iframe 100% height inside body with padding

요약하면 HTML5가 구조됩니다. 이 CSS를 DIV에 추가하면 문제가 해결됩니다.

box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;

출처

2011-12-05 11:57:17 Scott

Chrome에서 패딩으로 Div 오버 플로우가 발생했습니다.

답변

관련 문제