% 100 Min Yükseklik CSS düzeni

Çok çeşitli tarayıcılarda% 100 minimum yükseklikte bir öğe yapmanın en iyi yolu nedir?

Özellikle sabit headerve işaretli bir düzeniniz varsa ,footerheight

ortadaki içerik kısmını dibe sabit 100%ile aradaki boşluğu nasıl dolduruyorsunuz footer?

Aşağıdakini kullanıyorum: CSS Düzeni -% 100 yükseklik

Minimum yükseklikte

Bu sayfanın #container öğesinin minimum yüksekliği% 100'dür. Bu şekilde, içerik görünüm penceresinin sağladığından daha fazla yükseklik gerektiriyorsa, #content #container'ın yüksekliği de daha uzun olur. #Content öğesindeki olası sütunlar #container'da arka plan görüntüsü ile görselleştirilebilir; div'ler tablo hücreleri değildir ve böyle bir görsel efekt oluşturmak için fiziksel öğelere ihtiyacınız yoktur (veya istemezsiniz). Henüz ikna olmamışsanız; düz çizgiler ve basit renk şemaları yerine titrek çizgiler ve degradeler düşünün.

Göreli konumlandırma

#Container'ın göreceli bir konumu olduğundan #footer her zaman en altta kalır; yukarıda belirtilen minimum yükseklik #container'ın ölçeklenmesini engellemediğinden, #content #container #container öğesini daha uzun olmaya zorlasa bile (veya özellikle de).

Padding-bottom

Artık normal akışta olmadığından, #content öğesinin dolgu tabanı artık mutlak #footer için alan sağlıyor. Bu dolgu varsayılan olarak kaydırılan yüksekliğe dahil edilir, böylece altbilgi asla yukarıdaki içeriğin üzerine gelmez.

Bu düzeni test etmek için metin boyutunu biraz ölçeklendirin veya tarayıcı pencerenizi yeniden boyutlandırın.

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}

Benim için iyi çalışıyor.

Bir yere kilitlenmiş özel bir yükseklik ayarlamak için:

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}

<div id="outerbox">
  <div id="innerbox"></div>
</div>

İşte başka bir çözüm vhveya viewpoint heightdetaylar için CSS birimlerini ziyaret edin . Bunun yerine flex kullanan bu çözüme dayanır .

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    min-height: 100vh;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100vh; /* this helps with the sticky footer */
}
main {
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
	min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
	min-height:2.5em;
}

<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

Birimler vw, vh, vmax, vmin'dir. Temel olarak, her birim görüntü alanı boyutunun% 1'ine eşittir. Bu nedenle, görünüm değiştikçe tarayıcı bu değeri hesaplar ve buna göre ayarlanır.

Daha fazla bilgiyi burada bulabilirsiniz :

özellikle:

1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest

kleolb02'nin cevabı oldukça iyi görünüyor. başka bir yol, yapışkan altbilgi ve minimum yükseklik hackinin bir kombinasyonu olabilir

İçin min-heightdoğru yüzdeleri ile çalışmak için 's ana düğümünü devralma iken min-height, hile ile üst düğüm yüksekliğini ayarlamak olacaktır 1pxve daha sonra çocuğun min-heightdüzgün çalışacaktır.

Deneme sayfası

Saf bir CSSçözüm ( #content { min-height: 100%; }) birçok durumda çalışır, ancak hepsinde işe yaramaz - özellikle IE6 ve IE7.

Ne yazık ki, istenen davranışı elde etmek için bir JavaScript çözümüne başvurmanız gerekecektir. Bu, içeriğiniz için istenen yüksekliği hesaplayıp <div>bir işlevde bir CSS özelliği olarak ayarlayarak yapılabilir:

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

Daha sonra bu işlevi onLoadve onResizeolayları için bir işleyici olarak ayarlayabilirsiniz :

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>

Kenar çubuklarınız varsa üst kapsayıcı% 100 olarak ayarlandığından ve altbilgiyle buluşmak için alanı doldurmalarını istediğinden Levik'i kabul ediyorum. , silme işlevini kullanırken altbilginin aşağı itildiğini gösterir.

Başlığınız 50 piksel yükseklik ve altbilginiz 50 piksel yükseklikse ve içerik kalan alana yalnızca 100 piksel diyorsa ve sayfa kapsayıcısı bu değerin% 100'ü ise yüksekliği 200 piksel olacaktır. Daha sonra kenar çubuğu yüksekliğini% 100 olarak ayarladığınızda, üstbilgi ve altbilgi arasına tam oturması gerekiyorsa bile 200 piksel olur. Bunun yerine, 50px + 200px + 50px olur, böylece kenar çubukları sayfa kabıyla aynı yüksekliğe ayarlandığından sayfa artık 300px olur. Sayfanın içeriğinde büyük bir beyaz boşluk olacaktır.

Internet Explorer 9 kullanıyorum ve bu% 100 yöntemi kullanırken etkisi olarak alıyorum. Diğer tarayıcılarda denemedim ve diğer bazı seçeneklerde çalışabileceğini varsayıyorum. ama evrensel olmayacak.

Önce div'inizden sonra bir divile oluşturmanız ve ardından bunu yapmanız gerekir .id='footer'content

HTML'niz şöyle görünmelidir:

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

Ve CSS:

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}

Bunu dene:

body{ height: 100%; }
#content { 
    min-height: 500px;
    height: 100%;
}
#footer {
    height: 100px;
    clear: both !important;
}

divİçerik div altında eleman olması gerekir clear:both.

Muhtemelen en kısa çözüm (sadece modern tarayıcılarda çalışır)

Bu küçük CSS parçası "the middle content part fill 100% of the space in between with the footer fixed to the bottom":

html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }

tek gereklilik, sabit bir yükseklik altbilgisine sahip olmanızdır.

Örneğin, bu düzen için:

    <html><head></head><body>
      <main> your main content </main>
      </footer> your footer content </footer>
    </body></html>

bu CSS'ye ihtiyacınız var:

    html, body { height: 100%; }
    main { min-height: calc(100% - 2em); }
    footer { height: 2em; }

Bunu deneyebilirsiniz: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/% 100 yükseklik ve yatay merkez.

sadece kullandıklarımı paylaş ve güzel çalışıyor

#content{
        height: auto;
        min-height:350px;
}

Afshin Mehrabani'nin cevabında belirtildiği gibi, vücut ve html'nin yüksekliğini% 100 olarak ayarlamanız gerekir, ancak altbilgiyi oraya getirmek için sargının yüksekliğini hesaplayın:

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}