ทำให้ div เติมความสูงของพื้นที่หน้าจอที่เหลือ

ฉันกำลังทำงานกับเว็บแอปพลิเคชันที่ฉันต้องการให้เนื้อหาเต็มความสูงของหน้าจอ

หน้ามีส่วนหัวซึ่งมีโลโก้และข้อมูลบัญชี นี่อาจเป็นความสูงตามอำเภอใจ ฉันต้องการให้ div เนื้อหาเติมส่วนที่เหลือของหน้าลงไปด้านล่าง

ฉันมีส่วนหัวและเนื้อหาdiv divในขณะนี้ฉันใช้ตารางสำหรับเค้าโครงดังนี้:

CSS และ HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}

<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

ความสูงทั้งหมดของหน้าเต็มและไม่จำเป็นต้องเลื่อน

สำหรับทุกสิ่งที่อยู่ใน div เนื้อหาการตั้งค่าtop: 0;จะทำให้อยู่ใต้ส่วนหัว บางครั้งเนื้อหาจะเป็นตารางจริงโดยมีความสูงตั้งไว้ที่ 100% การวางheaderไว้ด้านในcontentจะไม่ยอมให้สิ่งนี้ทำงานได้

มีวิธีในการบรรลุผลเช่นเดียวกันโดยไม่ใช้tableหรือไม่

ปรับปรุง:

องค์ประกอบภายในเนื้อหาdivจะมีการกำหนดความสูงเป็นเปอร์เซ็นต์เช่นกัน ดังนั้นสิ่งที่อยู่ภายใน 100% divจะเติมลงไปด้านล่าง องค์ประกอบสองอย่างจะเท่ากับ 50%

อัปเดต 2:

ตัวอย่างเช่นหากส่วนหัวใช้ความสูง 20% ของความสูงของหน้าจอตารางที่ระบุไว้ที่ภายใน 50% #contentจะใช้พื้นที่หน้าจอ 40% จนถึงตอนนี้การห่อสิ่งทั้งหมดไว้ในโต๊ะเป็นสิ่งเดียวที่ใช้ได้ผล

อัปเดตปี 2558: วิธีใช้เฟล็กบ็อกซ์

มีสองคำตอบอื่น ๆ ในเวลาสั้น ๆ กล่าวขวัญflexbox ; อย่างไรก็ตามนั่นเป็นเวลามากกว่าสองปีที่ผ่านมาและพวกเขาไม่ได้ให้ตัวอย่างใด ๆ ข้อกำหนดสำหรับ flexbox ได้ตัดสินอย่างแน่นอนแล้ว

หมายเหตุ: แม้ว่าข้อมูลจำเพาะ CSS Flexible Boxes Layout จะอยู่ในขั้นตอนการแนะนำผู้สมัคร แต่เบราว์เซอร์บางตัวก็ไม่ได้ใช้ การติดตั้ง WebKit จะต้องนำหน้าด้วย -webkit-; Internet Explorer ใช้ข้อมูลจำเพาะเวอร์ชั่นเก่านำหน้าด้วย -ms-; Opera 12.10 ใช้สเปครุ่นล่าสุดโดยไม่มีการแก้ไข ดูตารางความเข้ากันได้ของแต่ละคุณสมบัติเพื่อดูสถานะความเข้ากันได้ที่ทันสมัย

