css - 100% 2 列の高さの CSS 問題!

Question

このレイアウトを使用して、2 列の流動的な Web ページを作成しています。

私ができないように見えるのは、レイアウトの両方の列の高さが 100% になるようにして、フッターをページの一番下に押し込むことです!

この効果を達成するための最良の方法は何ですか?

前もって感謝します！

Answer 1

前回これについて読んだとき、最良の答えはdisplay: table;メイン コンテナーと display: table-cell;各列に対するものでした。これにより、列が指定した高さになります。

#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

うまくいけば、これはあなたが探しているものです：

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

Answer 3

別のレイアウトを試してみてください。クロスブラウザー ソリューションをハックしようとして時間を無駄にする必要はありません。
これはあなたが必要としているもののようですが、他のものを見つけることができると確信しています: http://www.savio.no/examples/three-column-layout-6.asp

Answer 4

個人サイトの CSSファイルで次のことを行います。

#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;
}

また、ネストされたdivタグの邪魔になるものはほとんどありません。私は、要素を互いに浮かせることを好みます。

Answer 5

Matthew James Taylorの投稿でjsfiddleを作成しました。私にとってはとても役に立ちました。これは 2 列用に作り直しても問題ないと思います。

<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>

</p>

#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 6

2 つの div タグがあり、それぞれが隣り合って浮動する列としてあり、別の div タグがフロートをクリアし、最後に別の div がフッターになります。

<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>

これで、3列にするのも楽です。

<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>

Answer 7

ここに別の方法があります...

<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 8

試してみてください：overflow:hidden;ラップで。お役に立てば幸い