100% 2-Spalten-Höhe CSS Problem!

Question

Ich benutze das Layout um eine 2-Spalten-Webseite zu erstellen.

Was ich nicht zu tun scheine, ist, dass die beiden Spalten im Layout eine Höhe von 100 % haben, wodurch die Fußzeile an den unteren Rand der Seite verschoben wird!

Wie lässt sich dieser Effekt am besten erzielen?

Vielen Dank im Voraus!

Answer 1

Als ich das letzte Mal darüber gelesen habe, war die beste Antwort display: table; für den Hauptcontainer und display: table-cell; für jede Spalte. Dadurch erhält die Spalte die von Ihnen angegebene Höhe.

#wrap {
  background: orange;
  display: table;
  height: 88%;
  width: 550px;
  padding: 11px;
}
#col1 {
  display:table-cell;
  background: #808080;
  width: 222px;
  border: 1px solid #FFF;
  padding: 12px;
}
#col2 {
  display:table-cell;
  background: #808080;
  width: 111px;
  border: 1px solid #FFF;
  padding: 12px;
}

<!-- this container will determine the height of both columns --> 
<div id="wrap">

  <div id="col1">
    <p>Lorem ipsum something or other.</p>
  </div>

  <div id="col2">
    <p>More Lorem than ipsum.</p>
  </div>

</div>
<!-- end container -->

Answer 2

Ich hoffe, das ist, was Sie suchen:

http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm

Answer 3

Versuchen Sie ein anderes Layout, warum sollten Sie Ihre Zeit mit dem Versuch verschwenden, eine Cross-Browser-Lösung zu hacken?
Dies scheint das zu sein, was Sie brauchen, aber ich bin sicher, dass Sie andere finden können: http://www.savio.no/examples/three-column-layout-6.asp

Answer 4

Im CSS meiner persönlichen Website mache ich Folgendes Datei :

#footer
{width: 100%;
bottom: 0px;
padding-top: .5em;
padding-bottom: .5em;
background-color: #ffffff;
border-top: 1px #000000 solid;
text-align: center;
margin-top: .25em;
}

Außerdem habe ich wenig verschachtelte div Tags. Ich ziehe es vor, dass die Elemente umeinander herum schweben.

Answer 5

2 div-Tags haben, jedes als eine Spalte, die nebeneinander schwebt, und ein weiteres div-Tag, um die Schwebezustände zu löschen, dann schließlich ein weiteres div, das die Fußzeile ist:

<div id="col1"></div>
<div id="col2"></div>
<div clear="c"></div>
<div id="footer"></div>
<style type="text/css"><!--
#col1{
   float:left;
   width:80%;
}
#col2{
   float:right;
   width:20%;
}
.c{
   clear:both;
}
#footer{}
--></style>

Damit ist es auch einfacher, eine 3-Spalten-Ansicht zu erstellen.

<div id="col1"></div>
<div id="col2"></div>
<div id="col3"></div>
<div clear="c"></div>
<div id="footer"></div>
<style type="text/css"><!--
#col1{
   float:left;
   width:200px;
}
#col2{
   float:right;
   width:300px;
}
#col3{
   width:400px;
   margin-left:200px;
   margin-right:300px;
}
.c{
   clear:both;
}
#footer{}
--></style>