(นำมาจากhttps://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes )

เบราว์เซอร์หลักและ IE11 + รองรับ Flexbox สำหรับ IE 10 ขึ้นไปคุณสามารถใช้ FlexieJS shim ได้

หากต้องการตรวจสอบการสนับสนุนในปัจจุบันคุณสามารถดูได้ที่นี่: http://caniuse.com/#feat=flexbox

ตัวอย่างการทำงาน

ด้วย flexbox คุณสามารถสลับระหว่างแถวหรือคอลัมน์ใด ๆ ของคุณได้อย่างง่ายดายไม่ว่าจะเป็นมิติข้อมูลคงที่ขนาดเนื้อหาหรือมิติพื้นที่เหลือ ในตัวอย่างของฉันฉันได้ตั้งส่วนหัวให้ชิดกับเนื้อหา (ตามคำถาม OPs) ฉันได้เพิ่มส่วนท้ายเพื่อแสดงวิธีเพิ่มพื้นที่ที่มีความสูงคงที่จากนั้นตั้งค่าพื้นที่เนื้อหาให้เต็มพื้นที่ที่เหลือ

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

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

ใน CSS ด้านบนคุณสมบัติของเฟล็กซ์จะย่อคุณสมบัติของflex-grow , flex-shrinkและflex-basedเพื่อสร้างความยืดหยุ่นของไอเท็ม flex Mozilla มีการแนะนำโมเดลกล่องแบบยืดหยุ่นที่ดี

ไม่มีวิธีข้ามเบราว์เซอร์เสียงใน CSS จริงๆ สมมติว่าเลย์เอาท์ของคุณมีความซับซ้อนคุณต้องใช้ JavaScript เพื่อตั้งค่าความสูงขององค์ประกอบ สาระสำคัญของสิ่งที่คุณต้องทำคือ:

Element Height = Viewport height - element.offset.top - desired bottom margin

เมื่อคุณได้รับค่านี้และตั้งค่าความสูงขององค์ประกอบแล้วคุณจะต้องแนบตัวจัดการเหตุการณ์กับทั้งหน้าต่าง onload และ onresize เพื่อให้คุณสามารถใช้งานฟังก์ชันปรับขนาดได้

นอกจากนี้สมมติว่าเนื้อหาของคุณอาจใหญ่กว่าวิวพอร์ตคุณจะต้องตั้งค่าโอเวอร์โฟลว์ -y เพื่อเลื่อน

โพสต์เดิมมากกว่า 3 ปีที่ผ่านมา ฉันเดาว่ามีหลายคนที่มาที่โพสต์นี้เหมือนฉันกำลังมองหาโซลูชันเลย์เอาต์แบบแอพพูดส่วนหัวคงส่วนท้ายและเนื้อหาความสูงเต็มหน้าจอที่เหลือ ถ้าเป็นเช่นนั้นโพสต์นี้อาจช่วยได้ทำงานบน IE7 + ฯลฯ

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

และนี่คือตัวอย่างบางส่วนจากโพสต์นั้น:

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}

<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>

แทนที่จะใช้ตารางในมาร์กอัปคุณสามารถใช้ตาราง CSS

มาร์กอัป

<body>    
    <div>hello </div>
    <div>there</div>
</body>

CSS (ที่เกี่ยวข้อง)

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1และ FIDDLE2

ข้อดีของวิธีนี้คือ:

1) มาร์กอัปน้อยลง

2) มาร์กอัปมีความหมายมากกว่าตารางเนื่องจากไม่ใช่ข้อมูลแบบตาราง

3) การสนับสนุนเบราว์เซอร์ดีมาก : IE8 +, เบราว์เซอร์ที่ทันสมัยและอุปกรณ์มือถือทั้งหมด ( caniuse )

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 

CSS เท่านั้นแนวทาง (ถ้าความสูงเป็นที่รู้จัก / คงที่)

เมื่อคุณต้องการให้องค์ประกอบกลางขยายทั่วทั้งหน้าในแนวตั้งคุณสามารถใช้องค์ประกอบcalc()ที่แนะนำใน CSS3

สมมติว่าเรามีความสูง headerและfooterองค์ประกอบคงที่และเราต้องการให้sectionแท็กใช้ความสูงแนวตั้งทั้งหมดที่มีอยู่ ...

การสาธิต

มาร์กอัปที่สันนิษฐานและ CSS ของคุณควรเป็น

html,
body {
  height: 100%;
}

header {
  height: 100px;
  background: grey;
}

section {
  height: calc(100% - (100px + 150px));
  /* Adding 100px of header and 150px of footer */
  background: tomato;
}

footer {
  height: 150px;
  background-color: blue;
}

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

ดังนั้นที่นี่สิ่งที่ฉันทำคือการเพิ่มความสูงขององค์ประกอบและกว่าการหักจากการ100%ใช้calc()ฟังก์ชั่น

เพียงให้แน่ใจว่าคุณใช้height: 100%;สำหรับองค์ประกอบหลัก

ที่ใช้: height: calc(100vh - 110px);

รหัส:

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
  

<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>

วิธีง่ายๆในการใช้ flexbox:

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

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

ตัวอย่าง Codepen

โซลูชันสำรองโดยมี div อยู่กึ่งกลางภายใน div เนื้อหา

วิธีการเกี่ยวกับคุณเพียงแค่ใช้vhซึ่งหมายถึงview heightในCSS ...

ดูตัวอย่างรหัสที่ฉันสร้างให้คุณด้านล่างและเรียกใช้:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}

<div class="full-height">
</div>

ดูภาพด้านล่างที่ฉันสร้างให้คุณดู:

CSS3 วิธีง่ายๆ

height: calc(100% - 10px); // 10px is height of your first div...

เบราว์เซอร์หลักทุกวันนี้รองรับดังนั้นโปรดดำเนินการต่อไปหากคุณไม่ต้องการสนับสนุนเบราว์เซอร์โบราณ

