Birden Fazla Kaydırma Kolunu Kullanmanın En İyi Yolu

Question

Dört kolonlu değişken yükseklik içeriğine sahip bir gövdenin üzerinde görsel olarak bir başlık içeren bir web uygulaması geliştirme sürecindeyim. Tasarım tanrıları, sabit bir yüksekliğe sahip olmasını, özellikle de her bir kolonun potansiyel olarak çok uzun sürebildiği ve böylece (tasarımcılar) bağımsız kaydırma çubuklarıyla iframe'leri istedikleri için karar verdiler.

Dört (potansiyel) kaydırma çubuğu yeterince kötüdür, ancak genel sayfa yüksekliği tarayıcı penceresinden daha yüksekse, sonuç beş ile sona erer! Bunun gibi bir durumda 'normal' çözüm, genel sayfa yüksekliğini, dikey olarak yerleştirmenin 'en iyi şansını' vermek için 700 piksel gibi bir şeyle düzeltmek, ancak bunu çeşitli nedenlerle yapmak istemiyorum. Umarım açık olur.

Bu yüzden sorum şu: Aynı şeyi yapan sütunların her biri ile kullanılabilir (dikey alan) doldurmayı sağlayan bir kapsayıcıya sahip olmanın en iyi yolu ne olurdu? Pratik/mümkün mü? Bonus sorusu: Sütunlar için CSS taşma özelliğini güvenilir bir şekilde kullanabilir miyim yoksa kötü iframe ihtiyacım var mı? Çok fazla CSS deneyimim var, ancak yüzdesel boyutları kullanmadan yanında (özellikle üstbilgiye ihtiyacım olan piksel boyutları ile birleştirildiğinde). Ayrıca, bu standartlara uygun ve IE6 ile geriye dönük uyumlu olmalıdır.

TIA.

DÜZENLEME: Bir CSS mizanpaj çözümü arayışında değilim, sorunum, her bir sütunun gövde kabı içinde mümkün olan en yüksek yükseklik olması ve kaydırılabilir olması, gövdenin boyunu sabitlemeksizin nasıl karşılanacağıdır. Piksel olarak - kesinlikle ihtiyacım olmadığı sürece.

Answer 1

bu tam olarak neye ihtiyacınız yapar eminim.

Answer 2

Böyle bir şeyden mi bahsediyorsunuz?

<div id="head"></div> 
<div id="body"> 
    <div id="col1"></div> 
    <div id="col2"></div> 
    <div id="col3"></div> 
    <div id="col4"></div> 
</div> 

Bu, IE6 çalışmayabilir kendisi için JavaScript kullanmak zorunda kalacak

#body { position: absolute; top: 60px /* height of the header */; bottom: 0px; width: 100%; } 
#body div { position: absolute; top:0; bottom:0 ;width: 25% } 

CSS: İkinci soruya yanıt olarak

window.onResize = function() { 
    // Calculate the height of the body, substract the height of the head and apply to all columns 
} 

Answer 3

, sadece yüksekliğini ayarlamak İçeriğin istediğiniz kadar büyük olmamasını sağlamak için CSS'deki mülk. 'u taşma-y: kaydırma (geçerli CSS değil ama çalışır) kullanarak bir öğe üzerindeki kaydırma çubuğunu zorlayabilirsiniz.

Answer 4

I DIVheight:100% birbirine, bir set içinde iç içe geçmiş elemanları ve diğer padding:60px çeşitli permütasyon çalıştılar ve etkili bir yüksekliği 100% -60px için iç almak için bir çıkış yolu çalışamaz. Sorun, yükseklik yüksekliğinin, eksi kenar boşluklarını ve dolgulamayı değil, içeren öğenin height özniteliğine işaret etmesidir. İç çekmek.

ben CSS biri

width: 12em - 2px; 
border: 1px solid #FED; /* Total width including border is 12em exactly */ 

veya

width: 25% - 1em; 
margin: 1.25em 1em; 

gibi yüzdesi, yazı-akraba, ve piksel birimlerinin (toplamı olarak yükseklikleri (veya fark) ifade etmek izin diliyorum söylemeliyim

ve benzerleri, fil üniteleriyle birlikte TeX gibi).

Sanırım en iyi bahsiniz, muhtemelen afişin yüksekliğini inceleyen ve onu görünümün yüksekliğinden çıkartan bir JavaScript'e sahip olmaktır. Daha sonra, sütunları uygun şekilde içeren kutunun yüksekliğini ayarlar.Ardından, tasarımcının hangi boyut ekranını kullandığını öğrenirsiniz ve CSS dosyasındaki sabit kablolu varsayılan değeri ekranlarına uyacak şekilde ayarlar. Liquid 4 column layout with fixed height banner and footer

yok iframe'lerin, hiçbir java script ve her sütun otomatik olarak kullanılabilir yüksekliğini doldurur: