/ / Zurb 4 ayrı ayrı kaydırılabilir bölümler - zurb-vakıf

Zurb 4 ayrı ayrı kaydırılabilir bölümler - zurb-vakıf

Önceden sorulan bir soruyu yanıtlayan tam ekran düzenim var:

CSS tam ekran ızgara düzeni (bazı kaydırma bölümleri ile)

Tel kafes kullanıyorum:

resim açıklaması buraya girin

Düzenleme: Bu çok benzer bir mizanpaj davranışıdır. Zurb 4'te yeniden oluşturmak istiyorum (genişlik ve yükseklikler don 't) http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html

Harika çalışıyor, ancak şu anda Zurb Foundation 4'te aynı / benzer düzeni modellemeye çalışıyorum ama iki şeyle ilgili sorun yaşıyorum:

  1. B ve E'nin dikey ve bağımsız olarak nasıl kaybolabileceğimi belirsiz (Mac’te Mail.app düzenini düşünün)

  2. Ekranın altına C ve F'nin nasıl sabitlenebileceğimi belirsiz.

Önceki soruğumdan farklı olarak, bu bölümler için sabit piksel genişliklerine sahip olmayı planlamıyorum.

Not: İlk önce mobil tasarıma inanıyorum ama neden bunların hiçbirinin “duyarlı” olarak görülmeyeceğini anlamıyorum. Cihaz ve oryantasyona bağlı olarak bölümleri yeniden boyutlandırmayı ve göstermeyi / gizlemeyi planlıyorum. Fakat kaydırma ve tam yükseklikli bölümler Zurb'den eksik görünüyor.

Yanıtlar:

Cevap için 5 № 1

İhtiyacınıza göre yapılması gereken ana şeyler var:

İlk önce, sayfanın tüm genişliğini kullan

Mizanpajın tüm sayfayı doldurmasını ve bunu yaparken bir Foundation sınıfını geçersiz kılmanız için yapmanız gerekir:

.row {
max-width: 100%;
}

İkincisi, altbilgiyi alt kısma yapıştırın böylece için bir kaydırma çubuğu olabilir B ve E. İşte bir Vakıf şablonuyla çalışmasını sağlamak için değiştirdiğim yapışkan bir CSS.

html, body, #wrapper{ height: 100%; }
body > #wrapper{height: auto; min-height: 100%;}
#main { padding-bottom: 75px; /*  same height as the footer */
overflow:hidden;
top: 75px; bottom: 0; left: 0; right: 0;
padding-bottom: 75px;
position: absolute;
}
#footer {
position: relative;
margin-top: -75px; /* negative value of footer height */
height: 75px;
clear:both;
}

.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}

Anahtar dört konteyner divs: sarma, başlık, ana ve altbilgi. Başlığınızın bir başlık veya menü olabileceğinden sabit bir yüksekliğe sahip olacağını varsayarsak, sınıfı aşağıdaki kod üzerinde ekleyebilirsiniz (üçüncü noktaya bakın).

Üçüncü olarak, orta DIV'lerin gerilmesini sağlayın uzun içerik için kaydırma çubukları var

#header {
height:75px; // your desired height
}
// additional style for the "main" class
#main {
top: 75px; bottom: 0; left: 0; right: 0; // top is the same as header.height
}
// this will create a scroll bar on section B
#main .b {
overflow:auto;
height:100%;
}
// this will create a scroll bar on section E
#main .e {
overflow:auto;
height:100%;
}

Bununla birlikte bölümlere not alın B ve E birbirlerinin üzerine yığılacakları, tepelerinin sabitleneceği ve her birinde bir kaydırma çubuğu olmasını istediğinizi beklediğinizi düşünürüm.

Yorumunda bahsettiğin gibi benimÖnceki kod çalışmıyor ve bunun nedeni, bir mobil cihazda görüntülediğinizde, çalışmak için küçük bir alana sahip olmanızdır. Cihaz ne kadar küçükse, sahip olduğunuz daha az gerçek durumu alır. Yapman gereken şey karar vermek. hangi noktada ana içeriğinizi kaydırmak istemezsiniz (bölümler B ve E).

Kullanıcılarınıza izin vermeniz iyi bir fikir değilSitenizin belirli bölümlerini kaydırın. Daha sonra bölümlerin geri kalanına (sayfanın geri kalanı) doğru kaydırma yaparak diğer bölümlerde tekrar ilerlemelerini sağlayın. Ve bu, sayfanın altına ulaşmadan önce. Yani bu öneriye dayalı olarak ihtiyacınız olan şey:

@media only screen and (max-width: 768px) {
#main {
padding-bottom: 0;
position:inherit
}
#footer {
margin-top: 0;
}
#main .b {
overflow:auto;
height:auto;
}
#main .e {
overflow:auto;
height:auto;
}
}

Burada harekete bakın. Orada daha küçük cihazlarda göreceksiniz.altbilgi, diğerinin üzerine yığılmış iki konteyner ile dibe yapışacaktır. Masaüstü görünümünde, altbilgi sağa doğru sadık kalacak ve gerekirse ana içerik için kaydırma çubuklarına sahip olacaksınız.


ilgili sorular


Yorumlar (0)

Yorum ekle