전체 화면을 채우시겠습니까?
웹 페이지의 배경으로 방사형 그래디언트를 사용하고 있습니다.
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과 본문 모두에 100 %를 적용해야했습니다.
신체 수준에서 뷰포트 (vh, vm) 측정 단위를 사용해보십시오.
html, 본문 {margin : 0; 패딩 : 0; } 몸 {분 높이 : 100vh; }
본문의 가로 여백, 패딩 및 테두리에 vh 단위를 사용하고 최소 높이 값에서 빼십시오.
특히 크기를 조정할 때 바디 내의 요소에 vh, vm 장치를 사용하여 기괴한 결과를 얻었습니다.
I think the largely correct way, is to set css to this:
html
{
overflow: hidden;
}
body
{
margin: 0;
box-sizing: border-box;
}
html, body
{
height: 100%;
}
I tried all the solutions above and I'm not discrediting any of them, but in my case, they didn't work.
For me, the problem was caused because the <header> tag had a margin-top of 5em and the <footer> had a margin-bottom of 5em. I removed them and instead put some padding (top and bottom, respectively). I'm not sure if replacing the margin was an ideal fix to the problem, but the point is that, if the first and last elements in your <body> has some margins, you might want to look into it and remove them.
My html and body tags had the following styles
body {
line-height: 1;
min-height: 100%;
position: relative; }
html {
min-height: 100%;
background-color: #3c3c3c; }
If you have a border or padding, then the solution
html, body {
margin: 0;
height: 100%;
}
body {
border: solid red 5px;
border-radius: 2em;
}produces the imperfect rendering
To get it right in the presence of a border or padding
대신 사용하십시오
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에서 테스트)
이것은 나를 위해 작동합니다 :
<!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>
참고 URL : https://stackoverflow.com/questions/5721904/make-body-fill-entire-screen
'Programing' 카테고리의 다른 글
| 해시의 값을 기준으로 해시 배열을 어떻게 정렬합니까? (0) | 2020.07.27 |
|---|---|
| null + true는 어떻게 문자열입니까? (0) | 2020.07.27 |
| 전체 심볼릭 링크 경로를 보는 방법 (0) | 2020.07.27 |
| .htaccess RewriteRule이 작동하지 않는 방법 (0) | 2020.07.27 |
| `testl` eax와 eax? (0) | 2020.07.27 |