Pertanyaan Buat div mengisi ketinggian ruang layar yang tersisa


Saat ini saya sedang mengerjakan aplikasi web, di mana saya ingin konten untuk mengisi ketinggian seluruh layar.

Halaman ini memiliki header, yang berisi logo, dan informasi akun. Ini bisa menjadi ketinggian yang sewenang-wenang. Saya ingin div konten untuk mengisi sisa halaman ke bawah.

Saya memiliki sebuah header div dan sebuah konten div. Saat ini saya menggunakan tabel untuk tata letak seperti ini:

CSS dan 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>

Seluruh tinggi halaman diisi, dan tidak perlu menggulir.

Untuk apa pun di dalam div konten, pengaturan top: 0; akan meletakkannya tepat di bawah header. Terkadang kontennya akan menjadi tabel nyata, dengan tingginya ditetapkan menjadi 100%. Puting header dalam content tidak akan memungkinkan ini berfungsi.

Apakah ada cara untuk mencapai efek yang sama tanpa menggunakan table?

Memperbarui:

Elemen di dalam konten div akan memiliki set tinggi untuk persentase juga. Jadi sesuatu yang 100% di dalam div akan mengisinya ke bawah. Seperti akan dua elemen sebesar 50%.

Perbarui 2:

Misalnya, jika header mengambil 20% dari tinggi layar, tabel yang ditentukan di 50% di dalamnya #content akan mengambil 40% dari ruang layar. Sejauh ini, membungkus seluruh benda di atas meja adalah satu-satunya yang berhasil.


1332
2017-09-18 05:06


asal


Jawaban:


Pembaruan 2015: pendekatan flexbox

Ada dua jawaban lain yang disebutkan secara singkat flexbox; Namun, itu lebih dari dua tahun yang lalu, dan mereka tidak memberikan contoh. Spesifikasi untuk flexbox telah benar-benar diselesaikan sekarang.

Catatan: Meskipun spesifikasi Layout Kotak Fleksibel CSS ada pada tahap Rekomendasi Kandidat, tidak semua browser telah mengimplementasikannya. Implementasi WebKit harus diawali dengan -webkit-; Internet Explorer mengimplementasikan versi lama dari spesifikasi, diawali dengan -ms-; Opera 12.10 mengimplementasikan versi terbaru dari spesifikasi, unprefixed. Lihat tabel kompatibilitas pada setiap properti untuk status kompatibilitas terbaru.

(diambil dari https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

Semua browser utama dan IE11 + mendukung Flexbox. Untuk IE 10 atau lebih tua, Anda dapat menggunakan shim FlexieJS.

Untuk memeriksa dukungan saat ini, Anda juga dapat melihat di sini: http://caniuse.com/#feat=flexbox

Contoh kerja

Dengan flexbox Anda dapat dengan mudah beralih antara salah satu baris atau kolom Anda baik memiliki dimensi tetap, dimensi ukuran konten atau dimensi ruang yang tersisa. Dalam contoh saya, saya telah mengatur header untuk snap ke kontennya (sesuai pertanyaan OP), saya telah menambahkan footer untuk menunjukkan bagaimana menambahkan wilayah dengan tinggi tetap dan kemudian mengatur area konten untuk mengisi ruang yang tersisa.

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>

Dalam CSS di atas, melenturkan properti singkatan dari pertumbuhan fleksibel, flex-shrink, dan flex-basis properti untuk menetapkan fleksibilitas dari item flex. Mozilla memiliki pengenalan yang baik untuk model kotak fleksibel.


663
2017-07-27 08:14



Sebenarnya tidak ada cara lintas-browser suara untuk melakukannya dalam CSS. Dengan asumsi tata letak Anda memiliki kompleksitas, Anda perlu menggunakan JavaScript untuk mengatur tinggi elemen. Inti dari apa yang perlu Anda lakukan adalah:

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

Setelah Anda bisa mendapatkan nilai ini dan mengatur tinggi elemen, Anda harus melampirkan pengendali event ke kedua jendela onload dan onresize sehingga Anda dapat mem-burn fungsi resize Anda.

Juga, dengan asumsi konten Anda bisa lebih besar dari viewport, Anda perlu mengatur overflow-y untuk menggulir.


207
2017-09-18 08:16



Posting asli lebih dari 3 tahun yang lalu. Saya kira banyak orang yang datang ke pos ini seperti saya sedang mencari solusi tata letak seperti aplikasi, katakanlah suatu header, footer, dan konten ketinggian tetap dengan mengambil sisa layar. Jika demikian, posting ini dapat membantu, ia berfungsi pada IE7 +, dll.

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

Dan berikut beberapa cuplikan dari postingan itu:

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


153
2017-10-21 15:02



Alih-alih menggunakan tabel dalam markup, Anda bisa menggunakan tabel CSS.

Markup

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

(Relevan) CSS

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

FIDDLE1 dan FIDDLE2

Beberapa keuntungan dari metode ini adalah:

1) Kurang markup

