Sayfa yüksekliği, görünümün% 100'üne mi?

Web geliştirme için bir bütün olarak çok yeni olduğumu ve bu benim ilk duyarlı sitem olduğunu söyleyerek başlayacağım, lütfen nazik ol ve bunu akılda tut, ben bu aşamada noob kelimesinin tanımıyım . Bir süreliğine cevap arandığında ve şansım olmadığından, buradaki birinin bana yardımcı olabileceğini umuyorum.Sayfa yüksekliği, görünümün% 100'üne mi?

Bu web sitesi için bir ana sayfa yapmaya çalışıyorum. Tasarım, sayfanın sol tarafındaki logoyu en üstte gösteren bir blok ve daha sonra hepsi aynı arka plan üzerinde bulunan bir dizi bağlantıdır. Bunun sağında ekranın geri kalanını dolduran büyük bir resim var. Tüm sayfanın, görüntülendiği aygıtın tarayıcı penceresini doldurmasını istiyorum, böylece kaydırma işleminin kesinlikle gerekmemesi, yani, görünümün hem% 100 hem de genişliği ve yüksekliği. Sayfanın genişliği bana hiç dehşet vermiyor, istediğim şekilde farklı ekran boyutlarına tatlı olarak ayarlıyorum, kenar çubuğunun genişliği% 20, ana resim ise% 80. Bununla birlikte, yükseklik farklı bir öyküdür. Bununla birlikte, yükseklik farklı bir öyküdür. Şimdiye kadar denediğim CSS'nin herhangi bir kombinasyonunda, manzaranın% 100'ünde davranması için yüksekliğe sahip olamıyorum. Kenar çubuğu çok kısa ve ana görüntü çok uzun ya da her ikisi de çok uzun vb. Vb. En boy oranını korumak istiyorum ve sadece taşma sahip olmak ana görüntü en çok görüntülenen ve yanda tutmak için gereken şekilde div var bar Sadece sayfa yüksekliğinin% 100'üne sığdırmak istiyorum. Bununla

<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
html 
{ 
height: 100%; 
margin: 0; 
padding: 0; 
} 

body 
{ 
height: 100%; 
margin: 0; 
padding: 0; 
} 

#page 
{ 
width: 100%; 
height: 100%; 
margin: 0; 
padding: 0; 
} 

#sidebar 
{ 
float: left; 
width: 20%; 
height: 100%; 
padding-bottom: 10; 
margin: 0; 
background: url(/Images/bg.jpg); 
} 

#slideshow 
{ 
float: right; 
width: 80%; 
height: 100%; 
overflow: hidden; 
margin: 0; 
padding: 0; 
} 

#logoimg 
{ 
width: 80%; 
margin-top: 10%; 
margin-left: 10%; 
margin-right: 10%; 
} 

#mainimg 
{ 
width: 100%; 
overflow: hidden; 
} 

.link 
{ 
font-family: courier; 
font-size: 1.3em; 
text-align: center; 
padding-top: 7%; 
padding-bottom: 1%; 
color: rgba(255,255,255,1.00); 
} 

@font-face 
{ 
font-family: courier; 
src: url(/courier_new-webfont.ttf); 
src: url(/courier_new-webfont.eot); 
src: url(/courier_new-webfont.woff); 
} 

</style> 
</head> 

<body> 
<div id="page"><!--Whole page container--> 
<div id="sidebar"><!--Side bar container--> 
    <div class="link" id="logo"><img id="logoimg" src="/Images/logo.png"></div> 
    <div class="link" id="homelink">Home<!--Home link--></div> 
    <div class="link" id="aboutlink">About<!--About link--></div> 
    <div class="link" id="gallerylink">Gallery<!--Gallery link--></div> 
    <div class="link" id="priceslink">Prices<!--Prices link--></div> 
    <div class="link" id="reviewslink">Reviews<!--Reviews link--></div> 
    <div class="link" id="contactlink">Contact<!--Contact link--></div> 
    <div class="link" id="clientslink">Clients<!--Clients link--></div> 
</div> 
<div id="slideshow"><img id="mainimg" src="/Images/main.jpg"><!--Image slideshow container--> 
</div> 
</div> 
</body> 
</html>