สามารถทำได้อย่างหมดจดโดยCSSใช้vh:

#page {
    display:block; 
    width:100%; 
    height:95vh !important; 
    overflow:hidden;
}

#tdcontent {
    float:left; 
    width:100%; 
    display:block;
}

#content {      
    float:left; 
    width:100%; 
    height:100%; 
    display:block; 
    overflow:scroll;
}

และ HTML

<div id="page">

   <div id="tdcontent"></div>
   <div id="content"></div>

</div>

ฉันจะตรวจสอบว่ามันทำงานได้ในเบราว์เซอร์ที่สำคัญทั้งหมด: Chrome, IEและFireFox

ไม่มีวิธีแก้ไขปัญหาที่โพสต์ทำงานเมื่อคุณต้องการ div ด้านล่างเพื่อเลื่อนเมื่อเนื้อหาสูงเกินไป นี่คือโซลูชันที่ใช้งานได้ในกรณีนี้:

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.container {
  width: 400px;
  height: 300px;
}

.header {
  background: cyan;
}

.body {
  background: yellow;
  height: 100%;
}

.body-content-outer-wrapper {
  height: 100%;
}

.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}

.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

แหล่งต้นฉบับ: การเติมความสูงที่เหลืออยู่ของคอนเทนเนอร์ในขณะที่จัดการกับโอเวอร์โฟลว์ใน CSS

JSFiddle พรีวิวสด

ฉันค้นหาคำตอบสำหรับสิ่งนี้เช่นกัน หากคุณโชคดีพอที่จะสามารถกำหนดเป้าหมาย IE8 ขึ้นไปคุณสามารถใช้display:tableและค่าที่เกี่ยวข้องเพื่อรับกฎการแสดงผลของตารางที่มีองค์ประกอบระดับบล็อกรวมถึง div

หากคุณโชคดีกว่าและผู้ใช้ของคุณกำลังใช้เบราว์เซอร์ระดับบนสุด (ตัวอย่างเช่นหากนี่เป็นแอปอินทราเน็ตบนคอมพิวเตอร์ที่คุณควบคุมเช่นโครงการล่าสุดของฉัน) คุณสามารถใช้เค้าโครงกล่องแบบยืดหยุ่นได้ใน CSS3!

สิ่งที่ใช้ได้ผลสำหรับฉัน (กับ div ภายใน div อื่นและฉันถือว่าในสถานการณ์อื่น ๆ ทั้งหมด) คือการกำหนดช่องว่างภายในด้านล่างเป็น 100% นั่นคือเพิ่มสิ่งนี้ใน css / stylesheet ของคุณ:

padding-bottom: 100%;

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

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

โซลูชันข้างต้นใช้หน่วย viewportและflexboxดังนั้น IE10 + จึงให้คุณใช้ไวยากรณ์เก่าสำหรับ IE10

Codepen ที่จะเล่นกับ: ลิงก์ไปยัง Codepen

หรืออันนี้สำหรับผู้ที่ต้องการภาชนะหลักที่จะเลื่อนในกรณีที่เนื้อหาล้น: ลิงค์ไปยัง codepen

มีคำตอบมากมายในตอนนี้ แต่ฉันพบว่าการใช้height: 100vh;เพื่อทำงานกับองค์ประกอบ div ที่ต้องการเติมเต็มพื้นที่แนวตั้งทั้งหมด

ด้วยวิธีนี้ฉันไม่จำเป็นต้องเล่นกับจอแสดงผลหรือตำแหน่ง สิ่งนี้มีประโยชน์เมื่อใช้ Bootstrap เพื่อทำแดชบอร์ดที่ฉันมีแถบด้านข้างและหลัก ฉันต้องการให้ตัวหลักยืดและเติมเต็มพื้นที่แนวตั้งทั้งหมดเพื่อให้ฉันสามารถใช้สีพื้นหลังได้

div {
    height: 100vh;
}

รองรับ IE9 ขึ้นไป: คลิกเพื่อดูลิงค์

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

ในเบราว์เซอร์ที่มีสติทั้งหมดคุณสามารถใส่ div "header" ไว้ข้างหน้าเนื้อหาในฐานะ sibling และ CSS เดียวกันจะใช้งานได้ อย่างไรก็ตาม IE7- ไม่ตีความความสูงได้อย่างถูกต้องหากการลอยเป็น 100% ในกรณีนั้นดังนั้นส่วนหัวจำเป็นต้องอยู่ในเนื้อหาตามที่กล่าวไว้ข้างต้น การโอเวอร์โฟลว์: อัตโนมัติจะทำให้แถบเลื่อนคู่ใน IE (ซึ่งมักจะมีแถบเลื่อน viewport ที่มองเห็นได้ แต่ถูกปิดใช้งาน) แต่ถ้าไม่มีมันเนื้อหาจะคลิปถ้ามันล้น

