컨테이너의 빈 DIV 높이와 너비 만들기

내 HTML에 현재 뷰포트가 뻗어있는 배경 이미지가 포함되어 있습니다. 그 안에 뷰포트의 높이와 너비에 뻗는 div을 배치 할 계획이며 50 % 불투명도의 검은 색 배경색을 사용합니다.컨테이너의 빈 DIV 높이와 너비 만들기

나는 div을 너비와 높이가 100 %로 설정했습니다. div은 늘어나지 않고 왜 그럴 수 없는지!

HTML :

<!DOCTYPE HTML> 
<html lang="en"> 
    <head> 
     <title>Tester</title> 
     <meta charset="UTF-8"/> 
     <style type="text/css"> 
      html { 
       background: url(http://cjpstudio.com/wp-content/uploads/2011/12/cityrock1.jpg) no-repeat center center fixed; 
       -webkit-background-size: cover; 
       -moz-background-size: cover; 
       -o-background-size: cover; 
       background-size: cover; 
      } 

      #background-color { 
       width: 100%; 
       height: 100%; 
       background-color: #000000; 
      }  
     </style> 
    </head> 
    <body> 
     <div id="background-color"> 
     </div> 
    </body>

출처

2012-07-02 Olly F

내가 문제를 확인할 수 없습니다 : http://jsfiddle.net/ 당신이 정확하게 당신이 원하는 일을하는 나는 당신의 코드를 편집 zdwhK/ – saluce

위의 최종 결과는 사용자가 완전히 검은 색 뷰포트를 보는 것입니다. 이것은'div'가 전체 뷰포트를 채우고'background-color' 값이'# 000000'이기 때문입니다. –

width에 대한 대안에 대한

및 height 대신 사용할 수 position :

#background-color { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0,0,0,0.5); 
}

이 의지하거나, 사용자가있는 것입니다 페이지를 스크롤 할 수있게 할 수있다 #background-color 요소를 이동하여 사용자가 이미지를 이동할 가능성을 피하려면 대신 position: fixed을 사용하십시오.

#background-color 요소가이 요소가 상위 대신 (position: absolute 용) 페이지/문서에 대해 위치한다 static 이외의 position와 상위 요소 또는 (position: fixed 용) 뷰포트 경우.

사이트의 콘텐츠와 사용자의 상호 작용을 막으려는 시도 인 경우에도 물론 실패 할 수 있습니다.

그 이유를 설명 할 수 :

는 아래 OP에서 언급 응답을 편집? 나는 어떻게/div가 창을 채우기 위하여 지시를 얻고 있는지 이해하지 않는다. 나는 내가 완전히 이해했다라고 생각했다 position ... 나는 추측한다. 어쨌든 설명이 도움이 될 것입니다.

물론, 그것은이 단순히 absolute 또는 fixed 중 하나에 요소를 배치 한 다음 left에서 뷰포트의 top, 0px에서 0px의 측면에 대해 그 축에 위치하여 작동하지만 설명의 많은 부분이 아니다 측면에서 0px과 right면에서 0pxbottom에서.

출처

2012-07-02 21:09:54

하! 이것은 내 사이트의 콘텐츠 내에서 사용자 상호 작용을 방지하려는 시도가 아닙니다. 나는 훨씬 더 큰 사이트를위한 기초 레이어를 만들고있을 뿐이며, 내가 정말로 기본적인 것이라고 생각되는 것에 문제가있는 것처럼 보입니다. –

Sidenote, rgba는 IE 버전 중 지원이 부족합니다. –

Not re. rgba 지원, 감사합니다. –

은 HTML 태그와 body 태그 모두 너비와 (최소) 높이를 100 %로 설정합니다. 또한 검은 색 대신에 @black을주의하십시오.

전체 페이지 차단이 필요한 경우. 100 % 너비와 높이로 고정 된 요소를 설정하는 것이 좋습니다 (다른 주석에서 언급 한 것처럼)

고정 요소가 요소를 창 요소와 일치시키기 때문에 더 잘 작동합니다. Absolute는 요소를 상대 위치, 절대 위치 또는 고정 위치로 가장 가까운 조상에 매치합니다. 고정은 IE7 이후 지원됩니다.

출처

2012-07-02 21:12:23

죄송합니다. 문제와 관련이없는 @black을 잡았습니다.하지만 위의 내용을 명확하게하기 위해 변경했습니다. 당신이 지금 제안하는 것을 시도 할 것입니다. –

해당 div에 내용이 없기 때문에 배경이 표시되지 않습니다.이 사업부는이 날

#background-color { 
      position:absolute; 
      top:0; 
      left:0; 
      width:100%; 
      height: 100%; 
      background-color: @black; 
      }

위해 일할 것 같았다 콘텐츠가없이 페이지를 포함하려면 희망이 당신을 위해 작동합니다 :)

출처

2012-07-02 21:12:57

은 기본적으로 당신이 경우 절대 같은 위치를 필요

html { 
 
    background: url(http://chrisjepson.com/wp-content/uploads/2017/06/PrideBus2017_CJP2043-web-700x485.jpg) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
#background-color { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #000000; 
 
    opacity: .5; 
 
}

<!DOCTYPE HTML> 
 
<html> 
 

 
<head> 
 
    <title>Tester</title> 
 
</head> 
 

 
<body> 
 
    <div id="background-color"></div> 
 
</body> 
 

 
</html>

출처

2017-06-17 06:14:20 Alireza

컨테이너의 빈 DIV 높이와 너비 만들기

답변

관련 문제