현재 브라우저 크기에 맞게 크기가 조정되는 동적 헤더 이미지가 있습니다. (정확히 다음과 같습니다 : http://www.theadventurists.com/ )하지만 현재 다른 콘텐츠와 겹칩니다. 내가 실제로 원하는 것은 화면을 차지하고 콘텐츠를보기 위해 아래로 스크롤하는 이미지입니다.
내가 링크 한 웹 사이트에서 콘텐츠가 겹치지 않게하려면 어떻게해야합니까? JS가 관련되어 있습니까? 복제에 가장 가까운 것은 아래 div가 margin-top 100 %를 갖는 것입니다. 그러나 브라우저가 특정 크기 일 때 여백이 너무 커져서 잘못된 수정입니다.
<div id="test_bg">
</div>
<div id="page">
<p>This is the content</p>
</div>
#test_bg{
background-color:blue;
position:absolute;
background-size: cover;
background-repeat: no-repeat;
top: 0;
left: 0;
bottom:0;
right:0;
}
#page{
background-color:red;
margin-top:100%;
}
http://jsfiddle.net/9Trb2/9/ 파란색은 이미지이고 빨간색은 콘텐츠입니다.
마진을 100 %로 설정하는 것이 최선의 방법이 아닙니다. JSFiddle에 몇 가지 문제가있었습니다. 배경 URL이 실제 JPG가 아닌 imgur 페이지를 가리키고 있었기 때문에 변경했습니다. 또한 div를 올바르게 타겟팅하는 page데 필요한 CSS 선택기 가 있습니다 #page.
문제를 해결하기위한 나의 접근 방식은 #test_bg높이를 100 % 로 변경하고 절대 위치를 제거 하는 것이 었 습니다. 절대 위치를 제거함으로써 #test_bg문서 흐름의 일부가되고 다음 div가 자동으로 그 바로 아래에 배치됩니다. div를 100 % 높이로 설정하기 위해해야 할 또 다른 일은 body및 html높이를 100 %로 설정 #test_bg하는 것입니다. 그렇지 않으면 height = 100 %로 설정해 도 아무 작업도 수행되지 않습니다. 다음은 JSFiddle 입니다.
#test_bg{
background-image:url(http://i.imgur.com/GgfpgA3.jpg);
background-size: cover;
background-repeat: no-repeat;
height: 100%;
}
html,body{
height: 100%;
}
#page{
height:400px;
width:400px;
background-color:red;
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다