Legen Sie div Breite und Größe ändern, wenn es nicht für absolut positionierte Div auf dem Bildschirm passt

Question

Ich versuche, eine feste Breite zu einem Div festlegen, zum Beispiel 200px. Ich möchte das Div dann immer 200px haben, außer wenn das aktuelle Fenster nicht genug Platz dafür hat.

div { 
 
    border: 2px solid; 
 
} 
 
.fixedWidth { 
 
    width: 200px; 
 
    position: absolute; 
 
} 
 
.noWidth { 
 
    position: absolute; 
 
}

<div class="fixedWidth"> 
 
    lalala lala lalala lalala 
 
</div> 
 
<br /> 
 
<br /> 
 
<div class="noWidth"> 
 
    alala lala alal lala 
 
</div>

Dann kann das folgende Problem gesehen werden, wenn der Bildschirm kleiner wird:

Die erste div die Größe nicht und Text außerhalb des Bildschirms.

Ich bemerkte, das Verhalten, das ich versuche zu erreichen, ist im Grunde Max-Breite für ein normales div, aber das funktioniert nicht für absolut positionierte divs.

Da für normale divs ist es möglich, dies ohne Medienabfragen zu tun, suche ich nach einer Lösung ohne Medienabfragen, aber ich bin mir nicht sicher, ob dies möglich ist.

Answer 1

hinzufügen sollten Sie in der Lage sein, folgendes zu tun:

.fixedWidth { 
    max-width:200px; 
    width: 100%; 
} 

Dies bedeutet, dass es 200px ist, bis der Bildschirm nicht groß genug ist

Answer 2

, wenn Sie die Breite Inhalt erhalten Breite von aktuellem Inhalt zu folgen, sollten Sie Klasse Stil machen, die Breite 100% sry hat für schlechtes Englisch es Materie doesnot, welche Art von Position Sie

Answer 3

.fixedWidth { 
    max-width: 100%; 
    position: absolute; 
    width: 200px; 
} 

wählen

nur max-width:100%

Answer 4

Versuchen Sie, diese Klasse auf das Element mit fester Breite zu setzen.

#wrapper { 
    max-width: 200px; 
} 

Answer 5

Sie müssen ein weiteres div mit der relativen Position innerhalb des div mit der absoluten Position hinzufügen.

div { 
 
    border: 2px solid; 
 
} 
 
.fixedWidth { 
 
    position: absolute; 
 
} 
 
.sizefit{ 
 
    position:relative; 
 
    max-width:200px; 
 
    width:100%; 
 
} 
 
.noWidth { 
 
    position: absolute; 
 
}

<div class="fixedWidth"> 
 
<div class="sizefit"> 
 
lalala lala lalala lalala 
 
</div> 
 
    
 
</div> 
 
<br /> 
 
<br /> 
 
<div class="noWidth"> 
 
    alala lala alal lala 
 
</div>