0

フッターの配置に少し問題があります。2 つの横に並んだ列の上に浮かぶはずです ( http://imgur.com/dfiT1 )。問題は、2 つの列の境界線がフッターの 2 つの部分の境界線と整列するように適切に配置する必要があることです。また、両方の列に 100px の最小マージンが必要です。ページのコンテンツが非常に少ないか多い場合、フッターはいずれかの列のコンテンツの上に浮かびません。

追加のラッパー、clearfix、高さ調整用のjqueryを使用して同僚とこれを解決しようとしましたが、解決策が見つからないようです。

つまり、フッターは、大小の解像度で同じ位置に固執する必要があり、両方の列でマージンを最小限に抑える必要があります

4

2 に答える 2

0

私の意見では、フッターを 2 つの列の外側に配置するのが最善の解決策です。ただし、変更できない制約がある場合があることはわかっているため、可能な解決策は次のとおりです。

HTML

     <div class="wrapper"><div id="column1" class="column">
         <div class="content">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisl purus, lobortis et adipiscing non, vestibulum et tortor. Praesent aliquam placerat enim sit amet blandit. In ipsum dui, accumsan at hendrerit nec, tempus in augue. Etiam molestie, orci a feugiat tempus, nunc quam posuere libero, et ultrices libero sem porta arcu. Donec varius, massa at feugiat accumsan, mi lacus aliquam arcu, id faucibus arcu felis et sapien. Praesent sit amet tortor nibh. Nam mollis, ante quis iaculis fringilla, ante sapien dignissim ligula, in dignissim urna nisl ut ante. Mauris eget diam justo, nec tempor justo. Donec vel eros eget risus rhoncus dapibus. Nullam at felis faucibus orci molestie feugiat sit amet ut augue. Vestibulum at tellus tortor, non tempus quam. Phasellus adipiscing ante a purus congue ultrices in non justo. Ut ullamcorper porttitor quam, sit amet tincidunt mauris hendrerit at.
         </div>
         <div class="footer">
             Donec facilisis accumsan nisl
         </div>
     </div><div id="column2" class="column">
         <div class="content">
             Aenean pharetra sagittis ipsum, vitae pulvinar nunc aliquet ut. Fusce sit amet elit dui, a vulputate risus. Maecenas in laoreet tortor.
         </div>
         <div class="footer">
             Pellentesque malesuada ligula eget justo
         </div>
     </div>
 </div>

CSS

 html, body, .wrapper {
   margin:0;
   border:0;
   outline:0;
 }

 .column {
   display:inline-block;
   margin:0;
   padding:0;
   vertical-align:top;
 }

 #column1 {
   width: 30%;
   background-color:teal;
 }

 #column2{
   width: 70%;
   background-color:coral;
 }


 .wrapper{
   position: relative;
   background-color: black;
   padding-bottom: 200px;
 }

 .footer {
   position: absolute;
   bottom: 50px;
   background-color: silver;
 }

 #column1 .footer {
   right: 70%;
 }

 #column2 .footer {
   left: 30%;
 }

ライブデモ

他の解決策もありますが、フッターの高さが一定である限り、これが最も簡単に思えます。

于 2012-05-22T15:06:33.567 に答える
0

min-height: 100%; を追加してみてください。両方の列に、同じ div に配置します。

于 2012-05-22T07:58:43.760 に答える