Làm <body> lấp đầy toàn bộ màn hình?

129

Tôi đang sử dụng một gradient xuyên tâm làm nền trên trang web của mình, như vậy:

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

Nó hoạt động, nhưng khi nội dung không lấp đầy toàn bộ trang thì gradient bị cắt. Làm thế nào tôi có thể làm cho <body>phần tử lấp đầy toàn bộ trang, luôn luôn?

html css radial-gradients

— Ry-
nguồn

2

Và body { width: 100%; height: 100%; }không làm việc?

— Alex

Đó là một chút của css được áp dụng cho thẻ body phải không? Nó hoạt động rất tốt đối với tôi trong Chrome jsfiddle.net/kdjFD/embedded/result . Bạn đang kiểm tra trình duyệt nào?

— LeRoy

4

Không, body { width: 100%; height: 100%; }không hoạt động. Tôi đoán tôi phải áp dụng nó <html>quá.

— Ry-

Đừng sử dụng cú pháp -webkit- cũ. Sử dụng cú pháp W3C chính thức

— Tim Nguyen

@TimNguyen: Câu hỏi này đã được hỏi ba năm trước, khi không có trình duyệt hỗ trợ cho điều đó.

— Ry-

201

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

— capdragon
nguồn

18

Dường như tất cả những gì nó cần là html { height: 100%; }thực sự.

— Ry-

30

Cả tôi html { height: 100%; }cũng không body { height: 100%; }đủ (Opera bao gồm cả thử nghiệm) Điều tốt nhất là html, body { min-height: 100%; }sử dụng chiều cao thay vì chiều cao tối thiểu để lại nền trắng của tôi với màu nền được áp dụng khi tôi mở rộng một số div có thể thu gọn ở giữa trang của mình. min-heightĐã sửa mà.

— Stephen P

1

Tại sao vấn đề này chỉ xảy ra khi sử dụng nền: gradient tuyến tính chứ không phải với nền đơn giản

— HỎI

@ASEN Bạn đã bao giờ tìm hiểu tại sao lại như vậy chưa?

— ren

2

Nếu nó vẫn không hoạt động cho bất cứ ai chỉ cần thay đổi 100%thành 100vh.

— Đa hìnhPrince

27

Trên trang web của chúng tôi, chúng tôi có các trang có nội dung tĩnh và các trang được tải bằng AJAX. Trên một trang (một trang tìm kiếm), có những trường hợp khi kết quả AJAX sẽ nhiều hơn lấp đầy trang và trường hợp nó sẽ không trả lại kết quả. Để hình nền được lấp đầy trong mọi trường hợp, chúng tôi phải áp dụng CSS sau:

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

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

heightcho htmlvà min-heightcho body.

— jwatts1980
nguồn

1

Không ai trong số họ cần width: 100%;.

— Ry-

1

vì hiển thị: tính chất khối

— Valen

cũng margin: 0;đủ, không cần chỉ định đơn vị nào bạn sử dụng số 0

— KameeCoding

15

Vì không có câu trả lời nào khác có hiệu quả với tôi, tôi quyết định đăng bài này như một câu trả lời cho những người khác đang tìm kiếm một giải pháp cũng tìm thấy vấn đề tương tự. Cả html và body cần được thiết lập min-heighthoặc gradient sẽ không lấp đầy chiều cao cơ thể.

Tôi tìm thấy bình luận của Stephen P để cung cấp câu trả lời chính xác cho điều này.

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

nền chiều cao cơ thể

Khi tôi có chiều cao html (hoặc html và thân) được đặt thành 100%,

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

nền không lấp đầy cơ thể

— cộng đồng
nguồn

12

Tôi đã phải áp dụng 100% cho cả html và body.

— htrufan
nguồn

4

Hãy thử sử dụng các đơn vị đo lường của viewport (vh, vm) ở cấp độ cơ thể

html, thân {lề: 0; đệm: 0; } cơ thể {min-height: 100vh; }

Sử dụng các đơn vị vh cho lề ngang, phần đệm và đường viền trên thân máy và trừ chúng khỏi giá trị chiều cao tối thiểu.

Tôi đã có kết quả kỳ lạ khi sử dụng các đơn vị vh, vm trên các yếu tố trong cơ thể, đặc biệt là khi định cỡ lại.

— Mike Wright
nguồn

1

Tôi nghĩ rằng cách chính xác, là đặt css cho điều này:

html
{
    overflow: hidden;
}

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

html, body
{
    height: 100%;
}

— Martin Wantke
nguồn

Các phần quan trọng của điều này giống như câu trả lời được chấp nhận sáu năm trước, xin lỗi.

— Ry-

1

Tôi đã thử tất cả các giải pháp trên và tôi không làm mất uy tín của chúng, nhưng trong trường hợp của tôi, chúng không hoạt động.

Đối với tôi, vấn đề đã được gây ra bởi vì <header>thẻ có margin-top5em và điểm <footer>dưới cùng là 5em. Tôi loại bỏ chúng và thay vào đó đặt một số padding(tương ứng trên và dưới). Tôi không chắc chắn nếu thay thế lề là một giải pháp lý tưởng cho vấn đề, nhưng vấn đề là, nếu các yếu tố đầu tiên và cuối cùng trong bạn <body>có một số lề, bạn có thể muốn xem xét và loại bỏ chúng.

My htmlvà bodytags có các kiểu sau

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

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

— dinika saxena
nguồn

1

Nếu bạn có một đường viền hoặc phần đệm, thì giải pháp

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

Mở rộng đoạn trích

tạo ra kết xuất không hoàn hảo

Để có được nó ngay trong sự hiện diện của một đường viền hoặc phần đệm

sử dụng thay thế

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

Mở rộng đoạn trích

như Martin đã chỉ ra, mặc dù overflow: hiddenkhông cần thiết.

(2018 - đã thử nghiệm với Chrome 69 và IE 11)

— Vrokipal
nguồn

Câu trả lời của bạn chỉ liên quan đến bạn và vì bạn đã thêm đường viền vào bodythẻ. Không có đường viền đó, bodysẽ điền chính xác 100% khung nhìn, bạn có thể thấy điều đó với màu nền chẳng hạn. Câu trả lời đúng cho câu hỏi đó đã được chấp nhận 7 năm trước vẫn còn hiệu lực.

— Niss

-1

Điều này làm việc cho tôi:

<!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>

— Chứng minh
nguồn

Không phải câu hỏi là gì, xin lỗi. Vui mừng bạn tìm thấy một cái gì đó làm việc cho bạn mặc dù.

— Ry-