CSS 만 사용하면 전체 문서 컨텐츠 영역을 정확히 다루는 DIV를 만들 수 있습니까?

StackOverflow https://stackoverflow.com/questions/908103

  •  05-09-2019
  •  | 
  •  

문제

CSS 만 사용할 수는 있지만 JavaScript가 전체 컨텐츠 영역을 정확하게 덮을 수있는 DIV 스타일을 사용하는 것이 불가능한 지 궁금합니다. (참고 : 뷰포트뿐만 아니라 전체 컨텐츠). 이 때문에 불가능한 것 같습니다u003Cbody> 요소는 약간의 여백을 가지고 있으며, 신체 요소의 마진 너비와 높이를 포함하도록 DIV를 스타일링하는 쉬운 방법이없는 것 같습니다. 그러나 사실 가능합니까?

업데이트: 죄송합니다. 요구 사항은 우리가 마진을 설정할 수 없다는 것입니다.u003Cbody> to 0 ... (업데이트 2 : 우리가 라이브러리로 만들어야하고 그것을 사용하는 모든 사람들에게 신체에 마진을 갖도록 요청할 수 없다면)

도움이 되었습니까?

해결책

만약u003Cbody> 여백이 설정되어 있고, 당신은u003Cdiv> 여백을 무시하려면? 마진이 브라우저마다 다를 수 있다는 것을 알고 있습니다. 마진이 10px의 마진이 있으면 DIV를처럼 스타일을 지정합니다.

div#mydiv {
margin: -10px;
}

동일한 원리를 사용하여 패딩을 무시합니다 (해당되는 경우).

다른 팁

물론, 나는 생각합니다.

기본 마진 재설정 :

* { margin: 0; padding: 0; }

그런 다음 

<div id="shader"></div>

하다:

#shader {position: absolute; width: 100%; height: 100%; min-height: 100%; top: 0; left: 0;}

이것은 아마도 해결책이지만 IE에서는 작동하지 않습니다 ...

div.cover { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; }

논리적으로 이것은 불가능합니다. 당신의 div는 외부가 아닌 몸 안으로 들어가야합니다.

또는 다른 방법으로 말하면, 당신은 전체 "콘텐츠 영역"을 덮을 것을 요청했지만 실제로는 당신이 원하는 것이 아니라 몸 전체를 덮기를 원합니다.

Lazlow는 최고의 제안을합니다. 어쩌면 부정적인 마진/패딩을 큰 무언가로 설정하여 브라우저 기본값보다 크지 않도록하고 동일한 마진/패딩 값이 양수 만있는 내부 DIV를 가질 수 있습니까?

예. 바디 태그의 패딩과 마진을 0으로 설정 한 다음 DIV 태그의 패딩과 여백을 0으로 설정했습니다.

이건 어때?

<div style="position:absolute;left:0px;top:0px;width:100%;height:100%;">...

암브로스의 대답을 좋아했습니다. 본체는 HTML을위한 최고의 용기입니다. 나는 Mozilla, Chrome, IE 또는 Opera (현재 버전)와 신체의 여백을 보지 못했습니다. 그것을 증명하기 위해 : 스타일
Body {Background-Color : Yellow;} /*를 살펴 봅니다. */

어쨌든, 마진, 패딩 등의 브라우저 설정을 0으로 정상화하는 것은 항상 좋은 관행입니다! 위의 Dmitri Farkov처럼

브라우저를 통해 Div "float"를 만들 수있는 방법이 없다고 생각합니다. 그렇다면 기술이 화면을 극복 할 수 있습니다. Body Style = "margin : -40px" - 이것이 바탕 화면에서 피를 흘려야합니까?

그건 그렇고, HTML 스타일은 비정상적입니다. 다음에 무엇을 하시겠습니까? 스타일 , ?? 어쨌든 그들은 당신이 그들 모두에 스타일을 설정할 수 있도록 거기에 있지만 나는 그것이 영리하다고 생각하지 않습니다.

이것이 도움이 될 수 있는지 모르겠습니다.

<div style="margin:-100%">

하지만 이것이 브라우저 창을 극복 할 수 있을지 의심 스럽습니다 ...

솔루션은 다른 DIV가 절대적인 위치를 갖는 상황을 포괄하기 때문에 Miffthefox의 접근 방식이 최고라고 생각합니다. 절대 포지셔닝 요소가 흐름을 벗어나고, 예를 들어 맨 위에 위치하는 요소가있는 경우, 9000px가 있으면, 신체 높이는> 9000px가 아닙니다.

<style type="text/css">
    #superdiv{ position:fixed; top:0; left:0; width:100%; height:100%; }
</style>

<div id="superdiv">
    Put some content here.
</div>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top