고쳐 배경 크기 : 커버; 문제

단일 페이지 웹 사이트를 만들려고하는데 기본 레이아웃을 정렬하는 데 문제가 있습니다. 내가 원하는 것은 사용자가 브라우저 창을 채우는 첫 번째 div (예 : http://whiteboard.is)를 차지하는 사이트를 방문 할 때입니다. 그 후 두 번째 div는 고정 된 위치이지만 수동으로 높이를 설정하여 콘텐츠를 추가 할 수 있습니다.고쳐 배경 크기 : 커버; 문제

배경 크기 태그를 사용해 보았지만 어떤 이유로 수평으로 만 고정됩니다. 수직적으로 단지 min-height : value로 설정됩니다.

왜 그런가? 이 컨테이너의 크기를 증가하지 않도록

HTML

<body> 

<section id="first" class="clearfix"> 
<div class="scanlines"></div> 
</section> 

<section id="second" class="clearfix"> 
<div class="scanlines"></div> 
</section> 

</body>

CSS

#first { 
    background: url(1.jpg) no-repeat center center; 
    background-attachment: fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    min-width: 1024px; 
    min-height: 768px; 
    } 

#second { 
    background: url(3.jpg) center no-repeat fixed; 
    position: relative; 
    height: 8000px; 
    width: 100%; 
    } 

.scanlines { 
    background: url(scanlines.png); 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 25; 
    }

출처

2012-05-12 Ollie Barker

.scanlines 클래스에 position: absolute는 흐름에서 블록을합니다.

출처

2012-05-12 21:27:58 Neil

: / –

.scanlines에 왼쪽 패딩과 오른쪽 패딩을 추가 할 수 있습니다. .scanlines에 상자 크기 : 테두리 상자를 설정해야합니다.

이렇게하면 콘텐츠가 세로로 이동하게됩니다. 너비가 100 %이므로 콘텐츠가 가로로 흐르려고합니다.

출처

2013-02-27 22:33:23 lockedown

http://whiteboard.is에 자바 스크립트 (jQuery)를 사용하여 첫 번째 컨테이너의 크기를 설정합니다. 이전 게시물 인 것으로 알고 있지만 여전히 답을 찾을 수 있습니다.

우리는 약간 다른 코드로 작성했지만 간단한 대답은 문서 준비 기능이나 페이지가로드 된 후 다른 호출에 배치하는 것입니다.

$('#first').css({ 
    'height' : $(window).height(), 
    'width' : $(window).width() 
});

화이트 보드 사이트에서 변수로 저장하여 다양한 장소에서 사용하지만, 시작하는 데 도움이되는 간단한 대답입니다.

실제로이 함수를 유틸리티 클래스에 적용하고 브라우저 윈도우 크기를 조정하려는 요소의 사이트 전체에서이 클래스를 사용합니다. 또한 창 크기를 조정할 때이 함수를 다시 실행하는 것이 좋습니다.

마크 업 :

<section id="first" class="clearfix fillscreen"> 
    <div class="scanlines"></div> 
</section>

자바 스크립트 : 나는 전부 주사선을 제거했는데 문제가 지속

// the basic function, used with a class instead of an ID 
function fillscreen() { 
    $('.fill-screen').css({ 
     'height' : $(window).height(), 
     'width' : $(window).width() 
    }); 
} 

// run our sizing function on document ready 
$(document).ready(function(){ 
    fillscreen(); 
}); 

// run it again anytime the window is resized 
$(window).on('resize',function(){ 
    fillscreen(); 
});

출처

2013-12-14 05:46:26 taylorleejones

고쳐 배경 크기 : 커버; 문제

답변

관련 문제