Ik wil een bovenliggende DIV instellen op 70% van de volledige schermhoogte van 100%. Ik heb de volgende CSS ingesteld, maar het lijkt niets te doen:
body {
font-family: 'Noto Sans', sans-serif;
margin: 0 auto;
height: 100%;
width: 100%;
}
.header {
height: 70%;
}
Om de een of andere reden lijkt het echter niet te werken en is de koptekst niet 70% van de schermgrootte. Enig advies?
Antwoord 1, autoriteit 100%
Probeer Viewport Height te gebruiken
div {
height:100vh;
}
Het wordt hieral in detail besproken
Antwoord 2, autoriteit 4%
Dit is de oplossing,
Voeg de htmlook toe aan 100%
html,body {
height: 100%;
width: 100%;
}
Antwoord 3, autoriteit 3%
maak positie absolutevoor die div.
http://jsfiddle.net/btevfik/KkKeZ/
Antwoord 4
Als je het wilt op basis van de schermhoogte, en niet de vensterhoogte:
const height = 0.7 * screen.height
// jQuery
$('.header').height(height)
// Vanilla JS
document.querySelector('.header').style.height = height + 'px'
// If you have multiple <div class="header"> elements
document.querySelectorAll('.header').forEach(function(node) {
node.style.height = height + 'px'
})
Antwoord 5
Door absolute positionering te gebruiken, kunt u <body>of <form>of <div>aanpassen aan uw browser pagina. Bijvoorbeeld:
<body style="position: absolute; bottom: 0px; top: 0px; left: 0px; right: 0px;">
en plaats er dan gewoon een <div>in en gebruik het percentage van heightof widthdat u wenst
<div id="divContainer" style="height: 100%;">