Zwingen element die gleiche Höhe haben als Geschwister-element?

Habe ich das folgende markup:

HTML

<div class="container">
    <div class="sidebar">
        info <br/>
        info <br/>
    </div>
    <div class="post">
        post <br/>
        post <br/>
        post <br/>
        post <br/>
    </div>
</div>

CSS

container {
    float:left;
    width:100%;
}
.sidebar {
    float:left;
    clear:both;
    background-color: #eee;
    width:150px;
}
.post {
    background-color: #ccc;
    margin-left:150px;
}

Wie konnte ich Kraft sidebar zu erlassen, die Höhe der post, die mit HTML/CSS?
Sowohl die sidebar und Beitrag die Höhe kann sich ändern in der Größe, aber die post ist die Höhe, die ist immer größer als die sidebar ist.

JSFiddle: http://jsfiddle.net/KK4Yc/

InformationsquelleAutor Nick | 2012-09-18
  1. 0

    Ok ich bin nicht ganz sicher, warum die anderen Poster gehen zu Längen, dass Sie sind, Sie müssen Sie nur nutzen-den nutzen des parent->child Beziehung, die dom-Elemente automatisch:

    .container {
  overflow: hidden;
  border: 1px solid #ff0000;
}

.sidebar {
  background-color: #eee;
  float: left;
  clear: both;
  width: 150px;
}

.sidebar-wrapper {
  background: #eee;
  overflow: hidden;
}

.post {
  margin-left: 150px;
  background-color: #ccc;
}

    Oben ist, alle css-sollten Sie (solange Sie ein 'Feste Farbe' oder 'sich wiederholenden hintergrund Bild' side-bar) und das folgende markup:

    <div class="container">
  <div class="sidebar-wrapper">
    <div class="sidebar">
      info <br/>
      info <br/>
    </div>
    <div class="post" style="background: green;">
      post <br/>
      post <br/>
      post <br/>
      post <br/>
    </div>
  </div>
</div>

    Offensichtlich (und eher störend aus einer HTML - /CSS-Perspektive) wenn Sie keine 'Feste Farbe' oder 'wiederholen hintergrund" Regionen dann haben Sie zu gehen, mit j08691 die javascript-Ansatz oder Diodeus Feste Höhe container-Ansatz (obwohl Diodeus verändert zu haben scheint-code jetzt und enthalten, die Teil des caligula Antwort-ich denke, durch Zufall?).

    InformationsquelleAutor Pebbl
  2. 2

    Kann es nicht ohne JavaScript, es sei denn, Sie imitieren es mit faux columns. Wenn Sie jQuery verwenden möchten, es ist ein one-liner:

    ​$('.sidebar').height($('.post').height());​

    jsFiddle-Beispiel

    InformationsquelleAutor j08691
  3. 0

    Ist es möglich via JS, als j08691 sagte.
    Aber Sie können versuchen, verschiedene Ansatz, mit reinem css für etwa einen grauen bg-image auf die .container, so dass es Aussehen wird wie die Seitenleiste erstreckt sich auf der Unterseite, oder fügen Sie zusätzliche element mit dem gleichen Zweck (FIDDLE):

    .container {
    float:left;
    width:100%;
    overflow:hidden;
    position: relative;
}
#bg {
    background-color: #eee;
    width:150px;
    height: 100%;
    position: absolute; 
}
.sidebar {
    float:left;
    clear:both;
    background-color: #eee;
    width:150px;
    height: 100%;
    position:relative;
}


<div class="container">
    <div id="bg"></div>
    InformationsquelleAutor user907860
  4. 0

    Wenn der container eine Feste Höhe, dann ja, ansonsten müssen Sie, JavaScript zu verwenden. 

       body, html { height:100% }

    .container {
        width:100%;
        height:500px;
        border:1px solid #ff0000
    }

#bg {
    background-color: #eee;
    width:150px;
    height: 100%;
    position: absolute; 
}
.sidebar {
    float:left;
    clear:both;
    background-color: #eee;
    width:150px;
    height: 100%;
    position:relative;
}
    • Meinst du, um Körper und html zu height:100%; ? Ich weiß, dies ist erforderlich, wenn Sie ausrichten von Elementen auf die gesamte Höhe der Seite - aber zum einrasten gleichgeordneten Elemente auf die Höhe der container, die Sie wohl gemeint .sidebar, .post { height: 100%; } Nein?
    • Nein, Sie müssen wirklich den Körper, in html gibt es oder wird es nicht funktionieren.
    • Ok, nun, ich denke, wir sind einverstanden nicht einverstanden, dass man, aber Sie sind noch immer fehlende Einstellung der Höhe .sidebar und .post zu 100%. Ansonsten die Elemente gerade bleiben Ihre voreingestellte Höhe, und nicht tun, was Nick gefragt hat.
    InformationsquelleAutor Diodeus - James MacFarlane
Schreibe einen Kommentar