Css 如何阻止文本超过页脚？_Css_Html_Web

Css 如何阻止文本超过页脚？

css html web

Css 如何阻止文本超过页脚？,css,html,web,Css,Html,Web,如果我在元素中放置了大量文本，那么文本将流过页脚。如何使页脚保持在底部，而不管是否有大量文本这是我的HTML： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test Site</title> <link rel="stylesheet" type="text/css

如果我在元素中放置了大量文本，那么文本将流过页脚。如何使页脚保持在底部，而不管是否有大量文本

这是我的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>

任何帮助都将不胜感激

编辑：如果我之前不清楚，很抱歉，这是我添加太多文本时发生的情况

只要再读一遍问题，你就可以找到粘性页脚了

下面是一个使用代码的粘性页脚的演示（我相信您可以稍微整理一下）

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>

* {
    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;
}

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

如果您只想将其放在页面内容下，则：

从页脚取下

位置：绝对
CSS:
<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>

* {
    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;
}

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

将页脚放在
中。设置所需的宽度和高度。同时设置样式溢出：隐藏。稍微考虑一下，然后选择适合您需要的
样式。
尝试添加到页脚

position: fixed;

并转到部分

padding-bottom: 150px;

我对它进行了测试，它运行正常。
不确定是否清楚地理解了您的问题。如果要将高度固定为150，并且如果文本的长度超过150，则还需要显示内容，这意味着您有两种方法
解决方案1:您可以添加滚动条，以便在滚动条扩展时显示滚动条。使用页脚CSS，如下所示
   footer {
   text-align : center;
   background-color : #212121;
   color: #FFFFFF;
   height: 150px;
   position: absolute;
   bottom: 0;
   overflow:auto;
   width: 100%;
   }

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

解决方案2:您可以设置最小高度，而不是页脚中的高度。如果它扩展，它将自动扩展。使用页脚CSS，如下所示
   footer {
   text-align : center;
   background-color : #212121;
   color: #FFFFFF;
   height: 150px;
   position: absolute;
   bottom: 0;
   overflow:auto;
   width: 100%;
   }

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

填充底部：150px防止页脚隐藏部分文本。这是假设您想要一个粘性页脚。这起作用了！谢谢你花时间帮忙。@user3788908没问题，很高兴我能帮忙。