기타 HTML/CSS [분] 높이 문제

그래서 저는 변호사 인 친구의 웹 사이트를 만들고 있습니다. 그는 나에게 그가 좋아하는 레이아웃을 다른 사이트에 대한 참조를 주었고, 내가 그와 비슷한 것을 만들 수 있는지 물었다. 참조 사이트는 아마도 10 년 된 것으로 5 레벨 깊이의 중첩 테이블로 이루어져 있으므로 CSS를 좋은 웹 개발자처럼 사용하기로 결정했습니다. 이제 문제는 헤더가있는 2 열 레이아웃을 원하지만 하나의 열이 헤더와 겹치고 하나는 그렇지 않다는 것입니다. 사이트를 다음과 같이 레이아웃했습니다.기타 HTML/CSS [분] 높이 문제

<html style="min-height: 100%"> 
<head>...</head> 
<body style="min-height: 100%"> 
    <div id="left" style="height: 100% !important"> 
    ...stuff... 
    </div> 
    <div id="header"> 
    ...stuff... 
    </div> 
    <div id="right" style="height: 100% !important"> 
    ...stuff... 
    </div> 
</body></html>

모든 것은 상대 위치 지정 및 비율 또는 자동 높이/너비를 사용합니다. 이제 주요 문제는 예상대로 #left와 #right 모두 높이가 페이지의 100 %라는 것입니다. 문제는 #right div가 그 위에있는 #header div 아래로 밀렸 기 때문에 #right div 만 사용하는 페이지 하단에 약간의 여유 공간이 있다는 것입니다. 이 문제를 해결할 방법이 있습니까? 나는 #header의 스타일을 백분율 높이로하고 #right의 높이에서 뺀 것을 고려해 보았습니다. 그러나 그것은 저에게 kludgy로 보입니다 (그 위에 IE를 깨뜨릴 것입니다).

미리 감사드립니다.

출처

2012-02-19 Actorclavilis

좀 더 html 코드를 줄 수 있습니까? 나는 너의 문제를 이해하거나 그것을 재현 할 수 없다. – andreapier

첫째로, 나는 min-height : 100 %를 사용하는 것을 제안하지 않습니다. 높이 : 100 % 만 사용하십시오. 최소 높이는 주로 픽셀 값 또는 em 값으로 사용됩니다. 최소 높이와 함께 %를 사용하면 목적을 달성 할 수 없으며 화면의 백분율과 같은 최소 높이를 가질 수 없습니다.

나는 1140 grid system을 사용할 것입니다. 사용하기 쉽고 매우 유연하며 레이아웃을 쉽고 빠르게 디자인 할 수 있습니다. 1140 그리드 시스템이 시도 사용

:이

<div class="container"> 
    <div class="row"> 
     <div class="twelvecol"> 
      <p>Header area!!!!</p> 
     </div> 
    </div> 
</div> 
<div class="container"> 
    <div class="row"> 
     <div class="sixcol"> 
      <p>left column</p> 
     </div> 
     <div class="sixcol last"> 
      <p>right column</p> 
     </div> 
    </div> 
</div>

당신이 가서는 문제가 해결.

출처

2012-02-19 21:56:53 AtHeartEngineer

이것은 시원합니다. 내 콘텐츠를 행으로 나눌 필요가없는 방법을 더 원했지만 그렇게 쉽게 보일 수 있으므로 구조 조정을 생각할 수도 있습니다. – Actorclavilis

예! 1140g를 사용하면 많은 템플릿을 매우 빠르게 만들 수 있습니다! 다행 당신이 그것을 즐길 수 있습니다. 대부분의 웹 사이트를 많은 문제없이 행으로 나눌 수 있습니다. 솔직히 헤더를 한 행으로, 나머지 내용을 다른 행으로, 어쩌면 바닥 글 행으로 사용할 수 있습니다. 그렇게하면 행을 사용하는 것을 다루지 않아도되지만 잘 조직 된 사이트입니다. – AtHeartEngineer

답변

관련 문제