Wie kann Höhe in CSS reagiert werden?

Question

Ich habe eine html wie

<div class="container"> 
    <div class="content-1"></div> 
    <div class="content-2"></div> 
</div> 

ich es wie arbeiten wollen, wenn die Höhe der content-1 ist 480px, die content-2 wird die Höhe des content-1 folgen. Meine Breite funktioniert nur gut, aber meine Höhe folgt nicht.

Wie es in CSS zu tun?

mein CSS-Code ist

.container{ 
clear: both; 
} 
.content-1{ 
width:66.66%; 
position: static; 
background-image: url("../images/path1"); 
background-repeat: no-repeat; 
background-size: cover; 
} 

.content-2{ 
width:33.33%; 
position: static; 
background-image: url("../images/path2"); 
background-repeat: no-repeat; 
background-size: cover; 
} 

Answer 1

\t 
 
.flex-container { 
 
    padding: 0; 
 
    margin: 0; 
 
    list-style: none; 
 
    
 
    display: -webkit-box; 
 
    display: -moz-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    
 
    -webkit-flex-flow: row wrap; 
 
    justify-content: space-around; 
 
} 
 

 
.flex-item { 
 
    background: tomato; 
 
    padding: 5px; 
 
    width: 200px; 
 
    
 
    margin-top: 10px; 
 
    
 
    color: white; 
 
    font-weight: bold; 
 
    font-size: 3em; 
 
    text-align: center; 
 
word-break: break-all; 
 
}

<div class="container flex-container"> 
 
    <div class="content-1 flex-item">orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div> 
 
    <div class="content-2 flex-item">1</div> 
 
</div>

Answer 2

Sie mehr 1-Klasse, dass hinzufügen müssen:

.height{ 
 
    height: 100px; 
 
}

<div class="container"> 
 
    <div class="content-1 height"> 
 
    <div class="content-2 height"> 
 
</div>

Answer 3

können Sie versuchen, diesen Code:

.container { 
    display: table; 
} 
.content-1, .content-2 { 
    display: table-cell; 
} 

Answer 4

.container { 
 
    display: flex; 
 
    border: 2px solid red; 
 
} 
 

 
.content-1, .content-2 { 
 
    flex: 1; 
 
    background-color: grey; 
 
    border: 1px solid black; 
 
}

<div class="container"> 
 
<div class="content-1">Content 1 <br> Has more text than content 2</div> 
 
<div class="content-2">Content 2</div> 
 
</div>

Answer 5

können Sie CSS3 Flexbox in diesem Fall verwendet werden. container Klasse wird display:flex haben und alle Ihre untergeordneten Klasse wird auf die gleiche Höhe festgelegt.

.container { 
 
    display:flex; 
 
    
 
} 
 

 
.content-1 { 
 
    border:1px solid #000000; 
 
    width:50%; 
 
    height:480px; 
 
    } 
 

 
.content-2 { 
 
    border:1px solid #ff0000; 
 
    width:50%; 
 
    }

<div class="container"> 
 
    <div class="content-1">Content 1</div> 
 
    <div class="content-2">Content 2</div> 
 
</div>

Answer 6

Ihre internal div tags schließen.

<div class="container"> 
    <div class="content-1"></div> 
    <div class="content-2"></div> 
</div> 

können Sie Höhe eingestellt für Ihre parent div heißt .container:480px wie unten und child element nehmen, die automatisch als 100%.

.container{ 
width:100%; 
height:480px; 
} 

.container > .content-1{ 
width:100%; 
height:100%; 
} 

.container > .content-2{ 
width:100%; 
height:100%; 
} 

(oder) jQuery verwenden Höhe von .content-1 zu erhalten und festgelegt, dass für .content-2

$(document).ready(function(){ 
var height = $(".container > .content-1").css("height"); 
$(".container > .content-2").css({ 
height : height, 
background : "#f22" 
}); 
}); 

Answer 7

Versuchen Display Tabelle:

.container { 
    display: table; 
    height: 480px; 
} 
.content-1 { 
    display:table-cell; 
    float: none; 
    width: 50%; 
    height: 100%; 
} 
.content-2 { 
    display: table-cell; 
    float: none; 
    width: 50%; 
    height: 100%; 
}