องค์ประกอบ html สามารถเติมเต็ม 100% ของความสูงหน้าจอที่เหลือโดยใช้ css ได้อย่างไร

119

ฉันมีองค์ประกอบส่วนหัวและองค์ประกอบเนื้อหา:

#header
#content

overflow-y: scroll;ฉันต้องการส่วนหัวจะเป็นของความสูงคงที่และเนื้อหาที่จะเติมทุกความสูงที่เหลือที่มีอยู่บนหน้าจอด้วย

เป็นไปได้โดยไม่ต้องใช้ Javascript?

html css

— ก่อกวน
แหล่งที่มา

83

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

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">
        </div>
    </body>
</html>

html, body
{
    height: 100%;
}
#Header
{
    width: 960px;
    height: 150px;
}
#Content
{
    height: 100%;
    width: 960px;
}

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

1

ฉันลองวิธีแก้ปัญหาทั้งหมดแล้ว แต่เพียงวิธีนี้ช่วยแก้ปัญหาของฉันได้

— Alex

1

@Alex หากสิ่งนี้ใช้ได้กับเบราว์เซอร์ทั้งหมดที่คุณกำหนดเป้าหมายให้ดำเนินการต่อไป ความต้องการของทุกคนแตกต่างกัน

— BentOnCoding

323

ลืมคำตอบทั้งหมด CSS บรรทัดนี้ใช้ได้กับฉันใน 2 วินาที:

height:100vh;

1vh = 1% ของความสูงของหน้าจอเบราว์เซอร์

แหล่ง

สำหรับการปรับขนาดเค้าโครงที่ตอบสนองคุณอาจต้องการใช้:

min-height: 100vh

[อัปเดตพฤศจิกายน 2018] ตามที่ระบุไว้ในความคิดเห็นการใช้ความสูงต่ำสุดอาจหลีกเลี่ยงปัญหาในการออกแบบที่ไม่เหมาะสม

[อัปเดตเมษายน 2018]ตามที่กล่าวไว้ในความคิดเห็นย้อนกลับไปในปี 2011 เมื่อมีการถามคำถามเบราว์เซอร์บางตัวไม่รองรับหน่วยวิวพอร์ต คำตอบอื่น ๆ คือวิธีแก้ปัญหาในตอนนั้น - vmaxยังไม่รองรับใน IE ดังนั้นนี่อาจไม่ใช่ทางออกที่ดีที่สุดสำหรับทุกคน

— เซบาสเตียนเอช.
แหล่งที่มา

9

นี่เป็นคำตอบที่ง่ายที่สุดเนื่องจากคุณไม่จำเป็นต้องตั้งค่าความสูงขององค์ประกอบหลักทั้งหมดเป็น 100% นี่คือการสนับสนุนปัจจุบันสำหรับ vh - caniuse.com/#feat=viewport-units - ดูเหมือนว่า iOS อาจต้องมีวิธีแก้ปัญหาชั่วคราวเนื่องจาก "vh บน iOS มีรายงานว่ารวมความสูงของแถบเครื่องมือด้านล่างในการคำนวณความสูง"

— Brian Burns

2

ว้าวยินดีหา! มองคนเหล่านี้ด้วยคำตอบที่ซับซ้อนเกินไป

— NoName

8

เมื่อคำถามถูกถามในปี 2011 ไม่มีเบราว์เซอร์หลักใดที่รองรับหน่วยวิวพอร์ต "คำตอบที่ซับซ้อนเกินไป" เหล่านี้เป็นตัวเลือกเดียวในตอนนั้น

— JJJ

6

ข้อเสนอแนะเล็กน้อยว่าmin-height: 100vhจะดีกว่ามาก มันจะปรับขนาดสำหรับการออกแบบที่ตอบสนองเช่นกัน

— วิกกี้อ

3

สิ่งนี้ไม่ได้ตอบคำถามที่ถามซึ่งจะใช้เวลาถึง 100% ของวิวพอร์ต เขาไม่ต้องการสิ่งนี้เพราะส่วนหัวของเขาจะใช้ x% ของวิวพอร์ตเนื่องจากคำตอบอื่น ๆ นั้นถูกต้อง

— 4cody

35

แนวทางที่ดีที่สุดคือ:

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

