Yanıtlar:
Bunun püf noktası, html ve body öğelerinde% 100 yükseklik belirlemektir. Bazı tarayıcılar yüksekliği hesaplamak için ana öğelere (html, gövde) bakar.
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}
tüm cevapları unutun, bu CSS satırı benim için 2 saniyede çalıştı:
height:100vh;1vh = Tarayıcı ekran yüksekliğinin% 1'i
Duyarlı düzen ölçeklendirme için şunları kullanmak isteyebilirsiniz:
min-height: 100vh[Kasım 2018'de güncelleme] Yorumlarda belirtildiği gibi, minimum yüksekliği kullanmak, yanıt veren tasarımlarda sorun yaşanmasını önleyebilir
[güncelleme nisan 2018] Yorumlarda belirtildiği gibi, 2011'de soru sorulduğunda, tüm tarayıcılar görüntü alanı birimlerini desteklemiyordu. Diğer cevaplar o zamanki çözümlerdi - vmaxhala IE'de desteklenmiyor, bu yüzden bu henüz herkes için en iyi çözüm olmayabilir.
min-height: 100vhçok daha iyi olacağına dair küçük öneri . Duyarlı tasarımlar için de ölçeklendirilebilir.
Aslında en iyi yaklaşım şudur:
html {
height:100%;
}
body {
min-height:100%;
}Bu benim için her şeyi çözer ve altbilgimi kontrol etmeme yardımcı olur ve sayfa aşağı kaydırılsa bile sabit altbilgiye sahip olabilir.
Teknik Çözüm - DÜZENLENMİŞ
Tarihsel olarak, 'yükseklik', en kolay olan 'genişlik' ile karşılaştırıldığında kalıplanması zor bir şeydir. CSS <body>, stilin işe yaraması için odaklandığından beri . Yukarıdaki kod - verdik <html>ve <body>bir yükseklik. Sihrin ortaya çıktığı yer burasıdır - oyun masasında 'min-yükseklik' olduğu için, tarayıcıya <body>üstün olduğunu <html>çünkü <body>minimum yüksekliği tuttuğunu söylüyoruz . Bu da, daha önce yüksekliğe sahip olduğu <body>için geçersiz kılmaya izin verir . Başka bir deyişle, tarayıcıyı masadan "çarpması" için kandırıyoruz , böylece bağımsız olarak stil oluşturabiliriz.<html><html><html>
min-heightve height?
<body>, stilin işe yaraması için odaklandığından beri . Bu kod: verdik <html>ve <body>bir yükseklik. Sihirli resmin içine giriyor - biz oyun masasında 'min-height' sahip olmalarından dolayı, sunucuyu anlatıyorsun <body>üstün over olduğu <html>çünkü <body>min-yükseklik tutar. Bu da, daha önce yüksekliğe sahip olduğu <body>için geçersiz kılmaya izin verir . Diğer bir deyişle, sunucuyu masadan "çarpması" için kandırıyoruz , böylece bağımsız olarak stil oluşturabiliriz. <html><html><html>
Min-height özelliğinde vh kullanabilirsiniz.
min-height: 100vh;Kenar boşluklarını nasıl kullandığınıza bağlı olarak aşağıdaki işlemleri yapabilirsiniz ...
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside elementKabul edilen çözüm aslında işe yaramayacak. İçeriğin divebeveyninin yüksekliğine eşit olacağını fark edeceksiniz body. Bu nedenle, bodyyüksekliğin olarak 100%ayarlanması, onu tarayıcı penceresinin yüksekliğine eşit olarak ayarlayacaktır. Let tarayıcı penceresi olduğunu söylemek 768pxiçeriği ayarlayarak, yüksekliği diviçin yükseklik 100%, div'in yükseklik olmak dönecek 768px. Böylece, başlık div'i 150pxve içerik div'i olacaksınız 768px. Sonunda 150pxsayfanın altında içeriğe sahip olacaksın . Başka bir çözüm için bu bağlantıya bakın.
HTML5 ile şunları yapabilirsiniz:
CSS:
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}HTML:
<header>blabablalba </header>
<section> Content </section>Benim için bir sonraki iyi çalıştı:
Başlığı ve içeriği bir div üzerine kaydırdım
<div class="main-wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>Bu referansı yüksekliği flexbox ile doldurmak için kullandım. CSS şu şekildedir:
.main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
flex: 1;
}
.content {
flex: 1;
}Flexbox tekniği hakkında daha fazla bilgi için referansı ziyaret edin
Ayrıca ebeveyni olarak da ayarlayabilirsiniz display: inline. Bkz. Http://codepen.io/tommymarshall/pen/cECyH
Ayrıca html ve body yüksekliğinin de% 100 olarak ayarlandığından emin olun.
Kabul edilen cevap işe yaramıyor. Ve en yüksek oyu alan cevap asıl soruya cevap vermiyor. Sabit bir piksel yüksekliği başlığı ve tarayıcının kalan ekranında bir dolgu ile ve owerflow için kaydırın. İşte mutlak konumlandırma kullanarak gerçekten işe yarayan bir çözüm. Ayrıca sorudaki "sabit başlık" sesiyle başlık yüksekliğinin bilindiğini varsayıyorum. Burada örnek olarak 150px kullanıyorum:
HTML:
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>CSS: (yalnızca görsel efekt için arka plan rengi ekleme)
#Header
{
height: 150px;
width: 100%;
background-color: #ddd;
}
#Content
{
position: absolute;
width: 100%;
top: 150px;
bottom: 0;
background-color: #aaa;
overflow-y: scroll;
}Bunun nasıl çalıştığına daha ayrıntılı bir bakış için #Content, içindeki gerçek içerikle , bootstrap satırlarını ve sütunlarını kullanarak bu jsfiddle'a bir göz atın .
bottomMülkiyet verdiğinden emin #Contentkalır sayfanın sonunda sıkışmış. Bunu açıklamak için zaman ayırdığınız için teşekkür ederim.
Bu örnekte, ana içerik div'imin sıvı yüksekliği olmasını istiyorum, böylece tüm sayfa tarayıcı yüksekliğinin% 100'ünü kaplar.
height: 100vh;
Lütfen buraya 5 sentimi ekleyeyim ve klasik bir çözüm sunayım:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>Bu, tüm tarayıcılarda çalışacak, komut dosyası yok, esneklik yok. Parçacığı tam sayfa modunda açın ve tarayıcıyı yeniden boyutlandırın: istenen oranlar tam ekran modunda bile korunur.
idHeader.heightve idContent.topkenarlık içerecek şekilde ayarlanır ve kenarlık kullanılmıyorsa aynı değere sahip olmalıdır. Aksi takdirde, hesaplanan genişlik kenarlık, kenar boşluğu ve / veya dolgu içermediğinden öğeler görünüm alanından çekilecektir.left:0; right:0;width:100%sınır kullanılmamışsa, aynı nedenle ile değiştirilebilir .padding-topve / veya
padding-bottomnitelikler eklemeliyiz #idOuter.Cevabımı tamamlamak için işte altbilgi düzeni:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}<div id="idOuter">
<div id="idContent" style="bottom:36px; top:0;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>Ve işte hem üstbilgi hem de altbilgi içeren düzen:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:36px;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>IE 9 ve altını desteklemeniz gerekmedikçe, flexbox kullanırım
body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }Ayrıca tüm sayfayı doldurmak için bir gövdeye ihtiyacınız var
body, html{ width:100%; height:100%; padding: 0; margin: 0;}CSS PLaY | tarayıcılar arası sabit üstbilgi / altbilgi / ortalanmış tek sütun düzeni
CSS Çerçeveleri, sürüm 2: Örnek 2, belirtilen genişlik | 456 Berea Caddesi
Önemli bir şey, bu kulağa kolay gelse de, böyle bir etki elde etmek için CSS dosyanıza oldukça çirkin kod girecek olmasıdır. Ne yazık ki, gerçekten tek seçenek bu.
#Header
{
width: 960px;
height: 150px;
}
#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}Şimdiye kadar bulduğum en iyi çözüm, sayfanın altına bir altbilgi öğesi yerleştirmek ve ardından altbilgi ofsetiyle genişletmemiz gereken öğenin farkını değerlendirmek. Örneğin
<div id="contents"></div>
<div id="footer"></div>#footer {
position: fixed;
bottom: 0;
width: 100%;
}var contents = $('#contents');
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');Ayrıca her pencere yeniden boyutlandırmasında içerik öğesinin yüksekliğini güncellemek isteyebilirsiniz, bu nedenle ...
$(window).on('resize', function() {
contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});Böyle bir şey denedin mi?
CSS:
.content {
height: 100%;
display: block;
}HTML:
<div class=".content">
<!-- Content goes here -->
</div>