Yanıtlar:
İşte dinamik bir arka plan için bir div olarak bir div kullanırken nihayet geldi çözüm.
z-indexArka plan olmayan kullanımlar için kaldırın .leftveya rightsütununu kaldırın .topveya öğesini kaldırın bottom.DÜZENLEME 1: Aşağıdaki CSS, FF ve Chrome'da düzgün gösterilmediğinden düzenlendi. position:relativeHTML'de olmaya taşındı ve height:100%bunun yerine gövdeyi ayarlayın min-height:100%.
DÜZENLEME 2: CSS'ye fazladan yorumlar eklendi. Yukarıdaki bazı talimatlar eklendi.
CSS:
html{
min-height:100%;/* make sure it is at least as tall as the viewport */
position:relative;
}
body{
height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:hidden;
z-index:-1; /* Remove this line if it's not going to be a background! */
}Html:
<!doctype html>
<html>
<body>
<div id="cloud-container"></div>
</body>
</html>Neden?
html{min-height:100%;position:relative;}Bu olmadan bulut kapsayıcı DIV, HTML'nin düzen bağlamından kaldırılır. position: relativeHTML kutusunun bottom:0altına işaret edecek şekilde DIV'nin çizildiğinde HTML kutusunun içinde kalmasını sağlar . height:100%Bulut kapsayıcısında, artık görünüm penceresine değil, HTML etiketinin yüksekliğine atıfta bulunduğundan da kullanabilirsiniz .
htmlÖğe üzerinde minimum yükseklik (ve sadece yükseklik değil) kullanmanız gerektiğini fark ettim . Neden?
height'sen bu kadar uzunsun; ne daha fazla ne daha az. Bu, görünümün yüksekliği olacağı anlamına gelir. En azından görüntü alanı veya daha uzun boylu olmasını istiyoruz. min-heightbunu güzel yapar.
<html>ve konumlandırma iki ayrı şey olduğunu tıkladı . Teşekkür ederim!
HTML5 ile bunu yapmanın en kolay yolu basitçe yapmaktır height: 100vh. 'Vh' tarayıcı penceresinin görünüm yüksekliğini gösterir. Tarayıcı ve mobil cihazların yeniden boyutlandırılmasına duyarlı.
vw.
Benzer bir sorunum vardı ve çözüm bunu yapmaktı:
#cloud-container{
position:absolute;
top:0;
bottom:0;
}Sayfa yüksekliğinin% 100 yüksekliğinde sayfa merkezli bir div istedim, bu yüzden toplam çözümüm şuydu:
#cloud-container{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
width: XXXpx; /*otherwise div defaults to page width*/
margin: 0 auto; /*horizontally centers div*/
}Bir ana öğeyi (veya yalnızca "gövde") position: relative;
cloud-container?
Sahte Sütunlar kullanarak hile yapabilir veya bazı CSS hileleri kullanabilirsiniz
Bir tablo kullanmak basit:
<html>
<head>
<title>100% Height test</title>
</head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody>
<tr>
<td>Nav area</td>
</tr>
</tbody>
</table>
<div style="border: 1px solid green;">Content blabla... text
<br /> text
<br /> text
<br /> text
<br />
</div>
</body>
</html>DIV tanıtıldığında, insanlar masalardan o kadar korkuyorlardı ki fakir DIV mecazi çekiç haline geldi.
Mutlak konum kullanın. Genelde elle bir şeyler koymayı veya yüzer diyaloglar olmasını gerektiren mutlak pozisyonu kullanmaya alıştığımız bu değildir. Bu, pencereyi veya içeriği yeniden boyutlandırdığınızda otomatik olarak uzar. Bunun standartlar modunu gerektirdiğini, ancak IE6 ve üstü sürümlerde çalışacağını düşünüyorum.
Div'i içeriğinizle birlikte 'içerik' kimliği ile değiştirin (yalnızca örnekleme için belirtilen yükseklik vardır, gerçek içerik üzerinde bir yükseklik belirtmeniz gerekmez.
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>Bunun çalışma şekli dış div'ın gezinme çubuğu için bir referans noktası görevi görmesidir. Dış div, 'content' div'in içeriği tarafından uzatılır. Gezinme çubuğu, kendisini ebeveyninin yüksekliğine uzatmak için mutlak konumlandırma kullanır. Yatay hizalama için, içerik div'ini navbar ile aynı genişlikte dengeleyeceğiz.
Bu, CSS3 flex kutu modeliyle çok daha kolay hale geldi, ancak henüz IE'de mevcut değil ve bazı tuhaflıkları var.
Daha modern tarayıcıları hedefliyorsanız, hayat çok basit olabilir. Deneyin:
.elem{
height: 100vh;
}sayfanın% 50'sine ihtiyacınız varsa 100'ü 50 ile değiştirin.
Kalıcı bir açılır pencere sormadan önce tüm web sayfasını ele almak istiyorum. CSS ve Javascript kullanarak birçok yöntem denedim ama aşağıdaki çözümü anlayana kadar hiçbiri yardımcı olmaz. Benim için çalışıyor, umarım sana da yardımcı olur.
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
margin: 0px 0px;
height 100%;
}
div.full-page {
position: fixed;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity:0.8;
overflow-y: hidden;
overflow-x: hidden;
}
div.full-page div.avoid-content-highlight {
position: relative;
width: 100%;
height: 100%;
}
div.modal-popup {
position: fixed;
top: 20%;
bottom: 20%;
left: 30%;
right: 30%;
background-color: #FFF;
border: 1px solid #000;
}
</style>
<script>
// Polling for the sake of my intern tests
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
isReady();
}
}, 1000);
function isReady() {
document.getElementById('btn1').disabled = false;
document.getElementById('btn2').disabled = false;
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function promptModalPopup() {
document.getElementById("div1").style.visibility = 'visible';
document.getElementById("div2").style.visibility = 'visible';
// disable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'hidden';
}
function closeModalPopup() {
document.getElementById("div2").style.visibility = 'hidden';
document.getElementById("div1").style.visibility = 'hidden';
// enable scrolling
document.getElementsByTagName('body')[0].style.overflow = 'scroll';
}
</script>
</head>
<body id="body">
<div id="div1" class="full-page">
<div class="avoid-content-highlight">
</div>
</div>
<button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
<div id="demo">
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
<h2>Original content</h2>
</div>
<div id="div2" class="modal-popup">
I am on top of all other containers
<button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
<div>
</body>
</html>İyi şanslar ;-)
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
document.body.onload = function () {
var textcontrol = document.getElementById("page");
textcontrol.style.height = (window.innerHeight) + 'px';
}<html>
<head><title></title></head>
<body>
<div id="page" style="background:green;">
</div>
</body>
</html>Basit, sadece bir tablo div sarın ...
HTML:
<div class="fake-table">
<div class="left-side">
some text
</div>
<div class="right-side">
My Navigation or something
</div>
</div>CSS:
<style>
.fake-table{display:table;width:100%;height:100%;}
.left-size{width:30%;height:100%;}
.left-size{width:70%;height:100%;}
</style>