Ich habe ein div mit dem nicht mit Inhalt wächst

Question

Ich habe ein Haupt-Div, das eine Hintergrundfarbe hat. Ich habe ein Login-Fenster in diesem div mit einer Breite: 675px; Höhe: 300px; Haben Sie auch Ränder für den oberen/unteren Rand des Fensters. Der Hintergrund wächst nicht, um das div unterzubringen. hier ist der Code, den ich bin mit:

<div class="main"> 
    <div class="topLine"></div> 
    <div class="loginWindow"> 
     <div class="logo"> 
     TEXT 
     </div> 

    </div> 

    <div style="clear: both"></div> 

    </div> 

CSS:

.main { 
    background: linear-gradient(to bottom right, #152d47, #467ba7); 
    width:100%; 
    height:100px; 
    padding-top:8px; 
    overflow:hidden; 
} 

.loginWindow { 
    margin:0 auto; 
    width:675px; 
    margin-top:172px; 
    margin-bottom:115px; 
    height:300px; 
} 

Hier ist der jsfiddle: https://jsfiddle.net/grem28/uj5zbhf7/

Answer 1

Höhe von Eltern entfernen Wenn Sie möchten, dass es wachsen oder ändern Sie es in min-height

Answer 2

gut verwenden overflow:visible; statt overflow:hidden;

Answer 3

Ändern Sie Ihre Höhe auf 100% und entfernen Sie den Überlauf oder ändern Sie ihn in sichtbar. Hier ist das CSS mit Überlauf auskommentiert.

.main { 
    background: linear-gradient(to bottom right, #152d47, #467ba7); 
    width:100%; 
    height:100%; 
    padding-top:8px; 
    /* overflow: visible; */ 
} 

Hier ist die aktualisierte jsfiddle: https://jsfiddle.net/uj5zbhf7/4/