2012-04-06 4 views
1

상자 모델은 항상 두통을 겪었습니다. 템플릿 (here)을 가져 와서 Spring MVC + Apache Tiles 프로젝트 (here)로 통합하려고합니다. 방화 광섬유를 살펴볼 때 main div의 내용이 올바르게 포장되어 있지 않음을 알 수 있습니다. 아래는 HTML의 가장 바깥 쪽 부분입니다. 나는 여기에 더 많은 코드를 넣지 않은 것에 대해 사과하지만, 문제를 보여주는 라이브 사이트가 잘 만들었다 (admin/admin으로 로그인).HTML 상자 모델이 맞지 않습니다.

<html> 
    <head> ... </head> 
    <body> 
     <div class="wrapper"> 
      <div id="header"> ... </div> 
      <div id="main"> 
       <div id="sidebar"> ... </div> 
       <div id="page"> ... </div> 
      </div> 
     </div> 
    </body> 
</html> 

편집이는 해결되었다, 그래서 난 내 데모를 오프라인으로 촬영했다.

+0

Windows 7 - Firefox 11에서 정상적인 것처럼 보입니다. – tw16

+0

관련 CSS – steveax

+0

을 게시하십시오. Firefox 11 (OS X)에서 정상적으로 보이지 않으며 CSS가 여러 파일에 걸쳐 있습니다. HTML의 요점은 문제가 있다고 생각되는 부분을 신속하게 나타 내기위한 것이 었습니다. – Nik

답변

2

#mainroot.css에 정의됩니다. 내 생각에 당신은 아이를 감추기 위해 div를 확장해야한다고 생각합니다. 룰셋에 overflow:auto; zoom:1;을 추가하면됩니다.

+0

네, 훌륭합니다, 고마워요. – Nik

+0

+1 나를 이길. 확장하려면 ... # sidebar'와'#page'는 떠 다니고 지워지지 않습니다. 'overflow : hidden'을 추가하면 그것들이 지워집니다. ** # ** 메인에 명시적인 높이를 포함 시키려면 ** 안 **을 확인하십시오. – steveax

+0

그래서 다른 사람들의 템플릿을 사용하고 싶지 않지만 때로는 그 템플릿을 사용할 수없는 경우가 있습니다. – Nik

관련 문제