ฉันปล้ำกับสิ่งนี้ชั่วระยะเวลาหนึ่งและจบลงด้วยสิ่งต่อไปนี้:

เนื่องจากมันง่ายที่จะทำให้เนื้อหา DIV สูงเหมือนกับผู้ปกครอง แต่ดูเหมือนจะยากที่จะทำให้ความสูงของผู้ปกครองลบความสูงของหัวฉันตัดสินใจที่จะทำให้ div เนื้อหาเต็มความสูง แต่วางไว้ที่มุมซ้ายด้านบนแล้วกำหนดช่องว่างภายใน สำหรับด้านบนที่มีความสูงของส่วนหัว วิธีนี้เนื้อหาจะแสดงอย่างประณีตภายใต้ส่วนหัวและเติมพื้นที่ที่เหลือทั้งหมด:

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}

หากคุณสามารถจัดการกับเบราว์เซอร์เก่าที่ไม่รองรับ (นั่นคือ MSIE 9 หรือเก่ากว่า) คุณสามารถทำได้ด้วยโมดูลกล่องแบบยืดหยุ่นซึ่งเป็น W3C CR อยู่แล้ว โมดูลนั้นอนุญาตให้ใช้เทคนิคที่ดีอื่น ๆ เช่นเนื้อหาการสั่งซื้อซ้ำ

น่าเสียดายที่ MSIE 9 หรือน้อยกว่านั้นไม่รองรับสิ่งนี้และคุณต้องใช้คำนำหน้าผู้ขายสำหรับคุณสมบัติ CSS สำหรับเบราว์เซอร์ทุกตัวที่นอกเหนือจาก Firefox หวังว่าผู้ค้ารายอื่นจะวางคำนำหน้าในไม่ช้าเช่นกัน

อีกตัวเลือกหนึ่งคือCSS Grid Layoutแต่มีการสนับสนุนน้อยลงจากเบราว์เซอร์เวอร์ชันเสถียร ในทางปฏิบัติ MSIE 10 เท่านั้นที่รองรับสิ่งนี้

ปรับปรุงปี 2020 : เบราว์เซอร์ที่ทันสมัยทั้งหมดสนับสนุนทั้งและdisplay: flex display: gridสิ่งเดียวที่ขาดหายไปคือการสนับสนุนsubgridซึ่ง Firefox สนับสนุนเท่านั้น โปรดทราบว่า MSIE ไม่รองรับสเปค แต่ถ้าคุณยินดีที่จะเพิ่มแฮ็ก CSS เฉพาะ MSIE ก็สามารถทำได้ ฉันจะแนะนำเพียงละเว้น MSIE เพราะแม้แต่ Microsoft บอกว่าไม่ควรใช้อีกต่อไป

โซลูชั่น CSS Grid

เพียงกำหนดbodyด้วย with display:gridและ the grid-template-rowsuse autoและfrคุณสมบัติ value

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}

<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

คำแนะนำฉบับสมบูรณ์สำหรับกริด @ CSS-Tricks.com

ทำไมไม่เช่นนี้

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

ให้ html และ body (ตามลำดับ) ความสูงแล้วให้องค์ประกอบของคุณสูงไหม?

ใช้งานได้สำหรับฉัน

คุณสามารถใช้display: tableเพื่อแบ่งพื้นที่ออกเป็นสององค์ประกอบ (ส่วนหัวและเนื้อหา) ซึ่งส่วนหัวสามารถเปลี่ยนแปลงได้ในระดับความสูงและเนื้อหาเติมพื้นที่ที่เหลือ งานนี้มีทั้งหน้าเช่นเดียวกับเมื่อพื้นที่เป็นเพียงเนื้อหาขององค์ประกอบอื่นในตำแหน่งที่มีการpositionตั้งค่าrelative, หรือabsolute fixedมันจะทำงานได้ตราบใดที่องค์ประกอบหลักมีความสูงไม่เป็นศูนย์

ดูซอนี้และรหัสด้านล่าง:

CSS:

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

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

 style="height:100vh"

แก้ไขปัญหาให้ฉัน ในกรณีของฉันฉันใช้สิ่งนี้กับ div ที่จำเป็น

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>

ลองสิ่งนี้

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

