mit dynamischer Höhe

Ich wollte ein Quadrat div von reiner CSS erstellen was es height dynamisch ist und es ist width Basis auf height skaliert.

Wie wir unten in der Tabelle sehen können, ist die Höhe container dynamisch basierend auf ihrem Inhalt. Die rote square nehmen die volle Höhe der container und die Breite sollte gleich height sein.
Ich weiß, wir können maintain aspect ratio of a div base on its width, aber ich kann keinen Weg finden, wenn die heightdynamische ist.

Jede Hilfe wäre willkommen! Vielen Dank!

Beachten Sie, dass: Die Höhe ist dynamisch, so the solution with vh hat nicht funktioniert und das Snipet ist nur ein Spielplatz.mit dynamischer Höhe

#container { 
 
    width: 400px; 
 
    padding: 20px; 
 
    border: solid 1px black; 
 
    position: relative; 
 
} 
 

 
.square { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-color: red; 
 
    
 
    width: 100px /*Hmm its just a dummy value*/ 
 
}

<div id="container"> 
 
    <div class="content"> 
 
    I'm a dynamic content 
 
    </div> 
 
    <div class="square"></div> 
 
</div>

Quelle

2017-12-11 Duannx

können Sie CSS die Funktion Calc verwenden. https://www.w3schools.com/cssref/func_calc.asp –

@LucasRosenberger: Ich weiß 'calc()', aber wie benutze ich es, Breite Basis auf Höhe zu berechnen? – Duannx

Entschuldigung missverstanden Ihre Frage. Ich denke, du musst js für diesen Anwendungsfall verwenden. –

Hier ist eine andere Lösung:

Wir können eine innere div innerhalb des Haupt .square div machen erbt seine Mutterhöhe.

Wenn wir dann dieses innere div drehen, wird seine Höhe jetzt seine Breite. Alles, was wir zu diesem Zeitpunkt tun müssen, ist, den Überlauf vom übergeordneten div zu verbergen und eine Übersetzung anzuwenden, damit sie an der richtigen Stelle endet.

#container { 
 
    width: 400px; 
 
    padding: 20px; 
 
    border: solid 1px black; 
 
    position: relative; 
 
} 
 

 
.square { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    overflow: hidden; 
 
    pointer-events: none; 
 
} 
 

 
.square>div { 
 
    background-color: red; 
 
    transform: rotate(-90deg) translate(100%, 0%); 
 
    width: 100vw; 
 
    height: 100%; 
 
    transform-origin: 100% 100%; 
 
}

<div id="container"> 
 
    <div class="content"> 
 
    <textarea> I'm a dynamic content</textarea> 
 
    </div> 
 
    <div class="square"> 
 
    <div></div> 
 
    </div> 
 
</div>

Quelle

2017-12-11 08:47:45 Kaiido

Ordentlich. In Firefox gibt es jedoch eine weiße Linie rechts vom roten Quadrat. –

@MrLister ah? Ich habe es auf FF gemacht (58.b) und merke es nicht. Ihre Zoomstufen liegen bei 100%? – Kaiido

Ja, getestet in verschiedenen Versionen. Es ist OK in Chrome. –

Hier gehen Sie.

Beachten Sie, dass ich contenteditable zum Inhalt div hinzugefügt habe, so dass Sie das Snippet eingeben können, um Textzeilen hinzuzufügen, um den Effekt zu sehen. Dies ist natürlich in Ihrer Version nicht notwendig.

#container { 
 
    width: 400px; 
 
    padding: 20px; 
 
    border: solid 1px black; 
 
    position: relative; 
 
} 
 

 
.square { 
 
    position: absolute; z-index:-1; 
 
    left:0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAANSURBVBhXY/jPwPAfAAUAAf+mXJtdAAAAAElFTkSuQmCC'); 
 
    background-size:contain; background-position:100% 0; 
 
    background-repeat:no-repeat; 
 
}

<div id="container"> 
 
    <div class="content" contenteditable="true"> 
 
    I'm a dynamic content 
 
    </div> 
 
    <div class="square"></div> 
 
</div>

Der Trick besteht darin, dass der Hintergrund ist jetzt ein rotes Quadrat (es ist ein 1 × 1 Bild), die mit contain bemessen ist. Dies ist nicht möglich mit background-color Ich fürchte.

Quelle

2017-12-11 08:21:10

@VXp Wahr, aber aus der Frage, die ich gesammelt habe, dass die OP nur ein rotes Quadrat, Punkt benötigt. Wenn das OP andere Bedürfnisse hat, sollten sie dies erwähnen; dann werde ich sehen, was ich tun kann. –

gut, um fair zu sein, die OP klar, dass er 'wollte ein Quadrat Div erstellen', netter Trick obwohl – am05mhz

@MrLister: Es ist eine wirklich clevere Antwort. Aber es ist nicht was ich will. Mein Hauptzweck ist es, das Seitenverhältnis der div-Basis auf ihrer Höhe zu halten. Netter Trick, aber es hat das Hauptproblem nicht gelöst. Trotzdem danke! – Duannx

mit dynamischer Höhe

Antwort

Verwandte Themen