İçeriği olmasa bile bir DIV bloğunu sayfanın altına uzanmaya nasıl zorlayabilirim?

190

Aşağıda gösterilen biçimlendirmede, içerik div'in sayfanın en altına kadar uzanmasını sağlamaya çalışıyorum, ancak yalnızca görüntülenecek içerik varsa uzanıyor. Bunu yapmak istememin nedeni, görüntülenecek içerik olmasa bile dikey kenarlığın sayfada hala görünmesidir.

İşte benim HTML :

<body>
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

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

Ve CSS'm :

body {
    font-family: Trebuchet MS, Verdana, MS Sans Serif;
    font-size:0.9em;
    margin:0;
    padding:0;
}
div#header {
    width: 100%;
    height: 100px;
}
#header a {
    background-position: 100px 30px;
    background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
    height: 80px;
    display: block;
}
#header, #menuwrapper {
    background-repeat: repeat;
    background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
    height:25px;
}
div#menuwrapper {
    width:100%
}
#menu, #content {
    width:1024px;
    margin: 0 auto;
}
div#menu {
    height: 25px;
    background-color:#50657a;
}

css html border

— Ustura
kaynak

Sayfaya sığabilecek daha fazla içerik varsa ne yapmasını istersiniz? Hangi tarayıcıları önemsiyorsunuz?

— drs9222

116

Sorununuz div% 100 yükseklikte değil, etrafındaki kap değil. Bu, kullandığınızdan şüphelendiğim tarayıcıda yardımcı olacaktır:

html,body { height:100%; }

Dolgu ve kenar boşluklarını da ayarlamanız gerekebilir, ancak bu size yolun% 90'ını verecektir.Tüm tarayıcılarla çalışmanız gerekiyorsa, biraz karışıklık yaşamanız gerekir.

Bu sitenin bazı mükemmel örnekleri var:

http://www.brunildo.org/test/html_body_0.html
http://www.brunildo.org/test/html_body_11b.html
http://www.brunildo.org/test/index.html

Ayrıca http://quirksmode.org/ adresine gitmenizi de tavsiye ederim.

— Jason Hernandez
kaynak

47

Bu çözüm, kaydırılan sayfalar için uygun değildir.

— jbranchaud

3

CSS min-height özelliği ona yardım etmelidir ... Sanırım

— Alfabravo

1

İlginçtir ki bu, kaydırma sorunlarına neden olmalarının aksine sıraladı

— Alan Macdonald

Chrome'un son sürümünde benim için çalışmıyor.

— HelloWorldNoMore

49

Sayfanın altına bir altbilgi yapıştırmaktan cehennem olmak yerine, soruyu doğrudan başlıkta cevaplamaya çalışacağım.

Kullanılabilir dikey tarayıcı görünüm penceresini doldurmaya yetecek kadar içerik yoksa div'in sayfanın altına genişlemesini sağlayın:

Şurada demo ( efekti görmek için çerçeve tutamacını sürükleyin): http://jsfiddle.net/NN7ky
(yukarı: temiz, basit. Olumsuz: esnek kutu gerektirir - http://caniuse.com/flexbox )

HTML:

<body>

  <div class=div1>
    div1<br>
    div1<br>
    div1<br>
  </div>

  <div class=div2>
    div2<br>
    div2<br>
    div2<br>
  </div>

</body>

CSS:

* { padding: 0; margin: 0; }

html, body {
  height: 100%;

  display: flex;
  flex-direction: column;
}

body > * {
  flex-shrink: 0;
}

.div1 { background-color: yellow; }

.div2 {
  background-color: orange;
  flex-grow: 1;
}

ta-da - ya da çok uykum var

— Gima
kaynak

14

Bazılarımız sadece "modern" tarayıcıları destekleyecek kadar şanslıyız, bu yüzden bu benim için inanılmaz faydalı oldu. Teşekkürler Gima. Böyle bir şey yapmanın birkaç yolunu denedim ama her zaman çeşitli ince yollarla kırıldı. Bu daha iyi. Hala neden bu şekilde çalıştığını tam olarak anlamıyorum.

— Chris Nicola

1

Flexbox öğesi, içerik alanını içindeki öğeler arasında bölmeye çalışır. Sunduğum çözüm, 1) div'lerin küçülmesini reddediyor ve 2) .div2'nin büyümesini mümkün kılıyor. Bu nedenle div'ler içeriklerini gizlemek için küçülmez ve yalnızca .div2'nin genişlemesine izin verilir.

