it-swarm-tr.com

Bir div'in kalan ekran boşluğunun yüksekliğini doldurmasını sağlayın

İçeriğin tüm ekranın yüksekliğini doldurmasını istediğim bir web uygulaması üzerinde çalışıyorum.

Sayfada logo içeren bir başlık ve hesap bilgileri bulunur. Bu keyfi bir yükseklik olabilir. İçeriğin div'in sayfanın kalanını aşağıya doldurmasını istiyorum.

Bir başlık div ve bir içerik div var. Şu anda mizanpaj için bir tablo kullanıyorum şöyle:

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

Sayfanın tüm yüksekliği doldurulur ve kaydırma gerekmez.

İçerik div içindeki herhangi bir şey için, top: 0; ayarı onu başlığın hemen altına yerleştirir. Bazen içerik% 100 olarak ayarlanmış ve gerçek bir tablo olacaktır. header öğesini content içine koymak bunun çalışmasına izin vermez.

table öğesini kullanmadan aynı etkiyi elde etmenin bir yolu var mı?

Güncelleme:

div içeriğinin içindeki öğelerin de yüzdelere ayarlanmış yükseklikleri olacaktır. Bu yüzden div içindeki% 100 değerinde bir şey, onu dibe dolduracaktır. % 50 oranında iki element olacak.

Güncelleme 2:

Örneğin, başlık ekran yüksekliğinin% 20'sini alırsa, #content içinde% 50 olarak belirtilen bir tablo ekran alanının% 40'ını alır. Şimdiye kadar, her şeyi bir masaya sarmak işe yarayan tek şey.

1574
Vincent McNabb

2015 güncellemesi: flexbox yaklaşımı

Kısaca flexbox ; Ancak, bu iki yıldan daha önceydi ve hiçbir örnek sunmuyorlardı. Flexbox için şartname kesinlikle şimdi çözüldü.

Not: CSS Esnek Kutuları Düzeni özelliği Aday Tavsiye aşamasında olsa da, tüm tarayıcılar uygulamamıştır. WebKit uygulamasına -webkit-; Internet Explorer, -ms- ile eklenmiş özelliklerin eski bir sürümünü uygular; Opera 12.10, tanımlanmamış özelliklerin en son sürümünü uygular. Güncel bir uyumluluk durumu için her özellikteki uyumluluk tablosuna bakın.

( https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes adresinden alınmıştır)

Tüm büyük tarayıcılar ve IE11 +, Flexbox'ı destekler. IE 10 veya daha eski sürümler için FlexieJS shim'i kullanabilirsiniz.

Mevcut desteği kontrol etmek için ayrıca burada da görebilirsiniz: http://caniuse.com/#feat=flexbox

Çalışma örneği

Flexbox ile sabit boyutlara, içerik boyutuna sahip boyutlara veya kalan boşluk boyutlarına sahip herhangi bir satır veya sütun arasında kolayca geçiş yapabilirsiniz. Örneğimde üstbilgiyi içeriğine (OPS sorusuna göre) yapışacak şekilde ayarladım, sabit yükseklikte bir bölgenin nasıl ekleneceğini göstermek için bir altbilgi ekledim ve ardından kalan alanı doldurmak için içerik alanını ayarladım.

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>

Yukarıdaki CSS'de, flex özelliği, flex-grow , flex-shrink ve flex-base özelliklerini oluşturmak için kısaltıyor. esnek öğelerin esnekliği. Mozilla, esnek kutu modeline iyi bir giriş yapmıştır .

856
Pebbl

Gerçekten de CSS'de bunu yapmanın sağlam, tarayıcılar arası bir yolu yok. Mizanpajınızın karmaşıklığı varsayalım, öğenin yüksekliğini ayarlamak için JavaScript kullanmanız gerekir. Yapmanız gereken şeyin özü şudur:

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

Bu değeri elde edip öğenin yüksekliğini ayarladıktan sonra, yeniden boyutlandırma işlevinizi ateşleyebilmeniz için hem pencere aşırı yüklenmesine hem de aşırı yüke olay işleyicileri eklemeniz gerekir.