ฉันพบวิธีแก้ปัญหาที่ง่ายมากเพราะสำหรับฉันมันเป็นเพียงปัญหาการออกแบบ ฉันต้องการให้ส่วนที่เหลือของหน้าไม่เป็นสีขาวด้านล่างส่วนท้ายสีแดง ดังนั้นฉันจึงตั้งค่าสีพื้นหลังของหน้าเป็นสีแดง และเนื้อหาพื้นหลังเป็นสีขาว เมื่อตั้งค่าความสูงของเนื้อหาเป็นเช่น 20em หรือ 50% หน้าเปล่าเกือบจะไม่ทำให้หน้าแดงทั้งหน้า

ฉันมีปัญหาเดียวกัน แต่ไม่สามารถแก้ปัญหาด้วย flexbox ข้างต้นได้ ดังนั้นฉันจึงสร้างเทมเพลตของตัวเองซึ่งรวมถึง:

• ส่วนหัวที่มีองค์ประกอบขนาดคงที่
• ส่วนท้าย
• แถบด้านข้างพร้อมแถบเลื่อนที่ใช้ความสูงที่เหลืออยู่
• เนื้อหา

ฉันใช้ flexboxes แต่ในวิธีที่ง่ายขึ้นโดยใช้การแสดงคุณสมบัติเท่านั้น: ดิ้นและทิศทางยืดหยุ่น: แถว | คอลัมน์ :

ฉันใช้มุมและฉันต้องการให้ขนาดองค์ประกอบของฉันเป็น 100% ขององค์ประกอบหลักของพวกเขา

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

องค์ประกอบหลักมี 90% ของวิวพอร์ตเนื่องจากส่วนหัวและส่วนท้ายมี 5%

ฉันโพสต์เทมเพลตของฉันที่นี่: https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

Html:

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>

สำหรับแอพมือถือฉันใช้ VH และ VW เท่านั้น

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

การสาธิต - https://jsfiddle.net/u763ck92/

หมุนความคิดของนายเอเลี่ยน ...

ดูเหมือนว่าจะเป็นโซลูชันที่สะอาดกว่าเฟล็กบ็อกซ์ยอดนิยมอันหนึ่งสำหรับเบราว์เซอร์ที่เปิดใช้งาน CSS3

เพียงใช้ความสูงขั้นต่ำ (แทนความสูง) กับ calc () ไปยังบล็อกเนื้อหา

Calc () เริ่มต้นด้วย 100% และลบความสูงของส่วนหัวและส่วนท้าย (ต้องรวมค่า padding)

การใช้ "ความสูงขั้นต่ำ" แทน "ความสูง" มีประโยชน์อย่างยิ่งดังนั้นจึงสามารถทำงานกับเนื้อหาที่แสดงผลแบบจาวาสคริปต์และเฟรมเวิร์ก JS เช่น Angular2 มิเช่นนั้นการคำนวณจะไม่ผลักส่วนท้ายไปที่ด้านล่างของหน้าเมื่อเนื้อหาจาวาสคริปต์ที่มองเห็นได้ปรากฏขึ้น

นี่คือตัวอย่างง่ายๆของส่วนหัวและส่วนท้ายโดยใช้ความสูง 50px และช่องว่างภายใน 20px สำหรับทั้งคู่

Html:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

css:

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

แน่นอนว่าคณิตศาสตร์นั้นง่าย แต่คุณจะได้ความคิด ...

ใน Bootstrap:

รูปแบบ CSS:

html, body {
    height: 100%;
}

1) เพียงแค่เติมความสูงของพื้นที่หน้าจอที่เหลือ:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1>

    <header>Header</header>
    <div>Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

2) เติมความสูงของพื้นที่หน้าจอที่เหลือและปรับเนื้อหาให้อยู่ตรงกลางขององค์ประกอบหลัก:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

นี่เป็นโซลูชันขั้นต่ำของ Pebbl ของฉันเอง ใช้ตลอดไปเพื่อค้นหาเคล็ดลับเพื่อให้ทำงานใน IE11 (ทดสอบใน Chrome, Firefox, Edge และ Safari ด้วย)

<!DOCTYPE html>
<html>
<head>
<style>
html {
    height: 100%;
    }
body {
    height: 100%;
    margin: 0;
    }
section {
    display: flex;
    flex-direction: column;
    height: 100%;
    }
div:first-child {
    background: gold;
    }
div:last-child {
    background: plum;
    flex-grow: 1;
    }
</style>
</head>
<body>
    <section>
      <div>FIT</div>
      <div>GROW</div>
    </section>
</body>
</html>