절대 divs 창에서 생성 된 높이 아래에 상대 div를 배치하십시오.

안녕하세요 :) 브라우저 창 높이의 하단에 이미지를 추가하는 브라우저 창 크기에 맞게 비디오를 만들려고합니다. 따라서 비디오 및 이미지가 페이지를로드 할 때 보여지는 유일한 것입니다. dowm을 스크롤하면 웹 사이트의 내용이 나타납니다. 내가 아이디어를 설명하기 위해 뭔가를했습니다절대 divs 창에서 생성 된 높이 아래에 상대 div를 배치하십시오.

: 나는 사이트의 컨텐츠를 추가 할 때 http://instagib.dk/JS-test/

문제는, 그것은 비디오 및 이미지 아래에 나타납니다. 문제는 필자가 절대적으로 그리고 문서의 맥락에서 벗어난 것으로 보인다.

절대 내용의 높이를 읽고 비디오 뒤에 내용을 배치하는 JS, Jquery 솔루션이 있습니까?

건배 :)

<body> 
<!-- Header --> 
<header class="header"> 
    <div class="header-bg"> 
     <div class="logo-top"></div> 
    </div> 
    <nav> 
     <div class="menu"> 
      <div class="hamburger"></div> 
      <div class="hamburger"></div> 
      <div class="hamburger"></div> 
      <ul class="nav-list"> 
       <li><a href="#">Projects</a></li> 
       <li><a href="#">Services</a></li> 
       <li><a href="#">Advantages</a></li> 
       <li><a href="#">Who are we</a></li> 
       <li><a href="#">Work with us</a></li> 
      </ul> 
     </div> 

    </nav> 
</header> 
<video class="intro" autoplay loop> 
    <source src="video/black_clouds.mp4" type="video/mp4"> 
     <source src="video/black_clouds.webm" type="video/webm"> 
      Your browser does not support the video tag. 
</video> 
<div class="intro-seperator"></div> 

<!-- Main content --> 
<main class="content"> 
</main> 

<!-- Footer --> 
<footer> 
    <small>&copy; Crafthouse 2014</small> 
</footer> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$(function() { 

    divFade = $(".header-bg"); 

    var toggleHeader = function(noAnimate) { 

     var threshold = 400, 
      fadeLength = 300, 
      opacity, 
      scrollTop = $(document).scrollTop(); 

     if (scrollTop < threshold) { 
      opacity = 0; 
     } else if (scrollTop > threshold + fadeLength) { 
      opacity = 1; 
     } else { 
      if (noAnimate) { 
       opacity = 1; 
      } else { 
       opacity = (scrollTop - threshold)/fadeLength; 
      } 
     } 

     divFade.css("opacity", opacity); 

    }; 

    toggleHeader(true); 
    $(window).scroll(function() { 
     toggleHeader(); 
    }); 

}); 
</script>

CSS의 : 당신의 내용에 대해 다음

*, 
*:before, 
*:after { 
    box-sizing: border-box; 
} 

body { 
    font-family: 'Open Sans', sans-serif; 
} 
/* 
    ======================================== 
    Layout: Header 
    ======================================== 
*/ 

.header { 
    width: 100%; 
    height: 60px; 
    position: fixed; 
    top: 0px; 
    color: #fff; 
    z-index: 9999; 
} 

.header-bg { 
    width: 100%; 
    height: 60px; 
    line-height: 60px; 
    vertical-align: middle; 
    background: #212121; 
    position: absolute; 
    opacity: 0; 
    font-size: 25px; 
} 

.logo-top { 
    background: url(../images/crafthouse-top-logo.png) no-repeat; 
    width: 171px; 
    height: 60px; 
    margin: 0 auto; 
} 

.menu { 
    width: 70px; 
    height: 60px; 
    padding-top: 20px; 
    position: absolute; 
    left: 8%; 
} 
.menu:hover { 
    background: #000; 
} 
.hamburger { 
    width: 30px; 
    height: 3px; 
    background: #fff; 
    margin: 0 auto; 
    margin-bottom: 5px; 
} 
.menu:hover .hamburger { 
    background: #00ff91; 
} 

.nav-list { 
    width: 150px; 
    margin-top:20px; 
    background: #000; 
    display: none; 
    padding: 20px 0 10px 18px; 
    text-transform: uppercase; 
} 
.nav-list li { 
    margin-bottom: 10px; 
} 
.nav-list li a { 
    color: #fff; 
    text-decoration: none; 
    font-size: 14px; 
} 
.nav-list li a:hover { 
    color: #00ff91; 
} 

.menu:hover .nav-list { 
    display: block; 
} 


.intro { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    background-size: cover; 
} 

.intro-seperator { 
    background: url(../images/seperator-brush-top.png); 
    height: 164px; 
    width: 100%; 
    position: absolute; 
    right: 0; 
    bottom: 0; 
} 

.test { 
    width: 100%; 
    height: 100%; 
    background: #fff; 
} 
/* 
    ======================================== 
    Layout: Content 
    ======================================== 
*/ 

.content { 
    height: 2000px; 
}

출처

2014-12-14 Mikkel Madsen

사용 :

비디오 아래의 실제 내용을 이동

main{ 
    position:absolute; 
    top:100%; 
}

(가정 i 콘텐츠 요소)

출처

2014-12-14 20:27:58 Fuzzyma

니스! 그것은 작동합니다. 그것은 매우 단순한 hehe이었다. 이 솔루션을 사용하여 접근성과 SEO 친화도에 대한 질문이 있습니다. 이 절대 프로세스로 주 컨텐츠와 꼬리말의 레이아웃을 제어하기 위해 페이지의 기본 태그와 꼬리말 태그 주위에 컨텐츠 div (상단 : 100 %;)를 래핑합니다. 이 방법을 사용하면 부작용이 있습니까? 고맙습니다. –

이 경우 어떤 영향이 있다고 생각하지 않습니다. 그러나 나는 100 % 확실하지 않다. – Fuzzyma

좋아, 친구 :)하지만 어쨌든 thx! –

절대 divs 창에서 생성 된 높이 아래에 상대 div를 배치하십시오.

답변

관련 문제