Wie setze ich die Höhe eines Elements auf 100% Breite im Ansichtsfenster?

Ich versuche eine Höhe der Elemente festzulegen, die der Breite des Darstellungsbereichs entspricht. Wie kann dies erreicht werden? (Wobei die folgende Geige als Beispiel) ...Wie setze ich die Höhe eines Elements auf 100% Breite im Ansichtsfenster?

https://jsfiddle.net/minlare/0hnn7pfy/

body{margin:0;}  
div{min-height: 100vw;}

Mismatch zwischen Höhe und Breite nur auftritt, wenn eine Bildlaufleiste vorhanden ist.

Ich muss für die Fälle berücksichtigen, wo die Bildlaufleiste vorhanden sein könnte, ein Quadrat Format für meine div.

Quelle

2016-03-31 minlare

warum nicht tut, was Sie habe fiedelte Arbeit? – Martin

Also was ist los? Ihr div ist die gleiche Höhe wie Breite – Justinas

Fehlanpassung zwischen Höhe und Breite tritt nur auf, wenn eine Bildlaufleiste vorhanden ist, wie man dies vermeidet? – minlare

-1

das Meta-Tag verwenden fügen Sie diese in Ihrem

<META NAME="viewport" CONTENT="width=device-width, height=device-height, initial-scale=1, user-scalable=no"/>

und in Ihrem css

@-ms-viewport{ 
    width: device-width; 
    height: device-height; 
}

Quelle

2016-03-31 10:51:44 Deepak

funktioniert nicht für mich, Höhe ist immer noch größer als Breite des Darstellungsbereichs – minlare

Dies löst nicht das Problem von OP. – Joum

Versuchen mit:

body{ 
    margin:0; 
    overflow:hidden; 
} 
div{ 
    background: lightblue; 
    height: 100vw; 
    width:100vw; 
}

dies das Scrollen entfernt und gibt die gleiche Breite und Höhe zum div

Quelle

2016-03-31 11:04:25 Signo

Funktioniert nicht, die Höhe des Elements sollte gleich der Breite des Ansichtsfensters sein - nicht die Höhe des Ansichtsfensters – minlare

@minlare Überprüfen Sie die Bearbeitung – Signo

Ich habe dies versucht, es bedeutet, dass die Breite der Bildlaufleiste rechts daneben ist Element - für zentrierten Text ist es aus der Mitte – minlare

Sie müssen seine Höhe einstellen: 100%; und html, Körpergröße: 100%;

html,body{height:100%;padding:0;margin:0;} 
 
.box{height:100%;position:relative;background-color:grey}

<div class="box"></div>

Quelle

2016-03-31 11:07:16

Funktioniert nicht, sollte die Höhe des Elements gleich der Breite der Ansichtsfenster sein – minlare

Versuchen Sie, die Größe des Fensters und die Höhe der Elemente anzupassen. –

https://jsfiddle.net/minlare/owa63rjn/ - Höhe und Breite sind nicht gleich (es sei denn, ich vermisse etwas?) – minlare

Sie können es zu einem der entsprechenden unter folgenden JavaScript-Methoden tun:

window.screen.height  
window.screen.availHeight 
document.documentElement.clientHeight 
document.documentElement.offsetHeight 
document.documentElement.scrollHeight

Dieser Link kann nützlich sein: http://ryanve.com/lab/dimensions/

Quelle

2016-03-31 11:16:08 uvishere

Wie setze ich die Höhe eines Elements auf 100% Breite im Ansichtsfenster?

Antwort

Verwandte Themen