0

我在放置页脚时遇到了一些问题。它应该漂浮在 2 个并排的列之上（http://imgur.com/dfiT1）。现在的问题是，它需要很好地对齐，以便 2 列的边框与页脚的 2 部分的边框对齐，并且，它需要在两列上都有 100px 的最小边距，这样当页面内容很少或很多时，页脚不会浮动在任一列的内容之上。

我已经尝试通过使用额外的包装器、clearfix、jquery 来调整高度来与同事解决这个问题，但我们似乎找不到解决方案。

所以简而言之：页脚需要在大小分辨率中保持相同的位置，两列的边距顶部最小

4

2 回答 2

0

在我看来，最好的解决方案是将页脚放在两列之外。但我知道有时有些限制是您无法更改的，因此可能的解决方案是：

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