높이 오버플로 문제 : 100 %;

LIVE CODE
나는 메인 콘텐트 div class="mc"을 화면 하단 10 %에 그냥 표시하려고합니다. 사용자가 가능한 한 많은 배경 이미지를 볼 수있게하고 사용자가 기사 제목을 볼 수있게합니다.높이 오버플로 문제 : 100 %;

내 솔루션은 .mc을 100 % 높이로 설정하고 뷰포트 크기의 맨 아래에서 그 값을 뺍니다. 모든 CSS

CSS에서 수행

.mc { 
    height:100%; 
    width:100%; 
    background:#fff; 
    z-index:1; 
    position:absolute; 
    bottom:-90%; 
}

내 문제 : 내용이 100 % 높이 후 큰 갈 때 그 빈 공간에 빠진다. 나는 최소 높이를 시도했다; 유감스럽게도 코드가 더 나 빠지게됩니다.

enter image description here

, 문제

또는

ERROR'd 사진을 (당신이이 .box 그림자()에서 종료 말할 수) 볼 LIVE CODE의 하단으로 스크롤

다음과 같이 표시됩니다. heres a simple mock up

당신은 내용의 위치를 이미지 beloow 텍스트 컨테이너를 넣어 position: relative와 음의 위쪽 여백 또는 음의 상단을 사용할 수 있습니다

<article class="mc"> 
<section class="cc"> 
    <div class="margin_wrapper"> 
     <header> 
      <hgroup> 
       <h1 class="at">rocking grass out styles for everyone.</h1> 
       <h2 class="ast">The you mice structure for to of almost ability an trying the when designer 
        dissolute that constructing in quickly distinct...</h2> 
      </hgroup> 
     </header> 
     <h3 class="title_header">the good</h3> 
     <p>...</p> 
     <h3 class="title_header">the bad</h3> 
     <p>...</p> 
     <h3 class="title_header">the ugly</h3> 
     <p>...</p> 
    </div> 
</section> 
<aside></aside>

출처

2012-07-21 Matthew Harwood

왜 여백이나 패딩을 사용하지 않으시겠습니까? 이 이미지가 동적입니까? – rcdmk

무엇을 의미합니까? –

백그라운드에서이 이미지가 프로그래밍 방식으로 변경되었거나 데이터베이스에서 왔습니까? 어쨌든, 당신은 이미지의 높이를 알고 그것을 바꿀 수 있습니까? – rcdmk

HTML :

margin-top: -10%;

또는

position: relative; 
top: -10%;

이 마지막 방법

는 재배치의 크기로 컨텐츠 아래의 빈 공간을 남겨 둘 것이다.

출처

2012-07-21 23:20:27 rcdmk

우 (Ugh)는 샤워를하고 그것을 밖으로 끌어 내고 duhh 여백을 계산했습니다. thanks rcdmk –

당신은 오신 것을 환영합니다. 머리를 과열시키지 마십시오. ;) – rcdmk

높이 오버플로 문제 : 100 %;

답변

관련 문제