CSS hoogte - hoogte ander object

Status
Niet open voor verdere reacties.

danrik

Gebruiker
Lid geworden
12 jan 2010
Berichten
270
Hallo hallo,

Ik heb op mijn site een paar divs die ik op automatische hoogte heb staan.

Nu wil ik eigenlijk een DIV maken die als hoogte 100% - de hoogte van de DIVS die automatisch zijn.

Iemand een idee?

Alvast bedankt!

Ik wil dus bij onderstaande code zorgen dat kaart-content 100% - hoogte van ul.sidenav is
Code:
ul.sidenav {
        width:100%;
        height:auto;
        position:relative;
    }

Code:
div#kaart-content {
    margin-left:0;
    height: 1000px;
    }
 
Laatst bewerkt:
2 vraagjes:
- Is 1 van de 2 altijd hoger als de ander? Of is dit niet vooraf te zeggen?
- Hebben beide dezelfde achtergrondkleur?
 
2 vraagjes:
- Is 1 van de 2 altijd hoger als de ander? Of is dit niet vooraf te zeggen?
- Hebben beide dezelfde achtergrondkleur?

De sidenav is altijd hoger dan de content. De achtergrond is verschillend. Dit maakt echter niet veel uit omdat de content DIV gevuld is met een Google maps kaart die 100% van de hoogte gebruikt.
 
html
Code:
<body>
  <div id="wrapper">
    <div class="col-1-2">
      <div class="col-1">
        <ul class="sidenav">
          <li>Linker tekst</li>
          <li>Lorem ipsum dolor sit amet.</li>
          <li>Morbi arcu ipsum.</li>
          <li>Donec eros mi viverra.</li>
          <li>Lorem ipsum dolor sit amet.</li>
        </ul>
      </div>
      <div class="col-2">
        <div id="kaart-content" class="text">
          Rechter tekst<br>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Morbi arcu ipsum, suscipit non placerat non, egestas et diam.
          Donec eros mi, viverra et dictum id, vulputate vitae leo.
        </div>
      </div>
    </div>
  </div>
</body>
css
Code:
html, body {
  height: 100%;
}
body {
  margin: 0;
  font: normal 14px/1.43 sans-serif;
}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
#wrapper {
  max-width: 800px;
  margin: 0 auto;
}
.col-1-2 {
  width: 100%;
  position: relative;
}
.col-1 {
  width: 25%;
  background: #faa;
}
.col-2 {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 75%;
  background: #afa;
}
ul.sidenav,
ul.sidenav > li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
div#kaart-content {
  width: 100%;
}
De background is alleen ter illustratie.

Zoals je aangaf moet de linker kolom langer zijn dan de rechter kolom.

Suc6. Have fun.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.

Nieuwste berichten

Terug
Bovenaan Onderaan