100 % div 높이

모두 안녕100 % div 높이

유체 레이아웃으로 웹 페이지를 디자인하고 있습니다. 100 % 너비와 100 % 높이를 유지하고 싶습니다. 문제는 div "left"와 "right"를 부모 div의 "wrapper"안에 100 % 높이로 유지하는 방법을 모른다는 것입니다.

<div id="container" style="width:100%; height:100%"> 
    <div id="header" style="width:100%; height:100px"> 
    </div> 

    <div id="wrapper" style="width:100%; height:(100% - 100px)"> 
      <div id="left" style="width:250px; height:(100% - 100px)"> 
      </div> 

      <div id="right" style="width:(100% - 250px); height:(100% - 100px)"> 
      </div>   
    </div>   
</div>

도와주세요. doctype.com에서

이

대답

CSS

html, body{ 
    height: 100%; 
    margin: 0; 
    padding: 0; 
}

HTML

<body> 
<div id="container" style="width:100%; height:100%; position: absolute;"> 
    <div id="header" style="width:100%; height:100px;"> 
header 
    </div> 
    <div id="wrapper" style="width:100%; height:auto; position: absolute; top: 100px; bottom: 0;"> 
    <div id="left" style="width:250px; height:100%; float:left;"> 
    left 
    </div> 
    <div id="right" style="width: 250px; height:100%; float:right; "> 
    right 
    </div>   
    main content 
    </div>   
</div> 
</body>

출처

2010-01-25 Q_Mlilo

제휴 사이트 doctype.com에서 질문하면 대답 할 가능성이 더 높습니다. – Spoike

, 당신은 div의 오른쪽과 래퍼 div의 내부에 남아 떠 싶어하지만 화면에 래퍼 사업부의 전체 높이를 유지?

그렇다면 오른쪽 및 왼쪽 div가 래퍼로 들어가고 {... float : left; position : relative;}와 {... float : 오른쪽; position : relative;}를 측면에 배치합니다.

이제 래퍼 div의 내용에 포함 된 두 div를 플로팅 했으므로 래퍼 자체의 높이가 0이 될 수 있습니다. 이것은 내부의 두 div가 "그것에서 떠내려"있기 때문입니다.두 div의 내부에 가지고있는 래퍼 같은 높이를 제공하려면, 당신은 할 수 있습니다 : 두 개의 div의 후 래퍼 내부의 요소를 넣어 <div style="clear: both;"></div> 또는

: 래퍼 내부의 세 번째 사업부로

넣어이 (span처럼) CSS 속성을 {... clear : both;}

이제 "floats를 삭제했습니다"그리고 wrapper는 두 div의 전체 높이를 갖습니다.

다른 손에 있으면 모든 콘텐츠를 항상 화면의 전체 높이로 늘리려면 거기에 넣은 내용에 관계없이 일부 CSS 마법을 수행해야하며 너무 복잡해집니다 코드를 보지 않고 설명하기. 여기에서 시작하십시오 : http://ryanfait.com/sticky-footer/

도움이 되길 바랍니다.

출처

2010-01-25 09:29:44 Tom

링크 덕분에 매우 유용합니다! – Lucius

@ Lucius : 오랜 시간 동안 사용 해본 적이 없으며 문제가 없었습니다. – Tom

시도 추가

분 - 높이 : 100 %; 귀하의 CSS에 chk 출력 this 예

출처

2010-01-25 08:23:01 ant

'min-height'는 모든 브라우저에서 잘 지원되지 않습니다. – poke

글쎄, 그에게 예제를주었습니다. 그는 모든 것을 볼 수 있습니다. 그의 목표를 달성하고, 그는 대신 높이가 발생합니다. 그는 동일한 결과를 얻을 것입니다 – ant

@poke : IE6는 다른 점이 명시되지 않는 한 여전히 관련이 있다고 생각합니까? – Anonymous

브라우저의 높이가 100 % 인 div를 가지려면 상위가 100 % 높이 여야합니다. 다음 CSS를 추가하십시오.

html, body { height: 100%; margin: 0; padding: 0; }

출처

2010-01-25 08:23:41 poke

나는 이미 그 코드를 가지고있다. 내 주요 div ("container")는 100 % 높이입니다. 내 머리글의 높이가 100px입니다. div "래퍼"와 해당 하위 항목 ("왼쪽"및 "오른쪽")을 나머지 화면보기에 맞추기를 원합니다. –

동일한 레벨의 모든 요소를 100 % 너비와 높이로 만들면 브라우저간에 예기치 않은 동작이 발생합니다. 주어진 예제를 통해 부모의 모든 공간에 header과 wrapper을 부여하려고합니다.

100% container 
+----------------------------+ 
| 100% header 100% wrapper | 
| +----------+ +-----------+ | 
| |   errr...?  | | 
| +----------+ +-----------+ | 
+----------------------------+

어떻게 가능합니까? 이 일을 여러 가지 방법이 있습니다 중 하나

첫 번째 요소는 모든 공간을 얻는다거나,
모두
그들은 모두 공유 공간이 그래서

당신이 필요로하는, 중첩하거나 백분율을 제공 할 때 더욱 구체적입니다.

그런데 float 요소를 보내려고 시도 했습니까? 내가 제대로 이해 해요 경우

position: relative; // or absolute 
float: left;

출처

2010-01-25 08:28:36 Spoike

나는 내가 성취하고자하는 것에 약간의 논리를주기 위해 편집했다. –

100 % div 높이

답변

관련 문제