CSS 요소 상위 100 %

포함 된 div를 포함하여 100 % 페이지 높이를 얻는 데 문제가 있습니다. 무슨 일이 일어날 것인가는 내부 div가 상위 요소의 높이를 100 %로 확장한다는 것입니다. 하위 요소가 상위 요소로 옮겨 졌을지라도 하위 요소 만 상위에 오버 플로우됩니다.CSS 요소 상위 100 %

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html 
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <title>Home</title> 
    <style type="text/css"> 
    html, body, #container, #content 
    { 
     height: 100%; 
     min-height: 100%; 
    } 

    html { border: 1px solid red; } 
    #content { border: 1px solid blue; } 
    </style> 
</head> 
<body> 
    <div id="container"> 
     <h2>Test</h2> 

     <div id="content"> 
      <p>Testing</p> 
     </div> 
    </div> 
</body> 
</html>

단순히이 단순히 올바른 행동이라고 생각하기 시작 해요 그냥 작동하지 않습니다,하지만 난 접근을 정밀 검사하기 전에 먼저 집단 지성을 물어 거라고 생각.

출처

2010-06-24 Derek H

그래, overflow: hidden;을 사용하거나 수레로 연주를 시작하고 지울 수 있습니다.

하나님이 페이지가 정확히 한 화면 높이가되도록 의도했다고 생각하지 않습니다. :-)

또는 세로 스크롤 막대를 사용할 수 있습니까? 그렇다면, 당신은 체크 아웃 수 있습니다 http://matthewjamestaylor.com/blog/perfect-full-page.htm UR CSS가 단지 바로 행동하는 의도로

출처

2010-06-24 05:00:44

당신이 달성하기 위해 노력하고 정확히 모르겠어요

하지만,이 :

html, body 
{ 
    height: 100%; 
    min-height: 100%; 
}

이 이해가되지 않습니다. 아무 것도 상관없이 body 요소의 높이를 제어 할 수는 없으며 html 요소는 div 및 span 요소와 동일한 방식으로 "표시"되지 않습니다.

당신이 묘사하는 행동은 실제로 일어날 것으로 예상되는 행동입니다. 요소의 높이/너비를 100 %로 설정할 때마다 부모 요소의 100 %를 의미합니다 (요소가 절대적으로 배치 된 경우 예외가있을 수 있음).

출처

2010-06-24 04:05:20

...

단지 CSS를 사용하여이 작업을 수행 할 정확한 방법은 말 브록, 매우 복잡한 부동하지 않고,이 없다 < - 정의에 따르면, 부동 소수점은 고정 된 높이와 너비를 알아야하며 동적은 아닙니다. (실제로 대부분의 브라우저는 추측을 시도 할 것입니다)

작은 자바 스크립트를 사용하여 화면의 높이를 확인하고 첫 번째 내부 div를 만든 다음 두 번째 내부 div를 차이로 설정하는 것이 훨씬 쉽습니다.

<div id="container"> 
     <div id=content-top"> 
     <h2>Test</h2> 
     </div> 

     <div id="content"> 
      <p>Testing</p> 
     </div> 
    </div>

출처

2010-06-24 05:39:17 Kasumi

CSS 요소 상위 100 %

답변

관련 문제