梳理div和footer之间的差距

Question

我有几个关于我的DIV布局的问题。

我似乎无法理解为什么my layout在divs和footer之间存在巨大差距。我怎样才能将它排列在页脚下方？

其次，看起来用于制造框2,3,4的方法都是高度相关的（它们在底部似乎有点偏斜）。我该如何做到这一点？现在我只是用高度百分比做一些猜测工作。

在此先感谢。

HTML：

<div id="wrapper"> 
    <div class="logo">logo</div> 

    <div id="header"> 
     <a href="#">link 1</a> 
     &nbsp;|&nbsp; 
     <a href="#">link 2</a> 
     &nbsp;|&nbsp; 
     <a href="#">link 3</a> 
     &nbsp;|&nbsp; 
     <a href="#">link 4</a> 
    </div> 

    <div style="clear: both;"></div> 

    <div class="column" id="first-column"> 
     <div class="window" id="window-1">1</div> 
     <div class="window" id="window-2">2</div> 
    </div> 

    <div class="column" id="second-column"> 
     <div class="window" id="window-3">3</div> 
    </div> 


    <div class="column" id="third-column"> 
     <div class="window" id="window-4">4</div> 
    </div> 
    <div style="clear: both;"></div> 
    <div class="footer">footer</div> 
</div> 

CSS：

body, html{ 
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif; 
    height: 100%; 
} 

#wrapper { 
    margin: 0 auto; 
    max-width: 1212px; 
    min-height: 540px; 
    min-width: 784px; 
    position: relative; 
    height: 100%; 
} 

#header{ 
    text-align:right; 
    padding:5px; 
    font-size:10px; 
    padding-right: 30px; 
} 

#first-column{ 
    width: 20%; 
    padding-left: 5px; 
    height: 100%; 
} 

#second-column{ 
    width: 50%; 
    height: 100%; 
} 

#third-column{ 
    width: 25%; 
} 

.window{ 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    border:1px solid #CECECE; 
    width:100%; 
} 

#window-1{ 
    height:43.5%; 
} 

#window-2{ 
    margin-top:10px; 
    height:43.5%; 
} 

#window-3{ 
    height:87%; 
    padding-bottom: 10px; 
} 

#window-4{ 
    height:87%; 
    padding-bottom: 10px; 
} 

.column{ 
    float:left; 
    margin: 5px; 
    height: 100%; 
} 

.logo { 
    font-family: arial; 
    font-size: 12px; 
    float: left; 
    padding-left: 10px; 
} 

.footer { 
    margin-top: 10px; 
    padding-left: 10px; 
} 

Answer 1

height:100%制造麻烦，你应该首先将其删除。