CSS -floating height 100% - Brett vorm Kopf

**marq** · 27.03.2016, 15:12

Hallo leibe Community,

ich habe gerade irgendwie ein Brett vorm Kopf und ich hoffe mir kann bitte jemand helfen. Ich versuche das Problem mal so einfach wie möglich darzustellen.

Ich habe ein Layout welches wie folgt aufgebat ist:

-WRAPPER
--CONTAINER
-----KOPFZEILE
-----RECHTE SPALTE
-----HAUPT CONTENT
--RECHTE SPALTE

Das ist soweit ja auch alles kein Problem:

Code:

<!DOCTYPE html>
<html>
<head>
  <title>PROBLEM</title>
<style>

html,body {
  height: 100%;
  margin:0;
}

#wrapper{
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  height: 100%;
  }

#container {
  float:left;
  height: 100%;
  width: 960px;
  border: 1px #000 solid;
  padding: 0px 20px 0px 20px;
  height: 100%;
  background-color: #fff;
}

#header {
  background-color: #ccc;
}


#left{
  float:left;
  height: 100%;
  width:200px;
  background: red;
  border-right: 20px #000 solid;
  
}

#main{
  float:left;
  width:740px;
  height: 100%;
  background: green;
}

#right {
  float:left;
  width: 100px;
  background-color: blue;
}
</style> 

<body>
<div id="wrapper">

  <div id="container">
 
    <div id="header">
        HEADER <br />
        HEADER <br />
        HEADER <br />
        HEADER <br />
        HEADER <br />
        HEADER <br />
    </div>
 
     <div id="left">
      LINKS
     </div>
     <div id="main">
      CONTENT
    </div>
</div>

  <div id="right">
    RECHTS
  </div>

</div>

</body>
</html>

Doch nun, wenn man halt etwas runter scrollt - reicht halt die höhe vom #container nicht, und #left und #main vergrößern #container halt nicht weiter. Also ich möchte, dass die linke Spalte die restliche Höhe der Seite ausfüllt, weil ich den Border der linken spalte für das Layout brauche. Ich hoffe irgenwer versteht was ich meine

Mein Problem hier kurz als Grafik dargestellt: brettvormkopf.jpg

LG
MarQ

**Spooky** · 27.03.2016, 15:14

Du musst das height:100%; vom #wrapper, #container, #left, #right, #main entfernen.

**marq** · 27.03.2016, 15:21

Sorry,
ich habe gerade mein Betrag nochmal editiert, also ich möchte ja gerade, dass die linke Spalte die restliche höhe der Seite ausfüllt, weil ich den Border der linken Spalte für das Layout brauche.

Nochmal als kleiner Nachtrag hier ein weiteres Bild, welches das Problem darstellt: f_r.jpg

LG
MarQ

**Spooky** · 27.03.2016, 15:36

Zu den Spalten mit gleicher Höhe gibt es verschiedene Lösungsansätze - kannst du hier im Forum oder auf Google mal suchen. Ich verwende mittlerweile meist eine JavaScript Lösung - also per JavaScript ermitteln, welche der drei Spalten (#left, #main, #right) am höchsten ist und dann die min-height für alle Spalten dementsprechend setzen. Das height:100%; musst du auf jeden Fall von den zuvor erwähnten Elementen entfernen.

**marq** · 27.03.2016, 15:59

Zitat von Spooky

Zu den Spalten mit gleicher Höhe gibt es verschiedene Lösungsansätze - kannst du hier im Forum oder auf Google mal suchen. Ich verwende mittlerweile meist eine JavaScript Lösung - also per JavaScript ermitteln, welche der drei Spalten (#left, #main, #right) am höchsten ist und dann die min-height für alle Spalten dementsprechend setzen. Das height:100%; musst du auf jeden Fall von den zuvor erwähnten Elementen entfernen.

Hey Spooky,

danke

google habe ich auch schon gequält und etwa schon etwa 2 Stunden vorher daran rumgeschruppt, es hätte ja sein können, dass es wirklich DIE Lösung gibt. Auf die Idee mit Javascript bin ich am Anfang auch gekommen, dann kam mir das aber irgendwie zu "dirty" vor. Naja, nachdem du damit jetzt auch um die Ecke kamst - Problem jetzt mit 9 Zeilen jQuery gelöst :-)

Code:

<!DOCTYPE html>
<html>
<head>
  <title>PROBLEM</title>
<style>

html,body {
  margin:0;
}

#wrapper{
  width: 1200px;
  height: 100%;
  margin: 0 auto;

  }

#container {
  float:left;
  height: 100%;
  width: 960px;
  border: 1px #000 solid;
  padding: 0px 20px 0px 20px;
  background-color: #fff;
}

#header {
  background-color: #ccc;
}


#left{
  float:left;
  width:200px;
  background: red;
  border-right: 20px #000 solid;
  
}

#main{
  float:left;
  width:740px;
  background: green;
}

#right {
  float:left;
  width: 100px;
  background-color: blue;
}

</style> 

<body>
<div id="wrapper">

  <div id="container">
 
    <div id="header">
        HEADER <br />
        HEADER <br />
        HEADER <br />
        HEADER <br />
        HEADER <br />
        HEADER <br />
    </div>
 
     <div id="left" class="check">
      LINKS
     </div>
     <div id="main" class="check">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. </p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. </p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur  adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. </p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. </p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. </p>

      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis eveniet distinctio ratione, temporibus accusantium provident vel ipsa. </p>
    </div>
</div>

  <div id="right">
    RECHTS
  </div>

</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var highest_element = 0;
$('.check').each(function() {
    if ($(this).height() > highest_element) {
        highest_element = $(this).height();
    }
});
$('.check').each(function() {
    $(this).height(highest_element);
});
</script>

</body>
</html>

LG
MarQ

**tab** · 27.03.2016, 16:33

Ja, gibt es hier im Forum auch irgendwo einen uralten Thread zur jQuery-Lösung. Mit Beiträgen hauptsächlich von Andreas und Spooky, wenn ich mich recht erinnere. Wir haben uns damals an die vollständig funktionierende Lösung rangetastet

. Alternativlösung, wenn man wirklich nur die Border braucht: Eine entsprechende Hintergrundgrafik im #container (Stichwort: faux columns).

**mlweb** · 27.03.2016, 16:50

Oder eine Lösung mit display: flex. Nutze ich inzwischen sehr gern. Muss man sich nur etwas Einarbeiten und ggf. benötigt man für ältere Browser Fallbacks.

**Tinker2** · 27.03.2016, 17:24

Die Flexbox-Variante würde ich auch empfehlen.
Laut caniuse.com kommen mittlerweile ausreichend Browser damit klar, und nach kurzem reindenken möchte man echt nicht drauf verzichten.
Hier was zum rumspielen: http://the-echoplex.net/flexyboxes/