ทำให้เนื้อหามีความสูงของเบราว์เซอร์ 100%

ฉันต้องการทำให้ร่างกายมีความสูงของเบราว์เซอร์ 100% ฉันสามารถใช้ CSS ได้ไหม

ฉันลองตั้งค่าheight: 100%แล้ว แต่ใช้งานไม่ได้

ฉันต้องการตั้งค่าสีพื้นหลังสำหรับหน้าให้เต็มทั้งหน้าต่างเบราว์เซอร์ แต่ถ้าหน้ามีเนื้อหาน้อยฉันจะได้แถบสีขาวน่าเกลียดที่ด้านล่าง

ลองตั้งค่าความสูงขององค์ประกอบ html เป็น 100% เช่นกัน

html, 
body {
    height: 100%;
}

Body มองไปที่พาเรนต์ (HTML) สำหรับวิธีการขยายขนาดคุณสมบัติแบบไดนามิกดังนั้นองค์ประกอบ HTML จำเป็นต้องมีการตั้งค่าความสูงเช่นกัน

อย่างไรก็ตามเนื้อหาของร่างกายอาจจะต้องเปลี่ยนแบบไดนามิก การตั้งค่าความสูงขั้นต่ำเป็น 100% จะทำให้บรรลุเป้าหมายนี้

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

เป็นอีกทางเลือกหนึ่งในการตั้งค่าทั้งความสูงhtmlและbodyองค์ประกอบของ100%คุณสามารถใช้ความยาววิวพอร์ต - เปอร์เซ็นต์

5.1.2 ความยาวเปอร์เซ็นต์ของวิวพอร์ต: หน่วย 'vw', 'vh', 'vmin', 'vmax'

ความยาวร้อยละ viewport มีความสัมพันธ์กับขนาดของบล็อกเริ่มต้นที่มี เมื่อความสูงหรือความกว้างของบล็อกเริ่มต้นที่มีการเปลี่ยนแปลงพวกเขาจะถูกปรับตาม

ในตัวอย่างนี้คุณสามารถใช้ค่า100vh- ซึ่งเป็นความสูงของวิวพอร์ต

ตัวอย่างที่นี่

body {
  height: 100vh;
  padding: 0;
}

body {
  min-height: 100vh;
  padding: 0;
}

นี้ได้รับการสนับสนุนในเบราว์เซอร์ที่ทันสมัยที่สุด - การสนับสนุนสามารถพบได้ที่นี่

หากคุณมีภาพพื้นหลังคุณจะต้องตั้งค่านี้แทน:

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

สิ่งนี้ทำให้มั่นใจได้ว่าแท็กร่างกายของคุณได้รับอนุญาตให้เติบโตอย่างต่อเนื่องเมื่อเนื้อหาสูงกว่าวิวพอร์ตและภาพพื้นหลังยังคงทำซ้ำ / เลื่อน / อะไรก็ตามเมื่อคุณเริ่มเลื่อนลง

โปรดจำไว้ว่าถ้าคุณต้องรองรับ IE6 คุณจะต้องหาวิธีที่จะเข้าสู่height:100%ร่างกายได้ IE6 ปฏิบัติheightเช่นmin-heightนั้น

หากคุณต้องการรักษาระยะขอบของร่างกายและไม่ต้องการแถบเลื่อนให้ใช้ css ต่อไปนี้:

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

การตั้งค่า body {min-height:100%} จะให้แถบเลื่อน

ดูการสาธิตได้ที่http://jsbin.com/aCaDahEK/2/edit?html,output

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

หลังจากทดสอบสถานการณ์ต่าง ๆ ฉันเชื่อว่านี่เป็นทางออกที่ดีที่สุด:

html {
    width: 100%;
    height: 100%;
    display: table;
}

body {
    width: 100%;
    display: table-cell;
}

html, body {
    margin: 0px;
    padding: 0px;
}

เป็นแบบไดนามิกในที่htmlและbodyองค์ประกอบจะขยายโดยอัตโนมัติหากเนื้อหาล้น ฉันทดสอบสิ่งนี้ใน Firefox เวอร์ชันล่าสุด, Chrome และ IE 11

ดูซอเต็มรูปแบบที่นี่ (สำหรับคุณที่เกลียดชังที่โต๊ะคุณสามารถเปลี่ยนให้ใช้ div ได้เสมอ):

https://jsfiddle.net/71yp4rh1/9/

กับที่ถูกกล่าวว่ามีหลายประเด็นที่มีคำตอบที่โพสต์ที่นี่

html, body {
    height: 100%;
}

การใช้ CSS ด้านบนจะทำให้ html และองค์ประกอบร่างกายไม่ขยายโดยอัตโนมัติหากเนื้อหาล้นตามที่แสดงที่นี่:

https://jsfiddle.net/9vyy620m/4/

ในขณะที่คุณเลื่อนสังเกตพื้นหลังซ้ำ สิ่งนี้เกิดขึ้นเนื่องจากความสูงขององค์ประกอบร่างกายไม่ได้เพิ่มขึ้นเนื่องจากโต๊ะลูกล้น เหตุใดมันจึงไม่ขยายเหมือนองค์ประกอบบล็อกอื่น ๆ ฉันไม่แน่ใจ. ฉันคิดว่าเบราว์เซอร์จัดการกับสิ่งนี้ไม่ถูกต้อง

html {
    height: 100%;
}

body {
    min-height: 100%;
}

การตั้งค่าความสูงขั้นต่ำ 100% บนร่างกายดังที่แสดงไว้ด้านบนทำให้เกิดปัญหาอื่น หากคุณทำเช่นนี้คุณไม่สามารถระบุได้ว่าลูก div หรือตารางนั้นมีเปอร์เซ็นต์ความสูงตามที่แสดงที่นี่:

https://jsfiddle.net/aq74v2v7/4/

หวังว่านี่จะช่วยใครซักคน ฉันคิดว่าเบราว์เซอร์จัดการสิ่งนี้ไม่ถูกต้อง ฉันคาดหวังความสูงของร่างกายเพื่อปรับการเติบโตที่ใหญ่ขึ้นโดยอัตโนมัติหากลูกของมันล้น อย่างไรก็ตามดูเหมือนว่าจะไม่เกิดขึ้นเมื่อคุณใช้ความสูง 100% และความกว้าง 100%

สิ่งที่ฉันใช้เมื่อเริ่มต้นทุกไฟล์ CSS ที่ฉันใช้มีดังต่อไปนี้:

html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

ระยะห่างของ 0 ช่วยให้แน่ใจว่าองค์ประกอบ HTML และ BODY ไม่ได้ถูกจัดตำแหน่งอัตโนมัติโดยเบราว์เซอร์เพื่อให้มีพื้นที่บางส่วนทางซ้ายหรือขวาของพวกเขา

การเติมเต็มของ 0 ช่วยให้มั่นใจได้ว่าองค์ประกอบ HTML และ BODY จะไม่ผลักทุกอย่างที่อยู่ข้างในหรือล่างโดยอัตโนมัติเนื่องจากค่าเริ่มต้นของเบราว์เซอร์

ตัวแปรความกว้างและความสูงได้รับการตั้งค่าเป็น 100% เพื่อให้แน่ใจว่าเบราว์เซอร์ไม่ได้ปรับขนาดตามความคาดหมายของการมีมาร์จิ้นอัตโนมัติหรือแพ็ดดิงอัตโนมัติโดยมีการตั้งค่าขั้นต่ำและสูงสุดในกรณีที่ อาจไม่ต้องการพวกเขา

วิธีการแก้ปัญหานี้ก็หมายความว่าเหมือนที่ฉันทำเมื่อฉันเริ่มใช้ HTML และ CSS เป็นครั้งแรกเมื่อหลายปีก่อนคุณไม่จำเป็นต้องให้<div>a ก่อนmargin:-8px;เพื่อให้พอดีกับมุมหน้าต่างเบราว์เซอร์

ก่อนที่ฉันจะโพสต์ฉันดูโครงการ CSS แบบเต็มหน้าจออื่น ๆ ของฉันและพบว่าทั้งหมดที่ฉันใช้มีเพียงbody{margin:0;}และไม่มีอะไรอื่นอีกเลยที่ทำงานได้ดีใน 2 ปีที่ฉันทำงานอยู่

หวังว่าคำตอบโดยละเอียดนี้จะช่วยได้และฉันรู้สึกถึงความเจ็บปวดของคุณ ในสายตาของฉันมันเป็นใบ้ว่าเบราว์เซอร์ควรตั้งขอบเขตที่มองไม่เห็นทางด้านซ้ายและบางครั้งด้านบนขององค์ประกอบร่างกาย / html

การปรับปรุงอย่างรวดเร็ว

html, body{
    min-height:100%;
    overflow:auto;
}

ทางออกที่ดีกว่าด้วย CSS วันนี้

html, body{ 
  min-height: 100vh;
  overflow: auto;
}

ที่นี่:

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}

