css wie Spalten auto fill Hintergrundfarbe auf Höhe 100%

Question

ich machen habe den folgenden Code:

#left { 
 
    float: left; 
 
    width: 180px; 
 
    background-color: #ff0000; 
 
} 
 

 
#right { 
 
    overflow: hidden; 
 
    background-color: #00FF00; 
 
}

<div> 
 
    <div id="left"> 
 
    left 
 
    </div> 
 
    <div id="right"> 
 
    right<br/> down 
 
    </div> 
 
</div>

Was ich versuche zu erreichen ist die linke Spalte machen background-color zu füllen das ganze div. Dies sollte unabhängig von der Höhe der Spalte #right der Fall sein.

bisher habe ich versucht/hinzugefügt

display: flex; 
height: 100% 
flex 1; 

Zum #left Stil, aber es funktioniert nicht.

Dies muss eine CSS-Lösung sein.

Answer 1

Sie können flexbox hier verwenden. Demo:

.container { 
 
    /* become a flex-container */ 
 
    /* flex-items will be stretched vertically by default */ 
 
    display: flex; 
 
} 
 

 
#left { 
 
    width: 180px; 
 
    background-color: #ff0000; 
 
} 
 

 
#right { 
 
    /* occupy remaining width */ 
 
    flex: 1; 
 
    background-color: #00FF00; 
 
}

<div class="container"> 
 
    <div id="left"> 
 
    left 
 
    </div> 
 
    <div id="right"> 
 
    right 
 
    <br/> down 
 
    </div> 
 
</div>

Sie können auch CSS Grid Layout verwenden hier. Demo:

.container { 
 
    /* become a grid-container */ 
 
    display: -ms-grid; 
 
    display: grid; 
 
    
 
    /* first column should occupy 180px and second should occupy remaining width */ 
 
    -ms-grid-columns: 180px 1fr; 
 
    grid-template-columns: 180px 1fr; 
 
} 
 

 
#left { 
 
    background-color: #ff0000; 
 
} 
 

 
#right { 
 
    background-color: #00FF00; 
 
    
 
    /* specify column for IE/Edge explicitly */ 
 
    -ms-grid-column: 2; 
 
}

<div class="container"> 
 
    <div id="left"> 
 
    left 
 
    </div> 
 
    <div id="right"> 
 
    right 
 
    <br/> down 
 
    </div> 
 
</div>

Answer 2

.main-table { 
 
    display: table; 
 
} 
 

 
#left { 
 
    display: table-cell; 
 
    float: none; 
 
    width: 180px; 
 
    background-color: #ff0000; 
 
} 
 

 
#right { 
 
    display: table-cell; 
 
    overflow: hidden; 
 
    background-color: #00FF00; 
 
}

<div class="main-table"> 
 
    <div id="left"> 
 
    left 
 
    </div> 
 
    <div id="right"> 
 
    right<br/> down 
 
    </div> 
 
</div>

So etwas wie Tabelle in diesem Fall helfen Sie können !!

Answer 3

müssen verstehen, warum #left nicht nimmt height von 100% und das ist, weil Sie float:left Eigenschaft in #left verwendet haben. Wenn float left für ein Element verwendet wird, ändert es sich standardmäßig in inline-block und das ist der Grund, dass Sie die Anzeige Ihres übergeordneten div ändern müssen, um dies zu beheben.

ist hier unter Verwendung von Flex,

div{ 
 
    display:flex; 
 
} 
 
div #left { 
 
    width: 180px; 
 
    background-color: #ff0000; 
 
} 
 

 
div #right { 
 
    flex:1; 
 
    overflow: hidden; 
 
    background-color: #00FF00; 
 
}

<div> 
 
    <div id="left"> 
 
    left 
 
    </div> 
 
    <div id="right"> 
 
    right<br/> down 
 
    </div> 
 
</div>

das Lesen zu verstehen, wie float funktioniert.