位于页面或屏幕底部的位置div

我制作了放置在网页底部的页脚部分。当我的网页内容小于浏览器视口的高度时，我遇到了一个问题，这会在页脚和页面末尾之间留下空白。我试图用这块CSS来解决它。位于页面或屏幕底部的位置div

.footer { 
    position: absolute; 
    bottom: 0; 
    height: 125px; 
}

它在我的网页上完美运行，内容很少，但对于大网页，页脚重叠了内容。我遵循了几个在线教程，但我仍然无法做到正确。

<body class="bg-1"> 
<div class="container-full"> 
    <div class="container"> 
     ... 
    </div> 
</div> 

<div class="footer text-center"> 
    ... 
</div> 
</body> 

.container-full { 
    width: 100%; 
    height: 100%; 
    padding-top: 70px; 
    margin: 0 auto 125px; 
} 
.bg-1 { 
    background: url(../img/1.png) no-repeat center center fixed; 
    background-size: cover; 
    height: 100%; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    height: 125px; 
}

我正在使用Twitter Bootstrap。

来源

2016-07-22 Jeremy

改变位置：固定 –

添加的margin-top：125px;保证金你的div的高度 –

@NagaSaiA我不想让它变得粘稠。 – Jeremy

你可以试试下面的方法：

html, 
 
body { 
 
    height: 100%; 
 
} 
 
.container-full { 
 
    table-layout: fixed; 
 
    background: #ccc; 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.footer { 
 
    display: table-footer-group; 
 
    background: #2f2f2f; 
 
    overflow: hidden; 
 
    color: #fff; 
 
    width: 100%; 
 
    height: 1%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body class="bg-1"> 
 
    <div class="container-full"> 
 
    <div class="container"> 
 
     <p>Main Content goes here</p> 
 
    </div> 
 
    <div class="footer text-center"> 
 
     <p>Footer text goes here..</p> 
 
    </div> 
 
    </div> 
 
</body>

来源

2016-07-22 05:26:18

谢谢！它完美的作品。你能向我解释'身高：1％'是做什么的？ – Jeremy

@Jeremy正确使用此方法的这些属性如'height：1％'和'width：100％'是一些老式的Firefox浏览器。你可以忽略它们，如果你想 - :) –

如果我删除高度属性，它不适用于我最新的Firefox浏览器。 – Jeremy

位于页面或屏幕底部的位置div

回答

相关问题