คุณสามารถใช้ JS ได้ถ้าต้องการ

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}

ลอง

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">

โปรดตรวจสอบสิ่งนี้:

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

หรือลองวิธีการใหม่ความสูงวิวพอร์ต:

html, body { width: 100vw; height: 100vh;}

วิวพอร์ต: หากคุณใช้วิวพอร์ตหมายความว่าเนื้อหาของหน้าจอขนาดใดก็ตาม

หากคุณไม่ต้องการให้งานแก้ไขไฟล์ CSS ของคุณเองและกำหนดกฎความสูงด้วยตัวเองเฟรมเวิร์ก CSS ทั่วไปส่วนใหญ่จะแก้ปัญหานี้ด้วยองค์ประกอบร่างกายที่เติมเต็มทั้งหน้าของหน้าท่ามกลางปัญหาอื่น ๆ ขนาดของวิวพอร์ต

ตัวอย่างเช่นกรอบงานของTacit CSS แก้ปัญหานี้ได้โดยไม่จำเป็นต้องกำหนดกฎและคลาส CSS ใด ๆ และคุณเพียงรวมไฟล์ CSS ใน HTML ของคุณ

html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
}
html body {
    min-height: 100%
}

ใช้งานได้กับเบราว์เซอร์หลักทั้งหมด: FF, Chrome, Opera, IE9 + ทำงานร่วมกับภาพพื้นหลังและการไล่ระดับสี แถบเลื่อนมีให้บริการตามความต้องการของเนื้อหา

ฉันจะใช้สิ่งนี้

html, body{
      background: #E73;
      min-height: 100%;
      min-height: 100vh;
      overflow: auto; // <- this is needed when you resize the screen
    }

<html>
    <body>
    </body>
</html>

เบราว์เซอร์จะใช้งานmin-height: 100vhและหากเบราว์เซอร์นั้นเก่าไปสักหน่อยmin-height: 100%จะเป็นทางเลือก

overflow: autoจำเป็นถ้าคุณต้องการให้ร่างกายและ HTML เพื่อขยายความสูงของพวกเขาเมื่อคุณปรับขนาดหน้าจอ (ขนาดมือถือสำหรับตัวอย่าง)

มี CSS เพียง 1 บรรทัด…คุณสามารถทำสิ่งนี้ได้

body{ height: 100vh; }

คำตอบทั้งหมดถูกต้อง 100% และอธิบายได้ดี แต่ฉันทำสิ่งที่ดีและง่ายมากที่จะตอบสนอง

ที่นี่องค์ประกอบจะใช้ความสูง 100% ของพอร์ตมุมมอง แต่เมื่อพูดถึงมุมมองมือถือจะไม่ได้ดูดีเป็นพิเศษในมุมมองแนวตั้ง (มือถือ) ดังนั้นเมื่อพอร์ตมุมมองที่เล็กลงองค์ประกอบจะยุบและทับซ้อนกัน ดังนั้นเพื่อให้ตอบสนองเพียงเล็กน้อยนี่คือรหัส หวังว่าใครบางคนจะได้รับความช่วยเหลือจากสิ่งนี้

<style>
.img_wrap{
      width:100%;
      background: #777;
}
.img_wrap img{
      display: block;  
      width: 100px;
      height: 100px;
      padding: 50px 0px;
      margin: 0 auto;
}
.img_wrap img:nth-child(2){
      padding-top: 0;
}
</style>

<div class="img_wrap">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>

<script>
   var windowHeight = $(window).height();
   var elementHeight = $('.img_wrap').height();

   if( elementHeight > windowHeight ){
       $('.img_wrap').css({height:elementHeight});
   }else{
       $('.img_wrap').css({height:windowHeight});
   }
</script>

นี่คือการสาธิต JSfiddle

ที่นี่อัพเดท

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}

เกี่ยวกับพื้นที่พิเศษที่ด้านล่าง: หน้าของคุณเป็นแอปพลิเคชัน ASP.NET หรือไม่ ถ้าเป็นเช่นนั้นอาจมีการห่อทุกอย่างในมาร์กอัปของคุณ อย่าลืมใส่สไตล์ในแบบฟอร์มด้วย การเพิ่มoverflow:hidden;แบบฟอร์มอาจลบพื้นที่พิเศษที่ด้านล่าง

@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }

CSS3 มีวิธีการใหม่

 height:100vh

มันทำให้ ViewPort 100% เท่ากับความสูง

ดังนั้นรหัสของคุณควรเป็น

 body{
 height:100vh; 
 }