Question

我使用的是Zurb Foundation 5.不过，我认为这个问题与基金会无关。我有一个div外height: auto; div内部height: 100%我试图让div到达页脚。但这并不奏效。目前，站点地图!doctype html> <html class="no-js" lang="en"> <head> </head> <body>   <div class="row"> <div class="small-12 medium-12 large-12 columns"> <div class="container"> menu 1 </div> <div class="container"> menu 2 </div> <div class="container"> content </div> <div class="container"> site map </div> </div> </div>   <div class="small-12 medium-12 large-12 columns footer"> Footer </div> <script src="js/vendor/jquery.js"></script> <script src="js/foundation.min.js"></script> <script> $(document).foundation(); </script> </body> </html> 和页脚之间存在巨大差距。

您可以参考以下链接：http://vani.valse.com.my/schone_lightings/productlisting.html

我的HTML：

body
{
   font-family: 'Open Sans', sans-serif;
   background-image:url('../img/body-bg.jpg');
}

.row
{
   max-width: 85%;
   height:100%;

   background-color:#fff;
   opacity:0.9;
   filter:alpha(opacity=90)
}
.container
{
    border:1 px solid #000;
    width:85%;
    margin:0 auto;
    background-color:#ff0000;

}

div .container
{
    border: 1px solid #000;
    padding:10px;
}
.footer
{
    background-color:#d2d1cf;
    padding:10px;   
}

我的CSS：

{{1}}

Answer 1

尝试将垂直高度应用于您想要100％高度的容器

例如

div {
height: 100vh;
}

Answer 2

要将div的高度设置为100％，您需要将其容器的高度设置为100％

html, body {
 height: 100%;
}

fiddle

现在如果你只想让你的页脚粘在页面底部，我会考虑使用它的绝对位置

内部div没有推到100％

2 个答案: