Sütümümü her zaman sayfanın altına germek için nasıl zorlarım?

İçerik sütununun görünümü, görüntü alanından daha kısa olduğu zaman sayfanın altına genişletmek zorundayım, ancak içerik daha uzun olduğunda da genişler. Sütun sayfanın üst kısmından biraz aşağı doğru gelmelidir. İşte Sütümümü her zaman sayfanın altına germek için nasıl zorlarım?

ben deyimiyle HTML: Burada

<html> 
    <body> 
    <div id="content"> 
     <p> asdf ghjkl </p> 
    </div> 
    </body> 
</html>

CSS olan

#content { 
    min-height: 100%; 
    margin: 100px 0 0; 
}

bu yöntemle sorunu olsa sayfası yüzden min-height: 100%; dikkate dolgu almaz olmasıdır her zaman istediğimden daha büyük.

desiredbehavior

Javascript kullanmadan bunu yapmanın bir yolu var mı:

Bu benim arıyorum davranıştır?

kaynak

2011-09-17 enthdegree

http://nerdhow.net/ adresinde canlı bir örneğim var. # Contentcolumn, '# wrapper' ve' .region-content' yerine '# content'' yazıyor – enthdegree

Ne istediğimi daha iyi göstermek için resim. – enthdegree

Min yüksekliğini kullanmayı düşündünüz mü? Hangi içeriğin içeride olduğuna bakılmaksızın, içerik div'inin minimum yüksekliğini ayarlamanıza olanak tanır. Ardından ihtiyaçlarınıza uyacak şekilde genişler. – Paragon

Bu jsFiddle'u deneyin: http://jsfiddle.net/8R4yN/. İstediğiniz şekilde çalışıyor gibi görünüyor. http://www.tutwow.com/htmlcss/quick-tip-css-100-height/'dan bazı ipuçları aldım. Görünüşe göre overflow gizlemeye neden oluyor ve içeride #content da yardım etmiyor :).

kaynak

2011-09-17 01:48:29

Mutlak konumlandırma sizin için bunu yapabilirsiniz:

İlk senin min-height ve margin ardından CSS Bu kuralı uygulamak kaldırın.

#content { 
    position: absolute; 
    top: 100px; 
    bottom: 0; 
}

kaynak

2011-09-17 02:37:46

Mutlak konumlandırmayı kullanarak ve fazladan bir blok ekleyerek (eğer sütunun altında sağlam bir arka plana ihtiyacınız varsa) bunu gerçekleştirebilirsiniz. Biraz içeriğe sahip olursunuz

Yani, http://jsfiddle.net/kizu/7de7m/
alırsınız Ve içeriğin bir sürü olacaktır, sen alırsınız http://jsfiddle.net/kizu/7de7m/3/

kaynak

2011-09-17 11:11:24 kizu

, bunun yerine belirtilen genişlik ve yükseklik ile kutuyu işleneceğini tarayıcıya zorlayabilir, border-box bunu ayarlayarak box-sizing

kullanın ve sınır ve dolgu ekleyebilirsiniz Kutusunun içinde kutunun içinde.

kaynak

2011-09-17 11:31:16 user123444555621

Teşekkürler! Bunu bilmiyordum ve sorunu çözmeme yardımcı oldu. – enthdegree

Tamam blokları ve kuşlarım, işte bitirdiğim şey. Sorunu doğrudan çözmek yerine, birkaç sabitleyici div ekledim.

Öncelikle, burada birkaç gözlemler şunlardır:

Biz #column uzun görüntü alanından daha olduğunda, #column ihtiyaçları uzunluğu <body> yüksekliğini belirtmek için biliyoruz.
#column, görünümden daha kısa ise, görünümün yüksekliği <body> yüksekliğini belirtmelidir.
Sütunun, içeriği ne kadar olursa olsun, her koşulda sayfanın altına gerilmesi gerekir. Biz height: auto<body> ayarlanmış olduğundan emin olun gereken ilk kriterler için

. Eğer ayarlanmamışsa Height defaluts buna karşılık gelir. Ayrıca #column'un height: auto; ve overflow: hidden; olduğundan emin olmamız gerekir, böylece içeriğinin boyutuna genişler.

İkinci ölçütler için position: absolute; ve min-height: 100%; ayarlarını <body> adresinde ayarlamamız gerekir. Şimdi <body> uzunluğu, #column daha uzun olduğu zaman genişleyecek, ancak görünümden daha kısa gitmeyecek. Bu sonraki kısım, düzeltmenin içeriye girdiği yerdir. Üçüncü ölçüt için hile, bazı ekstra div'ler eklemek ve onlara bazı özel css vermektir. HTML'imde #column'un hemen dışında iki div ekledim. dış div için

<div id="colhack-outer"> 
    <div id="colhack-inner"> 
    </div> 
</div> 
<div id="column"> 
    ... 
</div>

bunu kesinlikle postiion ve alternatif bir kutu modeli kullanmak ve dolgu kullanarak içerik alandır kaydırmaya zorlamak,% 100'e yüksekliği bulunuyor ayarlayın. Tüm sütun stilinizi (arka plan rengi, sınır yarıçapı, gölge vb.) Iç bölüme uygularsınız.

#contentbox { 
    position: relative; 
    padding: <where you want to shift the column to>; 
    width: 50%; 
    color: #EEEEEC; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
}

Canlı örnek burada: http://nerdhow.net/

Ayrıca gerçek içerik konteyner o özel kutu modeli kullanmak yapmak ve çok dolgu ile de yönelmek zorunda

#colhack-outer { 
    height: 100%; 
    padding: <where you want to shift the column to>; 
    position: absolute; 
    width: 50%; 
} 
#colhack-inner { 
    height: 100%; 
    width: 100%; 
    background-color: #303030; 
}

: İşte bunlara uygulanan CSS

Sorularınız varsa veya bir şey açık değilse bir yorum gönderin.

kaynak

2011-09-18 03:24:48 enthdegree

Teşekkürler ... iç div üzerinde arka plan ayarlama sorunu yaşadım – Martin

Sütümümü her zaman sayfanın altına germek için nasıl zorlarım?

cevap

İlgili konular