Odpowiedzi:
Oto rozwiązanie, które w końcu wymyśliłem, używając div jako kontenera na dynamiczne tło.
z-indexdla zastosowań innych niż tło.leftlub rightdla kolumny o pełnej wysokości.toplub bottomdla wiersza o pełnej szerokości.EDYCJA 1: Poniższy CSS został edytowany, ponieważ nie wyświetlał się poprawnie w FF i Chrome. przeniósł position:relativesię na HTML i ustawił na body height:100%zamiast na min-height:100%.
EDYCJA 2: Dodano dodatkowe komentarze do CSS. Dodano więcej instrukcji powyżej.
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>Czemu?
html{min-height:100%;position:relative;}Bez tego DIV kontenera chmurowego jest usuwany z kontekstu układu HTML. position: relativezapewnia, że DIV pozostanie wewnątrz pola HTML, gdy zostanie narysowany, tak że bottom:0odnosi się do dolnej części pola HTML. Możesz także użyć height:100%w kontenerze w chmurze, ponieważ teraz odnosi się on do wysokości znacznika HTML, a nie do rzutni.
htmlelemencie trzeba użyć minimalnej wysokości (a nie tylko wysokości) . Dlaczego?
heightoznacza „jesteś taki wysoki; Nie więcej i nie mniej.' Co oznacza, że będzie to wysokość rzutni. Chcemy, aby była co najmniej tak wysoka jak rzutnia lub wyższa. min-heightrobi to ładnie.
<html>i pozycjonowanie do rzutni to dwie osobne rzeczy. Dziękuję Ci!
W HTML5 najłatwiej jest to zrobić height: 100vh. Gdzie „vh” oznacza wysokość rzutni okna przeglądarki. Reaguje na zmianę rozmiaru przeglądarki i urządzeń mobilnych.
vw.
Miałem podobny problem i rozwiązaniem było zrobienie tego:
#cloud-container{
position:absolute;
top:0;
bottom:0;
}Chciałem div z wycentrowaną stroną o wysokości 100% wysokości strony, więc moim całkowitym rozwiązaniem było:
#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*/
}Może być konieczne utworzenie elementu nadrzędnego (lub po prostu „body”) position: relative;
cloud-container?
Możesz oszukiwać za pomocą Faux Columns Lub możesz użyć sztuczek CSS
To proste przy użyciu tabeli:
<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>Kiedy wprowadzono DIV, ludzie tak bardzo bali się stołów, że biedny DIV stał się metaforycznym młotem.
Użyj pozycji bezwzględnej. Zauważ, że nie w ten sposób jesteśmy przyzwyczajeni do używania pozycji bezwzględnej, która wymaga ręcznego układania elementów lub swobodnych okien dialogowych. Spowoduje to automatyczne rozciągnięcie po zmianie rozmiaru okna lub zawartości. Uważam, że wymaga to trybu standardów, ale będzie działać w IE6 i nowszych wersjach.
Wystarczy zamienić div z id „thecontent” z treścią (podana wysokość jest tylko dla ilustracji, nie trzeba określać wysokości rzeczywistej zawartości.
<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>Działa to tak, że zewnętrzny div działa jako punkt odniesienia dla paska nawigacyjnego. Zewnętrzny div jest rozciągnięty przez treść div „content”. Pasek nawigacyjny wykorzystuje pozycjonowanie bezwzględne, aby rozciągnąć się na wysokość swojego elementu nadrzędnego. Dla wyrównania w poziomie dokonujemy przesunięcia div zawartości o tę samą szerokość paska nawigacyjnego.
Jest to znacznie łatwiejsze dzięki modelowi CSS3 Flex Box, ale nie jest to jeszcze dostępne w IE i ma swoje własne dziwactwa.
Wpadłem na ten sam problem co ty. Chciałem zrobić DIVjako tło, ponieważ, ponieważ łatwo manipulować div za pomocą javascript. W każdym razie trzy rzeczy, które zrobiłem w css dla tego div.
CSS:
{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}Jeśli celujesz w bardziej nowoczesne przeglądarki, życie może być bardzo proste. próbować:
.elem{
height: 100vh;
}jeśli potrzebujesz na 50% strony, zamień 100 na 50.
Chcę objąć całą stronę internetową przed wyświetleniem modalnego wyskakującego okienka. Próbowałem wielu metod przy użyciu CSS i Javascript, ale żadna z nich nie pomogła, dopóki nie wymyślę następującego rozwiązania. To działa dla mnie, mam nadzieję, że to też pomoże.
<!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>Powodzenia ;-)
* {
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>Proste, po prostu zawiń to w div tabeli ...
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>