ทำให้ <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%; }ใช้งานไม่ได้?

— อเล็กซ์

CSS นั้นนำไปใช้กับแท็ก body ใช่ไหม มันทำงานได้ดีสำหรับผมในการขึ้นไปวันที่ Chrome jsfiddle.net/kdjFD/embedded/result คุณกำลังทดสอบเบราว์เซอร์ใด

— LeRoy

4

ไม่มีbody { width: 100%; height: 100%; }ไม่ได้ทำงาน ฉันเดาว่าฉันต้องใช้กับมัน<html>เช่นกัน

— Ry-

อย่าใช้ไวยากรณ์ -webkit- เก่า ใช้ไวยากรณ์ W3C อย่างเป็นทางการ

— Tim Nguyen

@TimNguyen: คำถามนี้ถูกถามเมื่อสามปีก่อนเมื่อไม่มีการสนับสนุนเบราว์เซอร์

— Ry-

201

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

— capdragon
แหล่งที่มา

18

ดูเหมือนว่าทุกอย่างจะเป็นhtml { height: 100%; }จริง

— Ry-

30

ทั้งhtml { height: 100%; }มิได้body { height: 100%; }ก็เพียงพอแล้วสำหรับฉัน (Opera รวมเป็นแบบทดสอบ) สิ่งที่ทำงานที่ดีที่สุดคือการhtml, body { min-height: 100%; }ใช้ความสูงแทนนาทีความสูงซ้ายสีขาวพื้นหลังของฉัน w / o พื้นหลังสีนำไปใช้เมื่อผมขยาย divs พับบางส่วนที่อยู่ตรงกลางของหน้าเว็บ min-heightคงที่

— สตีเฟ่น P

1

เหตุใดปัญหานี้จึงเกิดขึ้นเฉพาะเมื่อใช้

— แบ็ค

@ASEN คุณเคยคิดไหมว่าทำไมถึงเป็นเช่นนั้น?

— ลูกไม้

2

ถ้ามันยังไม่ทำงานสำหรับทุกคนเพียงแค่เปลี่ยนไป100% 100vh

— หลากหลายรูปแบบตั้งแต่

27

บนเว็บไซต์ของเรามีหน้าเว็บที่มีเนื้อหาเป็นแบบคงที่และหน้าเว็บที่โหลดด้วย AJAX ในหน้าเดียว (หน้าค้นหา) มีหลายกรณีที่ผลลัพธ์ AJAX มากกว่าที่จะเติมหน้าและกรณีที่จะไม่มีผลลัพธ์ เพื่อให้ภาพพื้นหลังเติมหน้าในทุกกรณีเราต้องใช้ CSS ต่อไปนี้:

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

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

heightสำหรับhtmlและสำหรับmin-heightbody

— jwatts1980
แหล่งที่มา

1

width: 100%;พวกเขาไม่จำเป็นต้อง

— Ry-

1

เนื่องจากส่วนแสดงผล: บล็อกลักษณะ

— Valen

ก็margin: 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

ฉันต้องใช้ 100% กับทั้ง html และเนื้อหา

— htrufan
แหล่งที่มา

4

ลองใช้หน่วยการวัด viewport (vh, vm) ที่ระดับร่างกาย

html, body {margin: 0; การเติมเต็ม: 0; } เนื้อหา {ความสูงขั้นต่ำ: 100vh; }

ใช้หน่วย vh สำหรับระยะขอบแนวนอนช่องว่างภายในและเส้นขอบบนร่างกายและลบออกจากค่าความสูงขั้นต่ำ

ฉันมีผลลัพธ์ที่แปลกประหลาดโดยใช้หน่วย Vh, vm ในองค์ประกอบภายในร่างกายโดยเฉพาะอย่างยิ่งเมื่อทำการปรับขนาดใหม่

— ไมค์ไรท์
แหล่งที่มา

1

ฉันคิดว่าวิธีที่ถูกต้องส่วนใหญ่คือการตั้งค่า CSS นี้:

html
{
    overflow: hidden;
}

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

html, body
{
    height: 100%;
}

— Martin Wantke
แหล่งที่มา

ส่วนสำคัญของสิ่งนี้เหมือนกับคำตอบที่ได้รับเมื่อหกปีที่แล้วขออภัย

— 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; }

— dinika saxena
แหล่งที่มา

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)

— Vrokipal
แหล่งที่มา

คำตอบของคุณเกี่ยวข้องกับคุณเท่านั้นและเนื่องจากคุณเพิ่มเส้นขอบให้กับ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-