Question

这让我的大脑受到伤害，我需要一些帮助，这可能非常简单，但我可以找到搜索谷歌的答案。

我想要一个页脚，网上的所有代码都很酷，这些代码告诉我如何将它保存在页面底部....

我希望它在底部但是我希望它从底部开始大约1-3厘米（如下图所示），我只是不能正确地帮助我？

HTML CODE：

<!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>1page</title>
            <link rel="stylesheet" href="style.css" />
        </head>
        <body>

            <div id="heading1">
                <h1>
                    CSS
                </h1>
            </div>


            <div id="footer">
                <div>Test text</div>
            </div>

        </body>
    </html>

CSS代码：

html, body{
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    background-color: #DDEEFF;
}

#heading1{
    text-align: center;
}


#footer{

    background-color: #42A5F5;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;

    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;

    text-align: center;
    max-width:400px;

}

Answer 1

html, body{
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
    background-color: #DDEEFF;
}

#heading1{
    text-align: center;
}


#footer{

    background-color: #42A5F5;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    position:fixed;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
    bottom:20px;
    text-align: center;
     width:400px;
     left:50%;
  margin-left:-200px;

}

<!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8" />
            <title>1page</title>
            <link rel="stylesheet" href="style.css" />
        </head>
        <body>

            <div id="heading1">
                <h1>
                    CSS
                </h1>
            </div>


            <div id="footer">
                <div>Test text</div>
            </div>

        </body>
    </html>

Answer 2

你可以这样做：

<强> CSS

*{
    margin:0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    /* equal to footer height */
    margin-bottom: -35px;
}
.wrapper:after {
    content:"";
    display: block;
}
#footer, .wrapper:after {
    height: 35px;
    text-align: center;
}
#footer div {
    background-color: #42A5F5;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
    max-width:400px;
    min-width:400px;
    display: inline-block;
}

<强> HTML

<div class="wrapper">
    <div id="heading1">
         <h1>CSS</h1>
    </div>
</div>
<div id="footer">
    <div>Test text</div>
</div>

<强> DEMO HERE

Answer 3

使用position:fixed是一个很好的地方，可以在CSS中开始围绕“text”元素。

对于演示：click here

CSS

#footer{
    background-color: #42A5F5;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
    text-align: center;
    max-width:400px;
    margin: 0 auto;
}

.div-wrapper{
    width: 100%; 
    height: 12px; 
    position: fixed; 
    bottom: 100px; 
}
.text{
    margin: 0 auto;
    padding-left: 100px; 
    padding-right: 100px; 
    white-space: nowrap; 
}

HTML

<body>
   <div id="heading1">
      <h1>
         CSS
      </h1>
   </div>

   <div class="div-wrapper">
      <div id="footer">
         <div class="text">Test text</div>
      </div>
   </div>
</body>

Answer 4

只需在margin:0 auto; bottom:0;

中添加这些css #footer即可

#footer{
    background-color: #42A5F5;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;

    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;
    text-align: center;
    max-width:400px;  
    margin:0 auto;
    bottom:0;
}

Answer 5

请使用此CSS。我相信你看起来像这样。

html, body{
    padding: 0;
    margin: 0;
    background-color: #DDEEFF;
}

#heading1{
    text-align: center;
}


#footer{

    background-color: #42A5F5;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;

    -webkit-box-shadow: 2px 2px 4px #888;
    -moz-box-shadow: 2px 2px 4px #888;
    box-shadow: 2px 2px 4px #888;

    text-align: center;
    width:100%;
    position:absolute;
    bottom:5px;

}

底部的CSS页脚，但不是最底部的CSS页脚

5 个答案: