Hole Fensterhöhe und setze div Größen auf diese Höhe

Ich möchte div Größen auf die Größe des Browserfensters auf öffnen.Hole Fensterhöhe und setze div Größen auf diese Höhe

ich dies mit der Fensterhöhe zu bekommen ..

var height = window.innerHeight 
    || document.documentElement.clientHeight 
    || document.body.clientHeight;

aber jetzt bin ich stecken, wie ich diese Höhe in den HTML-Code passieren kann ..

Das Div I, um die Größe wollen hat eine Menge Inhalt im Inneren, so glaube ich nicht, dass ich einfach replaceWith() verwenden und die neue Höhe css inline einfügen kann, da ich auch alle anderen HTML übergeben muss, was ein großer Schmerz sein wird.

Wenn Sie sowohl in js und/oder jQ beantworten können, wäre es fantastisch.

Danke

Quelle

2017-07-03 James

Ok, so dass wir ein wenig Code sehen müssen, weil ich sehe nicht, warum Sie es in js tun müssen, würden . Mach es einfach in CSS ... nein? – Kiwad

Fiddle: https://jsfiddle.net/d0ufr8hx/

HTML:

<div> 
    <p>Lorem ipsum dolor sit amet.</p> 
    <p>Lorem ipsum dolor sit amet.</p> 
    <p>Lorem ipsum dolor sit amet.</p> 
</div> 
<div> 
    <p>Lorem ipsum dolor sit amet.</p> 
    <p>Lorem ipsum dolor sit amet.</p> 
    <p>Lorem ipsum dolor sit amet.</p> 
</div> 
<div> 
    <p>Lorem ipsum dolor sit amet.</p> 
    <p>Lorem ipsum dolor sit amet.</p> 
    <p>Lorem ipsum dolor sit amet.</p> 
</div>

jQuery:

$(document).ready(function() { 
    var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 

    $('div').height(height) 
});

Alternativ können Sie eine reine CSS-Lösung (vh und vw):

div { 
    width: 100vw; 
    height: 100vh; 
}

Seien Sie vorsichtig von vh und vw wenn Sie versuchen, ältere Browser zu unterstützen, zum Beispiel werden beide über IE 11 nicht unterstützt. Browser support for vh, browser support for vw.

Quelle

2017-07-03 18:25:26 Lansana

erstaunlich! Danke für dieses bisschen Wissen. – James

die ‚vh‘ dimensionalen Einheiten und ‚vw‘ wurden zu CSS3 hinzugefügt, um diese Art der Sache zu tun. Setzen Sie die Höhe auf 100vh sollte tun, was Sie wollen.

Quelle

2017-07-03 18:24:47 Jason

Um dies etwas zu erweitern, stehen "vh" und "vw" für die Ansichtsfensterhöhe bzw. die Breite des Darstellungsbereichs. Jede Einheit repräsentiert ein Prozent (1/100) der aktuellen Ansichtsfenstergröße, also 100vh == 100% der aktuellen Höhe des Ansichtsfensters. Die Größen werden neu berechnet, wenn das Ansichtsfenster die Größe ändert, sodass das div immer 100% der Höhe des Ansichtsfensters beträgt, selbst wenn Sie die Größe des Browserfensters ändern. –

So nach Ihrem reinen JavaScript-Code Sie können dies versuchen: -

<div id="divId"></div> 

document.getElementById('divId').style.height = height +"px"

Quelle

2017-07-03 18:30:45

Hole Fensterhöhe und setze div Größen auf diese Höhe

Antwort

Verwandte Themen