2) Markup lebih semantik dari tabel, karena ini bukan data tabular.

3) Dukungan browser sangat bagus: IE8 +, Semua peramban modern dan perangkat seluler (kaniuse)


Hanya untuk kelengkapan, berikut adalah elemen Html setara dengan sifat css untuk Model tabel CSS

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 } 

134
2018-06-06 11:20



Pendekatan CSS saja (Jika tinggi diketahui / diperbaiki)

Bila Anda ingin elemen tengah menjangkau seluruh laman secara vertikal, Anda dapat menggunakannya calc() yang diperkenalkan di CSS3.

Dengan asumsi kami memiliki ketinggian tetap  header dan footer elemen dan kami menginginkan section tag untuk mengambil seluruh ketinggian vertikal yang tersedia ...

Demo

Markup yang diasumsikan

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

Jadi CSS Anda seharusnya

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

Jadi di sini, apa yang saya lakukan adalah, menambahkan tinggi elemen dan dari yang dikurangi 100% menggunakan calc() fungsi.

Pastikan saja Anda menggunakannya height: 100%; untuk elemen induk.


76
2018-04-27 12:05



Bekas: height: calc(100vh - 110px);

kode:

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


37
2018-05-22 03:20



Itu bisa dilakukan murni oleh CSS menggunakan 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;
}

dan HTML

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

Saya memeriksanya, Ia berfungsi di semua browser utama: Chrome, IE, dan FireFox


24
2017-09-14 21:09



Tidak ada solusi yang dipasang ketika Anda membutuhkan div bawah untuk menggulir ketika konten terlalu tinggi. Berikut ini solusi yang berfungsi dalam kasus itu:

HTML:

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

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

Sumber asli: Mengisi Tinggi Ketinggian dari Wadah Saat Menahan Limpahan dalam CSS

Pratinjau langsung JSFiddle


22
2018-02-20 17:12



Saya sudah mencari jawaban untuk ini juga. Jika Anda cukup beruntung untuk dapat menargetkan IE8 dan lebih tinggi, Anda dapat menggunakannya display:table dan nilai-nilai terkait untuk mendapatkan aturan rendering tabel dengan elemen blok-level termasuk div.

Jika Anda bahkan lebih beruntung dan pengguna Anda menggunakan browser tingkat atas (misalnya, jika ini adalah aplikasi intranet pada komputer yang Anda kontrol, seperti proyek terbaru saya), Anda dapat menggunakan yang baru Layout Kotak Fleksibel di CSS3!


21
2018-04-11 15:48



Apa yang berhasil untuk saya (dengan div dalam div lain dan saya berasumsi dalam semua keadaan lain) adalah mengatur padding bawah menjadi 100%. Yaitu, tambahkan ini ke css / stylesheet Anda:

padding-bottom: 100%;

20
2017-10-17 14:00