CSS에서 어린이의 백분율 높이

하위 요소의 높이를 부모의 백분율로 설정하려고합니다.CSS에서 어린이의 백분율 높이

.html, .body {height: 100%; width: 100%} 
     /* test is a child of body to ensure content is aligned in the middle */ 
    .test { 
     width: 90%; 
     height: 100%; 
     position: absolute; 
     left: 5%; 
     top: 0%; 
     margin: -0% 0 0 0%; 
    } 
    /* top banner */ 
    .banner { 
     height: 100px; 
     margin-left: 2%; 
     width: 96%; 
    } 
    /* rest of the content */ 
    .center{ 
     background-color: #FFFFFF; 
     height: 80%; 
     margin-left: 2%; 
     margin-top: 10px; 
     overflow-x: auto; 
     padding: 3px; 
     position: relative; 
     width: 95%; 
    } 
    /* content inside center */ 
    .iwant-event { 
     height: 100%; 
     left: 0; 
     width: 84.5%; 
    }

하나는 iwant 이벤트 클래스는 중앙의 100 %를 채울 것으로 기대 : 여기 내 세트 업입니다. 크롬에서는이 동작을합니다. 그러나 Firefox에서는 iwant-event가 센터의 100 %를 채우지 않습니다. 내 HTML의 단순화 된 버전입니다 :

<body> 
    <div class="test"> 
    <div class="banner">Banner stuff here</div> 
    <div class="center"> 
     <div class="iwant-event"></div> 
    </div> 
    </div> 
</body>

나는 기본 CSS와 상당히 정통,하지만 결코 전에 많은 브라우저에 대한 개발되지 시도했다. 나는 어떤 도움을 주셔서 감사합니다.

출처

2012-03-25 Karthik Gomadam

여백 : -0 % 0 0 0 %; – elclanrs

이 페이지가 단조롭게 렌더링되거나 엄격 모드로 렌더링됩니까? 꽤 차이가 있습니다. –

FF로 작동하지 않습니까? 피들 여기에 : http://jsfiddle.net/mZ3Vp/1/ 잘 내 컴퓨터에서 작동합니다. 작동하지 않는 경우, 현재 사용중인 OS 및 사용중인 FF 버전을 지정할 수 있습니까?

출처

2012-03-25 02:08:27 valentinas

내가 그것을 시도하고 다시 연락하자. 그 후 다른 수업을 변경했습니다. 아마 전체 코드를 공유하고 링크를 공유 할 것입니다. –

iwant-event 클래스가 센터의 100 %를 채울 것으로 예상됩니다.

정확히 어떤 일이 발생하지 않습니까? iwant-event에 컨테이너를 가로 및 세로로 채우고 싶습니까? 내가 볼 수있는 한 수직으로 채 웁니다.

.iwant-event { 
    width: 84.5%; 
}

당신은이를 변경해야 전체 수평 충만 ...

.iwant-event { 
    width: 100%; 
}

을 : 규칙을 가지고 있기 때문에 수평으로하지 않습니다. 물론 center에도 3px의 패딩이 있으므로 iwant-event을 완전히 제거하여 center을 채우려면이 부분을 제거해야합니다.

출처

2012-03-25 11:03:07 MadScone

CSS에서 어린이의 백분율 높이

답변

관련 문제