고정 위치와 높이가 100 % 인 요소 아래에 div를 배치하십시오.

Question

#lookbookHeader 및 #introContent 두 개의 div가 있습니다. #lookbookHeader에는 position: fixed, height: 100% 및 height: auto 인 비디오가 포함되어 있는데 그 중 하나는 this tutorial입니다. this page에서 볼 수 있듯이, 높이에 관계없이 #introContent이 #lookbookHeader 아래에 있도록하고 싶습니다. 페이지가로드 될 때 동영상이 전체보기 영역 인 페이지를 만들려고합니다. 아래에서 추가 콘텐츠를 보려면 아래로 스크롤 할 수 있습니다.

나는이 두 가지 요소에 대한 위치 지정, 부동 및 표시의 모든 조합을 시도하여이 기능을 작동 시키려고 시도했지만 얻을 수 없습니다. 현재 #lookbookHeader에는 적용되는 항목이 중요하지 않으므로 스타일이 없습니다. 고정 된 위치를 적용 할 때 비디오 스타일이이를 덮어 쓰므로 스타일이 우선합니다. 동영상에 고정되어 있지 않으면 너비/높이에 맞게 크기가 조정되거나 크기가 올바르게 조정되지 않습니다. 내가 뭘 놓치고 있니?

페이지가로드 될 때 #lookbookHeader 높이를 얻으려면 jQuery 또는 JavaScript를 사용할 수 있지만 CSS 만 사용하는 방법이 있는지 궁금합니다. here 페이지를 볼 수 있습니다.

나는 SO, such as this one에 다른 게시물을 확인했지만, 모두 여기에 해당하지 않는 고정 된 높이로 고정 된 요소를 참조하는 것으로 보입니다.

HTML

  <div id="lookbookHeader"> 
       <video autoplay poster="http://lcoawebservices.com/assets/lp_stainless_SliderStop_5.jpg" id="bgvid"> 
        <source src="http://lcoawebservices.com/assets/lp_stainless_Transition_5.webm" type="video/webm"> 
        <source src="http://lcoawebservices.com/assets/lp_stainless_Transition_5.mp4" type="video/mp4"> 
       </video> 
       <div id="headerContentContainer"> 
        <h1>Lookbook: Spring 2015</h1> 
        <div class="initial-arrow-small"></div> 
       </div> 
      </div> 
     </div> 
     <div id="introContent"> 
      <h2>Bienvenue</h2> 
      <p>Lorem ipsum dolor sit amet</p> 
      <div class="block red">one</div>  
      <div class="block blue">two</div> 
      <div class="block yellow">three</div> 
      <div class="block green">four</div> 
     </div> 

CSS

#introContent { 
     max-width: 100%; 
     height: auto; 
     background-color: #fff; 
    } 
    #lookbookHeader video#bgvid { 
     position: fixed; 
     right: 0; 
     bottom: 0; 
     min-width: 100%; 
     min-height: 100%; 
     width: auto; 
     height: auto; 
     z-index: -100; 
     background: url(http://lcoawebservices.com/assets/lp_stainless_SliderStop_5.jpg) no-repeat; 
     background-size: cover; 
     display: block; 
    } 

Answer 1

이 작업을 수행하기 위해 최고 margin를 추가합니다. 먼저 당신은 body 스타일에 html을 포함해야합니다 (이 아이를의 경우)

이

html,body { //add html 
    width: 100%; 
    height: 100%; 
    font-family: Helvetica, Arial, sans-serif; 
    font-size: 11px; 
    margin: 0; 
    padding: 0; 
} 

그런 .container에 height:100%를 추가합니다. 그런 다음 높이와 여백을 .introContent에 설정할 수 있습니다. 또한 지우지 않는 요소를 .introContent 안에 플로팅했습니다. 당신은 overflow: hidden을 추가하여 그것을 해결할 수 있습니다

#introContent { 
    min-height: 100%; //add min-height 
    max-width: 100%; 
    height: auto; 
    background-color: red; //changed so you can see the container better 
    overflow: hidden; //add to clear floats 
    margin: 50% 0 0; //add margin from top 
} 

FIDDLE

UPDATE

내가 더 나은 해결책을 가지고 있습니다. 때로는 물건을 너무 많이 뒤집을 때가 있습니다.

<div class="spacer"></div> 
<div id="introContent"> 
    .... 

과로 설정 : : 그냥 단순히과 같이 내용 위에 빈 div를 추가

.spacer{ 
    height: 100%; 
    width: 100%; 
} 

화면의 높이를 차지

아래에 내용을 범프 것 BETTER FIDDLE