สิ่งนี้ช่วยแก้ปัญหาทุกอย่างสำหรับฉันและช่วยให้ฉันควบคุมส่วนท้ายของฉันได้และสามารถมีส่วนท้ายคงที่ได้ไม่ว่าจะเลื่อนหน้าลง

โซลูชันทางเทคนิค - แก้ไข

ในอดีต "ความสูง" เป็นสิ่งที่ยุ่งยากในการขึ้นรูปเมื่อเทียบกับ "ความกว้าง" ซึ่งเป็นวิธีที่ง่ายที่สุด เนื่องจาก css มุ่งเน้นไปที่<body>การจัดแต่งทรงผมในการทำงาน รหัสด้านบน - เราให้<html>และ<body>ความสูง นี่คือจุดที่มายากลเข้ามาในภาพ - เนื่องจากเรามี 'ความสูงต่ำสุด' บนโต๊ะเล่นเราจึงบอกว่าเบราว์เซอร์นั้น<body>เหนือกว่า<html>เพราะ<body>มีความสูงต่ำสุด ในทางกลับกันอนุญาตให้<body>ลบล้างได้<html>เนื่องจาก<html>มีความสูงก่อนหน้านี้แล้ว กล่าวอีกนัยหนึ่งคือเรากำลังหลอกล่อให้เบราว์เซอร์ "ชน" <html>ออกจากโต๊ะดังนั้นเราจึงสามารถจัดสไตล์ได้อย่างอิสระ

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

1

โอ้พระเจ้ามันเป็นปาฏิหาริย์!

— Geoff

เหมือนปาฏิหาริย์ได้ผล! แต่โปรด: ทำไมmin-heightและheight?

— Joy

1

@ShaojiangCai - ในอดีต 'ความสูง' เป็นสิ่งที่ยุ่งยากในการขึ้นรูปเมื่อเทียบกับ 'ความกว้าง' ซึ่งง่ายที่สุด เนื่องจาก css มุ่งเน้นไปที่<body>การจัดแต่งทรงผมให้ทำงาน รหัสนี้: เราให้<html>และ<body>ความสูง นี่คือจุดที่เวทมนตร์เข้ามาในภาพ - เนื่องจากเรามี 'ความสูงต่ำสุด' บนโต๊ะเล่นเราจึงบอกเซิร์ฟเวอร์ที่<body>เหนือกว่า<html>เพราะ<body>มีความสูงต่ำสุด ในทางกลับกันอนุญาตให้<body>ลบล้างได้<html>เนื่องจาก<html>มีความสูงก่อนหน้านี้แล้ว กล่าวอีกนัยหนึ่งคือเรากำลังหลอกล่อเซิร์ฟเวอร์ให้ "ชน" <html>ออกจากโต๊ะดังนั้นเราจึงสามารถจัดสไตล์ได้อย่างอิสระ

— Faron

2

@Faron ดูเหมือนว่า 'เบราว์เซอร์' จะเป็นตัวเลือกคำที่ดีกว่าที่นี่แทนที่จะเป็น 'เซิร์ฟเวอร์' ;)

— 58

@EunLeem ... ฉันเห็นด้วยกับคุณว่าฉันจะเลือกใช้ถ้อยคำที่เหมาะสมเพื่อจัดการกับเรื่องนี้ได้อย่างไร ขอบคุณสำหรับเคล็ดลับ "ข้อศอกชน" อัปเดตคำตอบของฉันตามนั้น

— Faron

14

คุณสามารถใช้ vh กับคุณสมบัติ min-height

min-height: 100vh;

คุณสามารถทำได้ดังนี้ขึ้นอยู่กับว่าคุณใช้ระยะขอบอย่างไร ...

min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element

— Almeida Cavalcante
แหล่งที่มา

10

