<body>를 전체 화면으로 채우시겠습니까?

129

웹 페이지의 배경으로 방사형 그래디언트를 사용하고 있습니다.

background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));

작동하지만 내용이 전체 페이지를 채우지 않으면 그라디언트가 잘립니다. <body>요소가 항상 전체 페이지를 채우 도록하려면 어떻게 해야합니까?

html css radial-gradients

— Ry-
소스

2

그리고 body { width: 100%; height: 100%; }작동하지 않습니까?

— Alex

그 CSS 비트가 body 태그에 적용됩니까? 최신 Chrome jsfiddle.net/kdjFD/embedded/result에서 효과적 입니다. 어떤 브라우저를 테스트하고 있습니까?

— LeRoy

4

아니요, body { width: 100%; height: 100%; }작동하지 않습니다. 나는 그것을 적용해야한다고 <html>생각합니다.

— Ry-

이전 -webkit- 구문을 사용하지 마십시오. 공식 W3C 구문 사용

— Tim Nguyen

@TimNguyen :이 질문은 3 년 전에 브라우저를 지원하지 않는 질문이었습니다.

— Ry-

201

html, body {
    margin: 0;
    height: 100%;
}

— 캡 드래곤
소스

18

html { height: 100%; }실제로 필요한 것 같습니다 .

— Ry-

30

나에게도 충분 하지 html { height: 100%; }않았다 . 고쳤다. body { height: 100%; }html, body { min-height: 100%; }min-height

— Stephen P

1

이 문제가 background : 선형 그라디언트이며 단순한 배경이 아닌 경우에만 발생하는 문제

— ASEN

@ASEN 왜 그런지 알아 낸 적이 있습니까?

— lacy

2

여전히 작동하지 않으면 누구에게나 변경 100%하십시오 100vh.

— PolymorphismPrince

27

우리 사이트에는 컨텐츠가 정적 인 페이지와 AJAX와 함께로드 된 페이지가 있습니다. 한 페이지 (검색 페이지)에서 AJAX 결과가 페이지를 채우는 것 이상일 경우와 결과가 리턴되지 않는 경우가있었습니다. 모든 경우에 배경 이미지가 페이지를 채우려면 다음 CSS를 적용해야합니다.

html {
   margin: 0px;
   height: 100%;
   width: 100%;
}

body {
   margin: 0px;
   min-height: 100%;
   width: 100%;
}

height에 대한 html및 min-height에 대한 body.

— jwatts1980
소스

1

그들 중 어느 것도 필요하지 않습니다 width: 100%;.

— Ry-

1

표시 때문에 : 블록 자연

— Valen

또한 margin: 0;충분합니다. 0을 사용하는 단위를 지정할 필요가 없습니다.

— KameeCoding

15

다른 답변 중 어느 것도 나를 위해 일하지 않았으므로 동일한 문제를 발견 한 솔루션을 찾고있는 다른 사람들을위한 답변으로 이것을 게시하기로 결정했습니다. HTML과 본문을 설정 min-height하거나 그라디언트가 본문 높이를 채우지 않아야합니다.

이에 대한 정답을 제공하기 위해 Stephen P의 의견 을 찾았습니다 .

html {
    /* To make use of full height of page*/
    min-height: 100%;
    margin: 0;
}
body {
    min-height: 100%;
    margin: 0;
}

배경 채우는 몸 높이

html (또는 html 및 body) 높이를 100 %로 설정하면

html {
    height: 100%;
    margin: 0;
}
body {
    min-height: 100%;
    margin: 0;
}

본문을 채우지 않는 배경

— 커뮤니티
소스

12

HTML과 본문 모두에 100 %를 적용해야했습니다.

— 흐 트루 판
소스

4

신체 수준에서 뷰포트 (vh, vm) 측정 단위를 사용해보십시오.

html, 본문 {margin : 0; 패딩 : 0; } 몸 {분 높이 : 100vh; }

본문의 가로 여백, 패딩 및 테두리에 vh 단위를 사용하고 최소 높이 값에서 빼십시오.

특히 크기를 조정할 때 바디 내의 요소에 vh, vm 장치를 사용하여 기괴한 결과를 얻었습니다.

— 마이크 라이트
소스

1

대체로 올바른 방법은 CSS를 다음과 같이 설정하는 것입니다.

html
{
    overflow: hidden;
}

body
{
    margin: 0;
    box-sizing: border-box;
}

html, body
{
    height: 100%;
}

— 마틴 원케
소스

이것의 중요한 부분은 6 년 전에받은 대답과 동일합니다. 죄송합니다.

— Ry-

1

위의 모든 솔루션을 시도했지만 그중 하나를 신뢰할 수는 없지만 제 경우에는 효과가 없었습니다.

나에게 문제는 <header>태그가 margin-top5em이고 <footer>마진 하단이 5em 이기 때문에 발생 했습니다. 나는 그것들을 제거하고 대신에 padding(위와 아래) 각각을 넣었습니다 . 여백을 교체하는 것이 문제의 이상적인 해결책인지 확실하지 않지만 요점은 첫 번째 요소와 마지막 요소에 <body>여백이 있으면 그 요소 를보고 제거 할 수 있다는 것입니다.

내 html및 body태그의 스타일은 다음과 같습니다.

body {
  line-height: 1;
  min-height: 100%;
  position: relative; }

html {
  min-height: 100%;
  background-color: #3c3c3c; }

— 디 니카 색소 나
소스

1

테두리 또는 패딩 이 있으면 솔루션

html, body {
    margin: 0;
    height: 100%;
}
body {
    border: solid red 5px;
    border-radius: 2em;
}

스 니펫 확장

불완전한 렌더링을 생성합니다

테두리 나 패딩이있을 때 바로 가져 오려면

대신 사용하십시오

html, body {
    margin: 0;
    height: 100%;
}
body {
    box-sizing: border-box;
    border: solid red 5px;
    border-radius: 2em;
}

스 니펫 확장

로 마틴 지적, 비록이 overflow: hidden필요하지 않습니다.

(2018-Chrome 69 및 IE 11에서 테스트)

— 브로키 팔
소스

귀하의 답변은 귀하에게만 해당되며 body태그에 테두리를 추가했기 때문 입니다. 테두리가 없으면 body뷰포트의 100 %를 정확히 채 웁니다. 예를 들어 배경색으로 볼 수 있습니다. 이 질문에 대한 정답은 7 년 전에 수락되었지만 여전히 유효합니다.

— Niss

-1

이것은 나를 위해 작동합니다 :

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .test{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='test'>Some text</div>
</body>
</html>

— GigiProve
소스

질문이 아니 었습니다. 죄송합니다. 그래도 당신에게 맞는 것을 발견하게되어 기쁩니다.

— Ry-