Kısa bir süre önce bir arkadaşım için ilk HTML web sitemi başlattım ve web sitesini sayfaya otomatik olarak sığdırmayı nasıl başarabileceğimi merak ediyordum?Bir pencereye otomatik sığacak bir sayfa nasıl alabilirim?
Kaydırma gerektirmeyen bir peyzaj tasarımı.
sen Sen position:fixed; için body ve html ayarlayın ve ardından right:, left:, top: ve bottom:0; ayarlı olmalıdır örneğin
<style>
html{
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
background-color:#DDD;
}
</style>
sadece arka plan rengini göstermek için – user1825286
bunu yapmak için css kullanabilirsiniz. Bu şekilde, içerik taşmış olsa bile, görünümün sınırlarını aşmayacaktır. Örneğin
:
<html>
<body>
<div id="wrapper"></div>
</body>
</html>
CSS:
html, body, {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
}
Caveat: kullanıcı kendi pencere daha küçük hale getirir, bu yöntemi kullanarak, içerik kesilecektir.
Eğer bir manzara içinde o zaman daha geniş ve daha az yüksekliğe ihtiyacınız olacak! Tüm web sitelerinin sahip olduğu şey bu.
Önce bir temel ile gidelim, sonra geri kalanı!
temel CSS: Bunu yapmanın CSS ile
, İşte
#body {
width: 100%;
height: 100%;
}
id gövdeli bir div kullanıyor:
<body>
<div id="body>
all the text would go here!
</div>
</body>
Sonra yapabilirsiniz 100% yükseklik ve genişliğe sahip bir web sayfanız var.
Pencereyi yeniden boyutlandırmaya çalışırsa ne olur?
Sorun, pencere yeniden boyutlandırmaya çalışırsa ne olur? Sonra, #body'daki tüm elemanlar kullanıcı arayüzünü dağıtmaya çalışır.
#body {
height: 100%;
width: 100%;
}
Ve sadece min-heightmax-heightmin-width ve max-width ekleyin: Bunun için bu yazabilirsiniz.
Bu şekilde, sayfa öğesi sayfa yüklendikleri yerde kalır.JavaScript kullanarak
:, sen UI kontrol edebilirsiniz JavaScript kullanarak
olarak jQuery kullanın:
$('#body').css('min-height', '100%');
Ve tüm diğer kalan CSS özellikleri, ve JS Kullanıcı Arayüzü zaman ilgilenecek kullanıcı pencereyi yeniden boyutlandırmaya çalışıyor.
web sayfasına kaydırma eklemeyin Nasıl:
bir kaydırma eklemeye çalıştığınız değilseniz, o zaman kullanabileceğiniz bu
$('#body').css('min-height', screen.height); // or anyother like window.height
Bu şekilde JS, belge alacak Kullanıcı sayfayı yüklediğinde yeni bir yükseklik.
İkinci seçenek daha iyidir, çünkü kullanıcılar farklı ekran çözünürlüklerine sahip olduğunda kendi ekranları için oluşturulmuş bir CSS veya Stil sayfası isterler. Başkaları için değil!
İpucu: Geçerli Ekran boyutunu bulmak ve sayfayı düzenlemek için JS'yi kullanmayı deneyin! :)
@JoshC Hepimiz öğrenenleriz. Alaycıyı tutmaya çalış. – fred02138
Bu soruyu tekrar aç, neden kapatılmalı? –
hakikat .. burada bir sürü sarcasm var [yığın taşması] .. tüm aradığın zaman biraz yardıma ihtiyacım var ... bir süredir bu siteyi görmezden geliyorum ... – albruno