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

Hier ist eine andere Möglichkeit...

<div id="container">
    <div id="col1"></div>
    <div id="col2"></div>
</div>
<div id="footer"></div>

<style type="text/css"><!--
    body { height: 100% }
    #container { height: 100% }
    #col1 { height:100%; float:left; width: 70% }
    #col2 { height:100%; float:right; width: 30% }
    #footer { height: 50px; clear: both }
--></style>

Answer 2

Gerade gemacht jsfiddle von Matthew James Taylor Beitrag . Für mich war es sehr nützlich. Ich denke, dies ist kein Problem, für zwei Spalte neu gemacht.

<div id="container3">
<div id="container2">
    <div id="container1">
        <div id="col1"><p>Column 1</p>
            <p>Nunc egestas, vut mus hac diam lacus lacus nisi odio,
               turpis dictumst   mattis! Turpis ac ut nec nec et augue, in nec turpis 
               hac quis risus vel risus pid ridiculus purus urna ultrices ac turpis. In,    
               magna odio mattis! Ultricies? Odio nec odio enim porta urna phasellus 
               proin in lacus! Dignissim eros, ac duis porttitor dapibus et vel sed est?
               Nec placerat egestas, nunc rhoncus scelerisque sit sit, magna elementum 
               eu ac, montes dolor ultrices eros velit! Urna dignissim. Enim, aliquam ut    
               porta etiam amet dolor in natoque? Integer nunc? Magnis, auctor sit nunc 
               in nec, dictumst 
               pulvinar proin! In nisi pulvinar penatibus lorem nec, tempor porta 
               ultricies, et monte.a asdfjasdjfklasdfasdfljsdfkj</p>
        </div>
        <div id="col2">
            <p>Column 2 </p>
            <p>Nunc egestas, vut mus hac diam lacus lacus nisi odio,
               turpis dictumst   mattis! Turpis ac ut nec nec et augue, in nec turpis 
               hac quis risus vel risus pid ridiculus purus urna ultrices ac turpis. In,    
               magna odio mattis! Ultricies? Odio nec odio enim porta urna phasellus 
               proin in lacus! Dignissim eros, ac duis porttitor dapibus et vel sed est?
               Nec placerat egestas, nunc rhoncus scelerisque sit sit, magna elementum 
               eu ac, montes dolor ultrices eros velit! Urna dignissim. Enim, aliquam ut    
               porta etiam amet dolor in natoque? Integer nunc? Magnis, auctor sit nunc                                      
        </div>
        <div id="col3">Column 3</div>
    </div>
</div>

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

Answer 3

Versuchen Sie es: overflow:hidden; auf dem Umschlag. Hoffentlich hilft das