Ayrıca, içeriğinizin görünüm alanından daha büyük olabileceğini varsayarsak, kaydırmak için taşma y'yi ayarlamanız gerekir.

216
NICCAI

Orijinal yayın 3 yıldan daha önce. Sanırım bu yazıya benim gibi gelen birçok kişi uygulama benzeri bir düzen çözümü arıyor, bir şekilde sabit bir başlık, altbilgi ve dinlenme ekranını alan tam boy içerik diyor. Öyleyse, bu yayın yardımcı olabilir, IE7 + vb.

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

Ve işte bu yazıdan bazı pasajlar:

@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>
160
h--n

Sadece CSS Yaklaşımı (Yükseklik biliniyorsa/sabitse)

Orta öğenin tüm sayfa boyunca dikey olarak yayılmasını istediğinizde, CSS3'te sunulan calc() komutunu kullanabilirsiniz.

Bir sabit yükseklikheader ve footer öğelerimiz olduğunu varsayalım ve section etiketinin tüm dikey yüksekliği almasını istiyoruz ...

Demo

Varsayılan biçimlendirme

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

Yani CSS’niz olmalı

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

Yani burada ne yapıyorum, elemanların yüksekliğini eklemek ve calc() işlevini kullanarak 100% öğesinden düşülmek.

Sadece ana öğeler için height: 100%; kullandığınızdan emin olun.

81
Mr. Alien

Kullanılan: height: calc(100vh - 110px);

kod:

  
.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>
46
nguyên

Peki ya sadeceCSS... içinde view height anlamına gelen vh kullanın.

code snippet 'a senin için yarattığım şeye bak ve çalıştır:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}
<div class="full-height">
</div>

Ayrıca, aşağıda sizin için oluşturduğum resme bakın:

 Make a div fill the height of the remaining screen space

32
Alireza

CSS3 Basit Yol

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

bugünlerde tüm büyük tarayıcılar destekliyor, bu yüzden eski tarayıcıları destekleme gereksiniminiz yoksa devam edin.

30
dev.meghraj

Tamamen CSS kullanılarak vh kullanılarak yapılabilir:

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

ve HTML

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

Kontrol ettim, Tüm büyük tarayıcılarda çalışır: Chrome, IE ve FireFox

26
Ormoz

Yayınlanan çözümlerin hiçbiri, içerik çok uzun olduğunda kaydırma yapmak için alt div'e ihtiyacınız olduğunda işe yaramaz. İşte bu durumda çalışan bir çözüm:

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

Orijinal kaynak: CSS'de Taşma İşlemi Sırasında Konteynırın Kalan Yüksekliğini Doldurma

JSFiddle canlı önizlemesi

25
John Kurlak

Flexbox kullanarak basit bir çözüm:

html,
body {
  height: 100%;
}

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

.content {
  flex-grow: 1;
}
<body>
  <div>header</div>
  <div class="content"></div>
</body>

Codepen örneği

Alternatif bir çözüm, div içeriğinde ortalanmış bir div ile

23
zok

Bunun için de bir cevap arıyorum. IE8 ve üstünü hedefleyebilecek kadar şanslıysanız, div dahil blok düzeyindeki öğelerin tablo oluşturma kurallarını elde etmek için display:table ve ilgili değerleri kullanabilirsiniz.

Daha şanslıysanız ve kullanıcılarınız en üst düzey tarayıcıları kullanıyorsa (örneğin, bu kontrol ettiğim bilgisayarlarda bir intranet uygulamasıysa, en son projem gibi), new Esnek Kutu Düzeni CSS3'te!

22
Chris

Benim için işe yarayan şey (başka bir div içindeki bir div ile ve diğer tüm koşullarda varsayacağım) alt dolguyu% 100 olarak ayarlamak. Yani, bunu css/stil sayfanıza ekleyin:

padding-bottom: 100%;

Feragatname: Kabul edilen cevap çözüm fikrini verir, ancak gereksiz bir sarıcı ve css kuralları ile biraz şişirilmiş buluyorum. Aşağıda çok az css kuralı olan bir çözüm var.

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 */
}

