Question

如果我在元素中添加了大量文本，则文本会从我的页脚中流过。无论是否有大量文字或没有文字，我怎样才能让我的页脚留在底部。

这是我的HTML：

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Test Site</title>
        <link rel="stylesheet" type="text/css" href="practice_1.css"
        media="screen">
        <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato|Orbitron|Open Sans">
    </head>

    <body>
        <header>
            <nav>
                <div class="siteName">
                    <h1>Website Name</h1>
                </div class="siteName"> 
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Shop</a></li>
                    <li><a href="#">View Cart</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>

        <section>
            <article>
                <p>
                </p>
            </article>
        </section>

        <footer>    
            <small>&copy; 2014 Name. All rights reserved.</small>
        </footer>
    </body>
</html>

这是我的CSS：

* {
margin : 0;
padding : 0;
border : none;
}

body {
font-family : 'Open Sans', serif;
background-color : #FFFFFF;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
}

.siteName {
float: left;
padding-top: 15px;
padding-bottom: 15px;
color: #FFFFFF;
margin-left: 300px;
font-size: 1.4em;
font-family: Orbitron;
font-weight: 700;
}

nav {
background-color : #212121;
text-align : right;
}

nav ul li {
display : inline-block;
list-style-type : none;
transition: all 0.2s;
}

nav > ul > li > a {
color : #FFFFFF;
display : block;
line-height : 40px;
padding : 0 25px;
text-decoration : none;
font-size : .95em;
padding-top: 15px;
padding-bottom: 15px;
font-weight: 400;
font-family: Lato;
}

nav > ul > li:hover > a {
color : #666;
}

section {
margin-top : 50px;
margin-left : auto;
margin-right : auto;
width: 80%;
}

footer {
text-align : center;
background-color : #212121;
color: #FFFFFF;
height: 150px;
position: absolute;
bottom: 0;
width: 100%;
}

任何帮助将不胜感激！

编辑：对不起，如果我之前不清楚，这就是当我添加太多文字时会发生的情况。

IMGUR link

Answer 1

再次阅读问题，你正在寻找粘性页脚。

Find it here

以下是使用您的代码处理粘性页脚的演示（我确定您可以将其整理一下）。

DEMO HERE

<强> HTML：

<div id="wrap">
    <header>
        <nav>
            <div class="siteName">
                 <h1>Website Name</h1>
            </div>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Shop</a></li>
                <li><a href="#">View Cart</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <div id="main">
        <section>
            <article>
                <p>ddddd</p>
            </article>
        </section>
    </div>
</div>

<footer>
    <small>&copy; 2014 Name. All rights reserved.</small>
</footer>

<强> CSS：

* {
    margin : 0;
    padding : 0;
    border : none;
}
body {
    font-family :'Open Sans', serif;
    background-color : #FFFFFF;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0;
    margin: 0;
}
.siteName {
    float: left;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #FFFFFF;
    margin-left: 300px;
    font-size: 1.4em;
    font-family: Orbitron;
    font-weight: 700;
}
nav {
    background-color : #212121;
    text-align : right;
}
nav ul li {
    display : inline-block;
    list-style-type : none;
    transition: all 0.2s;
}
nav > ul > li > a {
    color : #FFFFFF;
    display : block;
    line-height : 40px;
    padding : 0 25px;
    text-decoration : none;
    font-size : .95em;
    padding-top: 15px;
    padding-bottom: 15px;
    font-weight: 400;
    font-family: Lato;
}
nav > ul > li:hover > a {
    color : #666;
}
section {
    margin-top : 50px;
    margin-left : auto;
    margin-right : auto;
    width: 80%;
}
footer {
    text-align : center;
    background-color : #212121;
    color: #FFFFFF;
    height: 150px;
    width: 100%;
}
html, body {
    height: 100%;
}
#wrap {
    min-height: 100%;
}
#main {
    overflow:auto;
    padding-bottom: 150px;
}
/* must be same height as the footer */
 footer {
    position: relative;
    margin-top: -150px;
    /* negative value of footer height */
    height: 150px;
    clear:both;
}
/*Opera Fix*/
 body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;
}

如果您只想在页面内容下使用它，那么：

从页脚中取消position: absolute。

<强> CSS：

footer {
    text-align : center;
    background-color : #212121;
    color: #FFFFFF;
    height: 150px;
    width: 100%;
}

DEMO

Answer 2

将页脚放入<div>。设置所需的宽度和高度。还设置样式溢出：隐藏。稍微玩一下，选择适合您需要的<div>样式。

Answer 3

尝试添加到footer

position: fixed;

和section

padding-bottom: 150px;

我测试了它并且有效。

Answer 4

不确定清楚地了解您的问题。如果你想固定高度150，如果文字比这更高，你想显示内容意味着你有两种方式。

解决方案1：您可以添加滚动条，以便在展开时显示滚动条。使用下面的页脚CSS。

   footer {
   text-align : center;
   background-color : #212121;
   color: #FFFFFF;
   height: 150px;
   position: absolute;
   bottom: 0;
   overflow:auto;
   width: 100%;
   }

解决方案2：您可以设置最小高度而不是高度英尺页脚。如果它延伸，它将自动延伸。使用下面的页脚CSS。

   footer {
   text-align : center;
   background-color : #212121;
   color: #FFFFFF;
   min-height: 150px;
   position: absolute;
   bottom: 0;
   width: 100%;
   }

如何阻止文本超过页脚？

4 个答案: