Innere div die Höhe 100% in einem container, der von der Höhe auto

Ich bin kämpfen, um ein div zu erweitern, voll zu container-Höhe.

Markup:

<div class="container">
  <div class="innerOne inner"></div>
  <div class="innerTwo inner"></div>
</div>

In verschiedenen Fenstern .innerTwo's-Gehalt ist größer als die von .innerOne's, aber ich möchte es im hintergrund auf die gleiche Größe wie .innerTwo's

Stile:

.container {
   width: 100%;
   height: auto;
   background-color: yellow;   

   /* clearfix */
   *zoom: 1;
   &:before,
   &:after {
     display: table;
     content: "";
     line-height: 0;
   }
   &:after {
    clear: both;
   }
}

.inner {
   float: left;
   width: 50%;
   height: 100%;
   background-color: red;
}

Aber die Höhen nicht übereinstimmen. Ich weiß, es kann getan werden, indem der Behälter eine Höhe festlegen, aber das möchte ich nicht tun, da es ist eine ansprechende Website. Ist das möglich? Würde ich eher nicht verwenden, JS.

  • Leider, wenn Sie wollen, um eine bestimmte Höhe auf den container, jeder übergeordnete container muss eine angegebene Höhe von Prozent oder Einheiten.
InformationsquelleAutor Adam Waite | 2013-01-27
  1. 14

    Können Sie display:table-cell - Eigenschaft für dieses. Schreiben wie dieses:

    .container{
    width:100%;
    border:1px solid red;
    display:table;
}
.inner{
    display:table-cell;
    background:green;
    width:50%;
}
.innerTwo{
    background:blue
}

    Überprüfen Sie diese http://jsfiddle.net/XXHTC/

    • Vielen Dank..dieses Stück code hat mir geholfen..
    InformationsquelleAutor sandeep
  2. 0

    Dieser Artikel beschreibt Probleme mit Seitenverhältnissen und Größen im responsive media. Es kann nicht die Antwort auf Ihr spezielles problem, aber der Abschnitt über die Verwendung von prozentualen Polsterung hat mir geholfen, bei Gelegenheit. http://css-tricks.com/rundown-of-handling-flexible-media/

    InformationsquelleAutor Peter Wooster
Schreibe einen Kommentar