Yukarıdaki çözüm, viewport birimleri ve flexbox kullanmaktadır ve bu nedenle IE10 +, IE10 için eski sözdizimini kullanmanızı sağlar.

Ile oynamak için Codepen: codepen 'e link

Ya da bu, ana kabı isteyenler için taşan içerik durumunda kaydırılabilir olmaları için: codepen bağlantısı

14
<!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>

Tüm aklı başında tarayıcılarda, "header" div'i bir kardeş olarak içeriğin önüne koyabilirsiniz ve aynı CSS çalışacaktır. Bununla birlikte, IE7- bu durumda kayan nokta% 100 ise, yüksekliği doğru şekilde yorumlamaz, bu yüzden üstbilginin içeriğin de yukarıda olduğu gibi olması gerekir. Taşma: otomatik, IE üzerinde çift kaydırma çubuklarına neden olur (görünüm penceresi kaydırma çubuğunu her zaman görünür, ancak devre dışı bırakılır), ancak onsuz, taşması durumunda içerik kırpılır.

12
Jerph

Bir süreliğine bununla çıldırdım ve aşağıdakilerle bitti:

İçeriğin DIV'yi ebeveynle aynı yükseklikte yapması kolay olduğundan, ancak ana yüksekliği eksi başlık yüksekliğinde yapmak zor gibi görünmektedir. İçeriği div tam olarak yapmaya karar verdim, ancak bunu kesinlikle sol üst köşeye yerleştirip bir dolgu maddesi tanımladım. başlığın yüksekliğine sahip olan üst için. Bu şekilde içerik başlığın altında düzgün bir şekilde görüntülenir ve kalan tüm alanı doldurur:

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%;
}
10
B_G

Eski tarayıcıları desteklememekle başa çıkabiliyorsanız (yani, MSIE 9 veya daha üstü), Esnek Kutu Düzeni Modülü ile zaten W3C CR olan bunu yapabilirsiniz. Bu modül, içeriği yeniden sipariş etmek gibi diğer Nice numaralarına da izin verir.

Ne yazık ki, MSIE 9 veya daha küçük bir sürümü bunu desteklememektedir ve Firefox dışındaki her tarayıcı için CSS özelliği için satıcı öneki kullanmanız gerekir. Umarım diğer satıcılar da yakında ön eki bırakırlar.

Başka bir seçenek de CSS Grid Layout olacaktır ancak bu, tarayıcıların kararlı sürümlerinden daha az desteği vardır. Uygulamada, sadece MSIE 10 bunu desteklemektedir.

10

Şimdi bir sürü cevap var, ancak mevcut tüm dikey alanı doldurması gereken div elemanı üzerinde çalışmak için height: 100vh; kullanıyorum.

Bu şekilde ekran veya konumlandırma ile oynamama gerek yok. Bu, bir kenar çubuğuna ve bir anaya sahip olduğum bir gösterge panosunu yapmak için Bootstrap kullanırken kullanışlı oldu. Arka plan rengini uygulayabilmek için ana bölümün tüm dikey alanı genişletmesini ve doldurmasını istedim.

div {
    height: 100vh;
}

IE9 ve üstünü destekler: bağlantıyı görmek için tıklayın

10
Puiu

Neden sadece böyle değil?

html, body {
    height: 100%;
}

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

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

Size html ve beden (bu sırayla) bir yükseklik vermek ve sonra sadece elementlerinize bir yükseklik vermek mi?

Benim için çalışıyor

9
Thaoms
 style="height:100vh"

sorunu benim için çözdü. Benim durumumda bunu gerekli div'e uyguladım.

7
Zohab Ali

CSS Izgara Çözümü

body ve display:grid ve grid-template-rows ile auto ve fr value özelliğini kullanarak tanımlamanız yeterli.

