Anstatt Höhe einzustellen: 100%; Kann ich einfach Höhe gehen: 2000px;

Question

Ich habe col-sm-1 und col-sm-9 und col-sm-3. Ich möchte, dass sie eine volle Größe haben. Wenn ich Höhe: 100% mache, wird die Höhe nur dann voll, wenn ich Inhalte in ihnen habe. Ich möchte, dass die Höhe auch dann voll ist, wenn sie leer ist. Also habe ich gerade height:2000px; background-color:grey; gemacht und jetzt sieht das so aus, wie ich es möchte. Aber selbst ein Anfänger wie ich weiß, dass dies nicht der beste Weg ist. Darf ich Höhe gehen: 2000px; und damit umgehen?

Answer 1

einfach die Flexbox verwenden.

Weisen Sie ihrem Eltern eine Klasse .flexbox zu, stellen Sie das CSS wie folgt ein.

.flexbox .col { 
    flex: 1; 
} 

Answer 2

Die Höhe 100% füllt den Raum auch dann, wenn der Inhalt nicht vorhanden ist, aber möglicherweise nicht funktioniert, weil die Höhe des übergeordneten Containers nicht festgelegt wurde. Dazu müssen Sie die Höhe des Elternelements in einem festen Pixel definieren oder die Elternhierarchie auf 100% setzen. Kurz gesagt können Sie dieses Problem beheben, indem nur die Höhe zu 100% der html,body Einstellung:

html,body{ 
    height: 100%; 
} 
.your_element{ 
    height: 100%; 
} 

Und hier ist eine Demo:

html,body{ 
 
    height: 100%; 
 
    } 
 
div{ 
 
    height: 100%; 
 
    background-color: red; 
 
    }

<div>some content</div>