— Gima

Bu, içeriğin tarayıcı için hala biraz fazla büyük olduğu Firefox'ta yaşadığım sorunu düzeltir. Ne yazık ki, Chrome'da bu tek başına bu sorunu çözmez. Ancak, kenar boşluğunu ve dolguyu 0 olarak ayarlamak da yapar.

— Michael Scheper

başka bir şey ebeveyn kapta varsa% 100 çalışır ve eleman genişleyen yukarıdaki kardeş bilinmeyen yüksekliği varsa kalk gerçekten Helpng değildir: Bu doğru cevap, min-height olduğunu

— zakius

Bu sorunla uğraşan saatler sonra, bu benim için gerçekten düzeltti tek çözümdür. Her parçanın ne yaptığına dair sadece küçük bir açıklama eksik. Neyse, çok teşekkürler @Gima.

— pylund

18

Aşağıdaki css kuralıyla oynamayı deneyin:

#content {
    min-height: 600px;
    height: auto !important;
    height: 600px;
}

Yüksekliği sayfanıza uyacak şekilde değiştirin. tarayıcı uyumluluğu için yükseklikten iki kez bahsedilir.

— Kevin Oku
kaynak

Bu işe yarıyor, ancak min-yüksekliği 600 pikselden daha fazla artırdığımda bir kaydırma oluşturduğunu buldum. Bunun neden olduğu hakkında bir fikriniz var mı?

— Siddharth Patel

1

@SiddharthPatel Çünkü #content div üst öğesinden taşmış. Bu nedenle #content div öğesinin üst öğesini bir taşma olacak şekilde ayarlayın: otomatik veya taşma: gizli css değeri ve kaydırma yerine sığacak şekilde genişlemesi / taşması gerekir. Muhtemelen yorumlar yerine yeni sorular gibi sorular sormak daha iyi olurdu :)

— Colt McCormack

Her yanıtın yöntemini denedikten sonra, çalışan tek yöntem budur. Bu bile mükemmel çalışıyor, çünkü yükseklik değerini sayfanın yüksekliğine uyacak şekilde ayarlamam gerekiyor, bu yüzden ince ayar gerekiyor. Ancak, tüm tarayıcılar için eşit olarak çalışır.

— TARKUS

Bu cevap için çok teşekkür ederim. Basittir ve birden fazla platformda iyi çalışır. Bunu daha önce 1 yıl önce farkına varmadan kullanmıştım, keşke iki kere oy verebilseydim.

— vedi0boy

6

Eğer tür ile Dayanıyorum min-height beyanı

<div style="min-height: 100%">stuff</div>

— Owen
kaynak

4

Ryan Fait'in "Yapışkan Altbilgi" çözümünü deneyin,

http://ryanfait.com/sticky-footer/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

IE, Firefox, Chrome, Safari ve sözde Opera'da çalışır, ancak bunu test etmedi. Harika bir çözüm. Uygulaması çok kolay ve güvenilirdir.

— Anjisan
kaynak

7

Bağlantılar kesildi! Linkler Aşağı!

— codemirror

3

İşte düşmüş dostlarımıza 🍻

— Abraham Brookes

1

LINK

— c24w

3

Min-height özelliği tüm tarayıcılar tarafından desteklenmez. #Content'inizin uzunluğunu daha uzun sayfalara uzatmak için height özelliği kısa keser.

Biraz kesmek ama # içerik bölgenizin içine 1 piksel genişliğinde ve örneğin 1000 piksel yüksekliğinde boş bir div ekleyebilirsiniz. Bu, içeriği en az 1000 piksel yüksekliğe zorlar ve yine de daha uzun içeriğin gerektiğinde yüksekliği genişletmesine izin verir

— Gen
kaynak

3

Saf CSS kadar zarif olmasa da, küçük bir javascript bunu başarmaya yardımcı olabilir:

<html>
<head>
<style type='text/css'>
    div {
        border: 1px solid #000000;
    } 
</style>
<script type='text/javascript'>

    function expandToWindow(element) {
         var margin = 10; 

         if (element.style.height < window.innerHeight) { 
            element.style.height = window.innerHeight - (2 * margin) 
         }
    }


</script>
</head>
<body onload='expandToWindow(document.getElementById("content"));'>
<div id='content'>Hello World</div>
</body>
</html>

— Adam Franco
kaynak

3

Deneyin:

html, body {
    height: 102%;
}
.wrapper {
    position: relative;
    height: 100%;
    width: 100%;
}
.div {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1000px;
    min-height: 100%;
}

Henüz test etmedim ...

— Steph
kaynak

3

Sabit yükseklikte yapışkan altbilgi:

HTML şeması:

<body>
   <div id="wrap">
   </div>
   <div id="footer">
   </div>
</body>

CSS:

html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -60px;
}
#footer {
    height: 60px;
}

— David Horák
kaynak

2

Http://mystrd.at/modern-clean-css-sticky-footer/ adresini deneyin

Yukarıdaki bağlantı kapalı, ancak bu bağlantı https://stackoverflow.com/a/18066619/1944643 tamam. : D

Demo:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="author" content="http://mystrd.at">
    <meta name="robots" content="noindex, nofollow">
    <title>James Dean CSS Sticky Footer</title>
    <style type="text/css">
        html {
            position: relative;
            min-height: 100%;
        }
        body {
            margin: 0 0 100px;
            /* bottom = footer height */
            padding: 25px;
        }
        footer {
            background-color: orange;
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <article>
        <!-- or <div class="container">, etc. -->
        <h1>James Dean CSS Sticky Footer</h1>

        <p>Blah blah blah blah</p>
        <p>More blah blah blah</p>
    </article>
    <footer>
        <h1>Footer Content</h1>
    </footer>
</body>

</html>

— Vinicius José Latorre
kaynak

1

@codemirror teşekkürler, yorumu çalışan başka bir bağlantıyla düzenledim.

— Vinicius José Latorre

1

"Vh" uzunluk birimini, öğenin kendisinin ve üst öğelerinin minimum yükseklik özelliği için kullanabilirsiniz. IE9'dan beri desteklenmektedir:

<body class="full-height">
    <form id="form1">
    <div id="header">
        <a title="Home" href="index.html" />
    </div>

    <div id="menuwrapper">
        <div id="menu">
        </div>
    </div>

    <div id="content" class="full-height">
    </div>
</body>

CSS:

.full-height {
    min-height: 100vh;
    box-sizing: border-box;
}

— Nico
kaynak

Bu, div'i sayfanın kendisine değil, görünüm penceresinin yüksekliğine kadar uzatır.

— jansmolders86

1

Sorun sadece html% 100 dolum yapmak düzeltildi düşünüyorum, vücut html% 100 dolduruyor olabilir ama html ekran% 100 doldurmaz.

Şunu deneyin:

html, body {
      height: 100%;
}

— David Marciel
kaynak

0

Şunu da beğenebilirsin: http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm

İstediğiniz gibi değil, aynı zamanda ihtiyaçlarınıza da uygun olabilir.

— Dan
kaynak

0

Ben kodu yok, ama ben bir kez yükseklik kombinasyonu kullanarak yaptım biliyorum: 1000px ve margin-bottom: -1000px; Bunu dene.

— Alexander Morland
kaynak

Vay canına, bu gerçekten işe yarıyor! Ancak içerik kabı taşarsa, taşan kısmı görmek mümkün değildir ...

— adripanico

0

Düzeninizin nasıl çalıştığına bağlı olarak, <html>öğe üzerinde her zaman en azından görünümün yüksekliği olan arka planı ayarlamaktan kurtulabilirsiniz .

0

Bunu sadece stil sayfaları (CSS) kullanarak yapmak mümkün değildir. Bazı tarayıcılar kabul etmeyecek

height: 100%;

tarayıcı penceresinin bakış açısından daha yüksek bir değer olarak

Javascript, belirtildiği gibi temiz veya güzel bir çözüm olmasa da, en kolay çapraz tarayıcı çözümüdür.

— kırlangıç
kaynak

-2

Bunun en iyi yöntem olmadığını biliyorum, ama üstbilgi, menü vb. Pozisyonlarını bozmadan anlayamadım. Yani ... Bu iki sütun için bir masa kullandım. HIZLI bir düzeltmeydi. JS gerekmez;)

— Wen-D
kaynak

-2

En iyi standartların en iyisi veya en iyi uygulaması değil, ancak bir SPAN için DIV'yi değiştirebilirsiniz ... Bu çok tavsiye edilemez, ancak hızlı bir düzeltme = P =)

— Metafaniel
kaynak