Herhangi bir yardım gerçekten takdir ve herhangi kitlesel amatör hataları işaret etmek çekinmeyin: İşte şu anda benim kodudur. Herhangi bir eleştiri yapmaya ve ondan öğrenmeye hazırım. Teşekkürler

kaynak

2013-10-30 Dan

Önerebileceğim ilk şey, o stil etiketini kaldırmak ve css'yi kendi sayfasına aktarmaktır. Eğer medya sorgularını ve her şeyi bu denkleme getirecekseniz, ayrı bir css sayfasına ihtiyacınız vardır. –

Size bunu nasıl şekillendireceğinizi göstermek için temel bir kurulum yaptım. Yüksekliği% 100 olarak ayarladığım en iyi yol, jQuery/Javascript kullanımıdır. Pencerenin yüksekliğini bulabilir ve daha sonra onu kullanarak css'e girebilirsiniz.

Bu şekilde çalışma şekli, var wH = $(window).height();'un yüksekliği bulup bir sayıya dönüştürmektir. Sonra, $('.sideBar').css({height: wH}); kullandığınızda, yüksekliği sideBar'ın css'sine giriyorsunuz.

jQuery

function windowH() { 
    var wH = $(window).height(); 

    $('.sideBar, .mainImg').css({height: wH}); 
} 

windowH();

Bu iki unsurları pencerenin yüksekliği veriyor yazdım Bu fonksiyon. Bu, bu iki öğenin herhangi bir tarayıcı penceresinin% 100'ü olmasına izin verecektir.

Ayrıca, nav'u bunun nasıl olabileceğini göstermek için kemanın içine dahil ettiğim ul içine döndürmenizi de öneriyorum.

JSFIDDLE

Eğer araştırma gerekecektir sonraki şey mobil cihazlara daha iyi uyum içeriğini ayarlamak için media queries olan (kodunu görmek için url sonundaki 'gösterisi' Kaldır). Mobil cihazlarda sideBar'ı yatay bir nav'a değiştirmeyi düşünün. boy & genişlik% 100 ekleyerek

Eğer saf CSS tek yaklaşım o zaman böyle bir şey yapabilir isterseniz,

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
}

senin html/body sonra diğer unsurları height: 100% kullanabilirsiniz tüm sayfayı doldurmak içinNasıl çalıştığını görmek için bu JSFIDDLE numaralı belgeye başvurun. İşte

Helpful read about responsive web design

kaynak

2013-10-30 22:43:38

Bu çok parlak ve çok yardımcı olduğun için çok teşekkürler Josh, daha denemedim ama sonra nasıl olacak ve nasıl yaşayacağımı gör. Sağladığınız linklerin üzerinden hızlıca bakmak, benim için çok yararlı görünmelerini sağladı. Daha önce portre tablet boyutunda ve altında dikey olarak kaydırma düzenine geçmek için medya sorgularını bir mola noktasıyla kullanmayı planlamıştım, sadece bu sorunu çözmek istedim. Çok teşekkürler tekrar – Dan

Sorun değil! Hiç böyle bir düzen yapmadım, bu yüzden ikimiz için de faydalı olabileceğini düşündüm. Yükseklikleri şu şekilde ayarlayabilirsiniz: "var wH = $ (window) .height()/2;" Bu, 1/2 yükseklik, "var wH = $ (window) .height()/4;" ve Bu 1/4 yükseklik olurdu. Bu cevap size yardımcı olursa lütfen doğru cevap olarak işaretlemeyi unutmayın. Tasarımında bol şans ve bana soru sormaktan çekinmeyin! –

Çok teşekkür ederim teşekkürler. Cevap işaretli :) – Dan

HTML sadece basitleştirilmiş kod örnek:

<div id="welcome"> 
    your content on screen 1 
</div> 
<div id="projects"> 
    your content on screen 2 
</div>

ve burada CSS kullanarak vh var: From Here

div#welcome { 
    height: 100vh; 
    background: black; 
} 

div#projects { 
    height: 100vh; 
    background: yellow; 
}

: http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

Çalışıyor benim için.

kaynak

2014-09-19 19:43:40

Bu en iyi ve en basit cevaptır! – emi

Sayfa yüksekliği, görünümün% 100'üne mi?

cevap

İlgili konular