โซลูชันที่ยอมรับจะใช้ไม่ได้จริง คุณจะสังเกตเห็นว่าเนื้อหาdivจะเท่ากับความสูงของระดับบนbodyสุด ดังนั้นการตั้งค่าbodyความสูงเป็น100%จะกำหนดให้เท่ากับความสูงของหน้าต่างเบราว์เซอร์ สมมติว่าหน้าต่างเบราว์เซอร์ได้768pxในความสูงโดยการตั้งค่าเนื้อหาdivความสูง100%ที่div's 768pxความสูงจะเปลี่ยนเป็น ดังนั้นคุณจะจบลงด้วยการเป็นส่วนหัว div 150pxและ div 768pxเป็นเนื้อหา ในตอนท้ายคุณจะมีเนื้อหา150pxที่ด้านล่างของหน้า สำหรับวิธีแก้ปัญหาอื่นโปรดดูที่ลิงค์นี้

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

8

ด้วย HTML5 คุณสามารถทำได้:

CSS:

body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}

HTML:

<header>blabablalba </header>
<section> Content </section>

— มิเกล
แหล่งที่มา

ระวังการใช้การคำนวณกับเปอร์เซ็นต์ความสูง Firefox จะทำงานไม่ถูกต้องเว้นแต่ผู้ปกครองทุกคนจะมีความสูงที่กำหนดไว้

— TomDK

4

สำหรับฉันสิ่งต่อไปทำงานได้ดี:

ฉันรวมส่วนหัวและเนื้อหาไว้ใน div

<div class="main-wrapper">
    <div class="header">

    </div>
    <div class="content">

    </div>
</div>

ฉันใช้การอ้างอิงนี้เพื่อเติมความสูงด้วย flexbox CSS จะเป็นดังนี้:

.main-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.header {
    flex: 1;
}
.content {
    flex: 1;
}

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเทคนิค flexbox โปรดไปที่ข้อมูลอ้างอิง

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

1

display: inlineนอกจากนี้คุณยังสามารถตั้งค่าแม่เพื่อ ดูhttp://codepen.io/tommymarshall/pen/cECyH

อย่าลืมตั้งค่าความสูงของ html และ body เป็น 100% ด้วย

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

คำตอบแบบลิงก์เท่านั้นไม่สนับสนุน โปรดพยายามสรุปเนื้อหาลิงก์ในคำตอบของคุณ

— ผู้ใช้ที่ไม่ใช่ผู้ใช้

1

คำตอบที่ยอมรับใช้ไม่ได้ และคำตอบที่ได้รับการโหวตสูงสุดไม่ตอบคำถามที่แท้จริง ด้วยส่วนหัวความสูงพิกเซลคงที่และฟิลเลอร์ในการแสดงผลที่เหลือของเบราว์เซอร์และเลื่อนสำหรับ owerflow นี่คือวิธีแก้ปัญหาที่ใช้งานได้จริงโดยใช้การกำหนดตำแหน่งที่แน่นอน ฉันยังคิดว่าความสูงของส่วนหัวนั้นเป็นที่รู้จักด้วยเสียงของ "ส่วนหัวคงที่" ในคำถาม ฉันใช้ 150px เป็นตัวอย่างที่นี่:

HTML:

<html>
    <body>
        <div id="Header">
        </div>
        <div id="Content">      
        </div>
    </body>
</html>

CSS: (การเพิ่มสีพื้นหลังสำหรับเอฟเฟกต์ภาพเท่านั้น)

#Header
{
    height: 150px;
    width: 100%;
    background-color: #ddd;
}
#Content
{
   position: absolute;
   width: 100%;
   top: 150px;
   bottom: 0;
   background-color: #aaa;
   overflow-y: scroll;
}

สำหรับรายละเอียดเพิ่มเติมว่ามันทำงานอย่างไรพร้อมเนื้อหาจริงภายใน#Contentโปรดดูที่jsfiddleนี้โดยใช้แถวและคอลัมน์ bootstrap

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

"ส่วนหัวความสูงพิกเซลคงที่" -> เท่านี้! bottomคุณสมบัติทำให้แน่ใจว่า#Contentการเข้าพักที่ติดอยู่ที่ปลายสุดของหน้า ขอขอบคุณที่สละเวลาอธิบาย

— Armfoot

1

และฉันมีความสุขที่ได้ช่วยเหลือใครบางคน;)

— jumps4fun

1

ในกรณีนี้ฉันต้องการให้ div เนื้อหาหลักของฉันมีความสูงเป็นของเหลวเพื่อให้ทั้งหน้าใช้ความสูง 100% ของเบราว์เซอร์

height: 100vh;

— Fezal halai
แหล่งที่มา

1

โปรดให้ฉันเพิ่ม 5 เซ็นต์ของฉันที่นี่และเสนอวิธีแก้ปัญหาแบบคลาสสิก:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>

ขยายข้อมูลโค้ด

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

บันทึก:

องค์ประกอบที่มีสีพื้นหลังต่างกันสามารถบังกันได้ ที่นี่ฉันใช้เส้นขอบทึบเพื่อให้แน่ใจว่าองค์ประกอบถูกวางอย่างถูกต้อง
idHeader.heightและได้idContent.topรับการปรับให้รวมเส้นขอบและควรมีค่าเท่ากันหากไม่ได้ใช้เส้นขอบ มิฉะนั้นองค์ประกอบจะดึงออกจากวิวพอร์ตเนื่องจากความกว้างที่คำนวณได้ไม่รวมขอบระยะขอบและ / หรือช่องว่างภายใน
left:0; right:0;สามารถแทนที่ได้ด้วยwidth:100%เหตุผลเดียวกันหากไม่มีการใช้เส้นขอบ
การทดสอบในหน้าแยก (ไม่ใช่ส่วนย่อย) ไม่จำเป็นต้องมีการปรับ html / body
ใน IE6 และเวอร์ชันก่อนหน้าเราต้องเพิ่มpadding-topและ / หรือ padding-bottomแอตทริบิวต์ให้กับ#idOuterองค์ประกอบ

เพื่อให้คำตอบของฉันสมบูรณ์นี่คือเค้าโครงส่วนท้าย:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idContent" style="bottom:36px; top:0;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

ขยายข้อมูลโค้ด

และนี่คือเค้าโครงที่มีทั้งส่วนหัวและส่วนท้าย:

html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}

<div id="idOuter">
  <div id="idHeader" style="height:30px; top:0;">Header section</div>
  <div id="idContent" style="top:36px; bottom:36px;">Content section</div>
  <div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>

ขยายข้อมูลโค้ด

— Dmitry Babich
แหล่งที่มา

0

ถ้าคุณไม่จำเป็นต้องรองรับ IE 9 และต่ำกว่าฉันจะใช้ flexbox

body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }

คุณต้องได้รับร่างกายเพื่อเติมเต็มทั้งหน้า

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

— เจมส์แลมเบิร์ต
แหล่งที่มา

0

CSS PLaY | ข้ามเบราว์เซอร์คงที่ส่วนหัว / ส่วนท้าย / เค้าโครงคอลัมน์เดียวที่อยู่ตรงกลาง

CSS Frames เวอร์ชัน 2: ตัวอย่างที่ 2 ระบุความกว้าง | 456 ถนน Berea

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

— โจ
แหล่งที่มา

คำตอบแบบลิงก์เท่านั้นไม่สนับสนุน ลองใส่รหัสในคำตอบของคุณ

— ผู้ใช้ที่ไม่ได้เป็นผู้ใช้

0

#Header
{
width: 960px;
height: 150px;
}

#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}

— จาซิบข่าน
แหล่งที่มา

-1

ทางออกที่ดีที่สุดที่ฉันพบคือการตั้งค่าองค์ประกอบส่วนท้ายที่ด้านล่างของหน้าจากนั้นประเมินความแตกต่างของออฟเซ็ตของส่วนท้ายและองค์ประกอบที่เราต้องการขยาย เช่น

ไฟล์ html

<div id="contents"></div>
<div id="footer"></div>

ไฟล์ css

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

ไฟล์ js (โดยใช้ jquery)

var contents = $('#contents'); 
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');

คุณอาจต้องการอัปเดตความสูงขององค์ประกอบเนื้อหาในการปรับขนาดหน้าต่างแต่ละครั้งดังนั้น ...

$(window).on('resize', function() {
  contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});

— Αλέκος
แหล่งที่มา

-1

ง่ายมาก:

#content {
    max-height: 100%;
}

— มาซูด
แหล่งที่มา

-3

คุณเคยลองอะไรแบบนี้ไหม?

CSS:

.content {
    height: 100%;
    display: block;
}

HTML:

<div class=".content">
<!-- Content goes here -->
</div>

— Rahul Choudhary
แหล่งที่มา