* {
  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>

Izgaralar İçin Komple Bir Kılavuz @ CSS-Tricks.com

6
Paulie_D

Alanı, iki başlığa bölmek için display: table komutunu kullanabilirsiniz (üstbilgi ve içerik), üstbilginin yüksekliği değişebilir ve içerik kalan alanı doldurur. Bu, tüm sayfa ile birlikte, alanın position __ relative, absolute veya fixed olarak ayarlanan başka bir öğenin içeriği olduğu zaman olduğu gibi çalışır. Bu sürece üst öğe sıfırdan farklı yüksekliğe sahip olarak çalışacaktır.

Bu kemanı görün ve ayrıca aşağıdaki kodu:

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>
5
Amiramix

Vincent, yeni gereksinimlerini kullanarak tekrar cevaplayacağım. İçeriğin çok uzun olması durumunda gizlenmesini önemsemediğiniz için, başlığı kaydırmanız gerekmez. Sadece html ve body etiketlerinin üzerine gizlenmiş bir taşma koyun ve #content yüksekliğini% 100 olarak ayarlayın. İçerik, başlığın yüksekliğine göre her zaman görünüm alanından daha uzun olur, ancak gizlenir ve kaydırma çubuklarına neden olmaz.

<!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>
5
Jerph

Bunu dene

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

Oldukça basit bir çözüm buldum, çünkü benim için sadece bir tasarım sorunuydu. Sayfanın geri kalanının kırmızı altlığın altında beyaz olmamasını istedim. Böylece sayfaların arka plan rengini kırmızı olarak ayarlarım. Ve içeriği arka plan rengini beyazdır. İçerik yüksekliği örn. 20em veya% 50 neredeyse boş bir sayfa tüm sayfayı kırmızı bırakmaz.

3
htho

Mobil uygulama için sadece VH ve VW kullanıyorum

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

Demo - https://jsfiddle.net/u763ck92/

3
grinmax

Bay Alien fikrinden kurtulmak ...

Bu, CSS3 özellikli tarayıcılar için kullanılan popüler esnek kutudan daha temiz bir çözüm gibi görünüyor.

İçerik bloğuna calc () ile min-yükseklik (yükseklik yerine) kullanın.

Calc ()% 100 ile başlar ve üstbilgi ve altbilgilerin yüksekliğini çıkarır (dolgu değerlerini içermesi gerekir)

"Height" yerine "min-height" kullanımı özellikle kullanışlıdır, böylece javascript ile işlenmiş içerik ve Angular2 gibi JS çerçeveleriyle çalışabilir. Aksi takdirde, javascript oluşturulmuş içerik göründüğünde hesaplama altbilgiyi sayfanın altına doğru itmez.

Her ikisi için de 50px yükseklik ve 20px dolgu kullanan basit bir başlık ve altbilgi örneği.

Html:

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

Css:

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

Tabii ki, matematik basitleştirilebilir ama fikir olsun ...

2
Pat M

Ben de aynı problemi yaşadım ancak yukarıdaki flexbox'larla çözümü çözemedim. Böylece kendi şablonumu yarattım, bunlar:

  • sabit boyutlu elemanlı bir başlık
  • bir altbilgi
  • kalan yüksekliği kaplayan kaydırma çubuklu bir yan çubuk
  • içerik

Esnek kutuları kullandım ancak daha basit bir şekilde, yalnızca display: flex ve flex-direction: row | column özelliklerini kullanarak kullandım.

Açısal kullanıyorum ve bileşen boyutlarımın ana öğelerinin% 100 olmasını istiyorum.

Anahtar, tüm ebeveynlerin boyutlarını sınırlandırmak amacıyla boyutunu (yüzde olarak) belirlemektir. Aşağıdaki örnekte, myapp yüksekliği vizörün% 100'üne sahiptir.

Ana bileşen, görünümün% 90'ına sahiptir çünkü üst ve alt bilgiler% 5'tir.

Şablonumu buraya gönderdim: 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>
2

Javascript kullanarak daha iyi, remining ekran boşluğunu dinamik hesaplar.

Aşağıdaki gibi lib CSS-IN-JS teknolojisini kullanabilirsiniz:

https://github.com/cssobj/cssobj

DEMO: https://cssobj.github.io/cssobj-demo/

0
James Yang