2012-11-29 2 views
1

그 폭과 높이가 크기 세 DIV 요소와 백분율을 이용하여 함께 문제 container 두 내측 DIV 요소CSS는 : I는 외부 div 요소를

firstDiv 왼쪽으로 부동한다

반면 firstDivsecondDiv이라고 불리는 secondDiv가 오른쪽으로 떠있게됩니다.

가능한 한 많은 너비를 취할 수있는 외부 div 요소를 원합니다 (사용 가능한 너비의 100 %를 의미 함).

두 개의 내부 요소가 절반 공간을 차지하고 싶습니다. 이는 container div의 50 %를 의미합니다. 그러나 내가 가진, 내가했던 것처럼 보였다 몸의 요소를 둘러싸고 간단한 고체 경계를 기다리고 있었다 1

<html> 
    <head> 

    <style type="text/css"> 
     #container{ 
      width:100%; 
      height:100%; 
      border-style:solid; 
     } 
    </style> 
    </head> 

    <body> 
     <div id="container"> 
      <div id="firstDiv"> </div> 
      <div id="secondDiv"> </div> 
     </div> 
    </body> 
</html> 

질문 : 여기

이에 대한 몇 가지 기본적인 코드 내 브라우저의 y 차원에있는 스크롤 바입니다. 왜 이런 일이 일어 났습니까? 나는 몸의 너비와 높이의 100 %를 원한다고 말했고, 그 이상으로 사용 된 브라우저처럼 보입니다. 그러나 높이가 100 % 이상이 될 것으로 보인다

#firstDiv{ 
     width:50%; 
     height:100%; 
     border-style:solid; 
     } 

질문 2 사업부는 "컨테이너"사업부의 50 %를 소요 것처럼 보인다

지금 나는 다음과 같은 CSS 코드를 추가했다. 왜 이런 일이 일어 났습니까? 사진 : enter image description here

나는 두 번째 DIV에 대해 동일 할 다음과 같은 CSS 코드를 필요로 플로트 속성을 포함한다 : 나는 두 DIV 요소가 두 가지를 형성하고 싶어 3

#container{ 
     width:100%; 
     height:100%; 
     border-style:solid; 
    } 
    #firstDiv{ 
     width:50%; 
     height:100%; 
     border-style:solid; 
     float:left; 
     } 
    #secondDiv{ 
     width:45%; 
     height:100%; 
     border-style:solid; 
     float:right; 
     } 

질문 열 페이지. 그러나 두 번째 div 엘리먼트는 이전처럼 div보다 높이가 높습니다. 또한 브라우저 크기를 조정하면 두 번째 div가 첫 번째 div 아래로 이동합니다.

enter image description here

내가 그것을 어떻게 이런 일이 왜을 피할 수있다?

미리 감사드립니다.

답변

2

요소의 너비를 계산할 때 테두리가 계산되지 않습니다. 그들은 지정된 너비의 보충제입니다. 이것은 약간의 불일치를 설명합니다.내가 아는 한이 문제에 대한 100 % 밀폐 솔루션은 정확히 (가까운 곳에서 예, 그렇지만 정확히, 아니요)입니다. 가장 신뢰할 수있는 것은 테이블을 사용하는 것이지만, 이미 알고있는 것처럼 페이지 레이아웃을 디자인하는 데는 유효한 솔루션이 아닙니다. 또 다른 옵션은 오른쪽과 왼쪽으로 띄우지 만 너비가 50보다 약간 작은 비율 (예 : 48-48) 또는 px으로 지정된 너비로 지정되어 필요한 정확한 크기를 정확하게 계산할 수 있습니다.

브라우저가 CSS3을 균일하게 구현하기 시작하면 box-sizing 속성이이 문제를 해결할 수 있습니다. box-sizing은 요소의 크기를 계산할 때 고려해야 할 것을 지정합니다. box-sizing:border-box;을 적용하면 경계가 고려되지만, 현재로서는 브라우저 전체에서 코드에서 안정적으로 사용하기에 충분하지 않습니다.

3

귀하의 모든 질문은 귀하가 오해 한 것입니다. 높이 : 100 %는 콘텐츠 높이를 100 %로 만듭니다. 국경과 높이가있을 때 : 100 % 이것은 국경 너비가 100 % + 100 %가되는 것을 의미합니다.

가능한 해결책은 상자 크기 조정을 사용하는 것입니다. border-box;

이 속성을 지원하지 않는 브라우저는 IE <입니다. 8. 해당하는 경우 CSS 표현을 사용하여 해결 방법을 만들 수 있습니다. 조심히 다루세요!