전체 화면을 채우시겠습니까?
다음과 같이 방사형 그라데이션을 웹 페이지의 배경으로 사용하고 있습니다.
background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));
작동하지만 내용이 전체 페이지를 채우지 않으면 그라데이션이 끊어집니다.어떻게 만들 수 있습니까?<body>요소가 페이지 전체를 채웁니다, 항상?
html, body {
margin: 0;
height: 100%;
}
우리 사이트에는 콘텐츠가 정적인 페이지와 AJAX로 로드되는 페이지가 있습니다.한 페이지(검색 페이지)에서 AJAX 결과가 페이지를 가득 채우는 경우와 결과를 반환하지 않는 경우가 있었습니다.모든 경우에 배경 이미지가 페이지를 채우려면 다음 CSS를 적용해야 했습니다.
html {
margin: 0px;
height: 100%;
width: 100%;
}
body {
margin: 0px;
min-height: 100%;
width: 100%;
}
height를 위해html그리고.min-height를 위해body.
다른 어떤 답변도 저에게 효과가 없었기 때문에, 저는 같은 문제를 발견한 다른 사람들을 위한 답변으로 이 글을 올리기로 결정했습니다.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;
}
저는 html과 body 모두 100% 적용해야 했습니다.
목표는 <본체> 요소가 화면의 사용 가능한 높이를 차지하도록 하는 것입니다.
콘텐츠가 화면 높이 이상을 차지하지 않을 것으로 예상하거나 내부 스크롤 가능 요소를 만들 계획인 경우
body {
height: 100vh;
}
그렇지 않으면, 당신은 화면이 담을 수 있는 것보다 더 많은 콘텐츠가 있을 때 스크롤 가능하게 되기를 원하므로, 설정합니다.
body {
min-height: 100vh;
}
이것만으로도 목표를 달성할 수 있습니다. 비록 가능하고 아마도 바람직한 개선이 가능합니다.
<본체>의 여백을 제거합니다.
body {
margin: 0;
}
그렇게 하는 데는 두 가지 주요 이유가 있습니다.
- <body>가 창 가장자리에 도달합니다.
- <body>에는 더 이상 시작 시 스크롤 막대가 없습니다.
추신: 예와 같이 화면의 오른쪽 하단 모서리가 아닌 화면 중앙에 배경이 있는 방사형 기울기를 원한다면 다음과 같은 것을 사용하는 것을 고려해 보십시오.
body {
min-height: 100vh;
margin: 0;
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(0,0,0,1) 100%);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=">
<title>test</title>
</head>
<body>
</body>
</html>신체 수준에서 뷰포트(vh, vm) 측정 단위를 사용해 보십시오.
html, 본문 {여유: 0; 패딩: 0; } 본문 {최소 높이: 100vh; }
차체의 수평 여백, 패딩 및 테두리에 vh 단위를 사용하고 최소 높이 값에서 이를 뺍니다.
특히 크기 조정 시 신체 내 요소에 대해 vh,vm 단위를 사용하여 이상한 결과를 얻었습니다.
저는 CSS를 다음과 같이 설정하는 것이 대체로 올바른 방법이라고 생각합니다.
html
{
overflow: hidden;
}
body
{
margin: 0;
box-sizing: border-box;
}
html, body
{
height: 100%;
}
저는 위의 모든 해결책을 시도해 보았지만, 그 중 어떤 것도 신용을 떨어뜨리지는 않았지만, 저의 경우에는, 그것들이 작동하지 않았습니다.
나에게, 그 문제는 다음과 같은 이유로 야기되었습니다.<header>에 술잡기가 있습니다.margin-top및 5em 및 »<footer>최저 5엠의 마진을 기록했습니다.그것들을 제거하고 대신에 몇 개를 넣었습니다.padding(각각 위와 아래).마진을 대체하는 것이 문제에 대한 이상적인 해결책이었는지는 확실하지 않지만, 요점은 당신의 첫 번째 요소와 마지막 요소가<body>약간의 여유가 있습니다. 조사해서 제거하는 것이 좋을 것입니다.
나의html그리고.body과 같습니다.
body {
line-height: 1;
min-height: 100%;
position: relative; }
html {
min-height: 100%;
background-color: #3c3c3c; }
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과 함께 테스트)
언급URL : https://stackoverflow.com/questions/5721904/make-body-fill-entire-screen
'source' 카테고리의 다른 글
| -1103 오류 Domain=NSURLerrorDomain Code=-1103 "리소스가 최대 크기를 초과합니다" iOS 13 (0) | 2023.09.04 |
|---|---|
| IIS Express를 클래식 파이프라인 모드로 강제 설정 (0) | 2023.09.04 |
| 컴파일 시 GCC의 현재 버전을 어떻게 테스트합니까? (0) | 2023.08.30 |
| 배경 이미지 위의 반투명 컬러 레이어? (0) | 2023.08.30 |
| 명령줄 스크립트를 통해 연결된 모든 장치의 장치 UUID를 어떻게 찾을 수 있습니까? (0) | 2023.08.30 |