Question

继续这个（红色是页脚栏）有关摆脱它的任何建议吗？在线看到一些代码以保持页脚在底部，尝试它但它一直出现在屏幕中间。这是一个试图复制谷歌外观的项目（无需搜索功能）。第一次尝试这样的事情，有点失落。

红色是页脚（覆盖搜索栏）

screenshot

<body>
    <div id="wrapper">  
        <div id="trio">
            <div class="triple" id="You">
                <a href="google.com">+You</a>
            </div>
            <div class="triple" id="Gmail">
                <a href="gmail.com">Gmail</a>
            </div>
            <div class="triple" id="Images">
                <a href="google.com">Images</a>
            </div>

        </div>
        <img src="https://www.google.com/images/srpr/logo11w.png">
        <div id="search">
            <input class="searchbar" type="text" maxlength="2048" value="Say &quot;Ok Google&quot;">
        </div>
        <div id="buttons">
            <input id="googlesearch" value="Google Search"type="submit"> 
            <input id="secondbutton" value="I'm Feeling Lucky" type="submit"> 
        </div>
        <div id="footer">   
        <div>
    </div>
</body>

img {
display:block;
width:269px;
height:95px;
margin: auto;
margin-top: 80px;
padding-top: 112px;
}

.triple {
font-family: Arial;
font-size: 13px;
display: inline-block;
margin-right:0;
}
#trio a {
text-decoration:none;
color: #404040;
;

}
#trio a:hover {
text-decoration: underline;
}
#Gmail, #Images {
padding-left: 15px;
}
#search {
width: 400px;
height:28px;
margin:auto;
padding-top:30px;
text-align: right;
}
.searchbar {
margin:auto;
display:block;
width:100%;
text-align: right;
}
#buttons {
height:22;
width:250px;
margin:auto;
display:block;
}

#wrapper {
min-height:100%;
position: relative;

}

#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background-color: red;
clear:both;
display:block;

}

Answer 1

您错过了为了min-height:100%;适用于#wrapper，您也应该申请：

body,html{
 height:100%;
}

JsFiddle： http://jsfiddle.net/a_incarnati/KzAfG/303/

Answer 2

这应该是这种布局的一个简单起点：

<强> HTML

<body>
    <div id="wrapper">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</body>

<强> CSS

html,
body {
    margin:0;
    padding:0;
    height:100%;
}
#wrapper {
    min-height:100%;
    position:relative;
}
#header {
    padding:10px;
    background:#5ee;
}
#content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

Answer 3

尝试在你的风格#footer {}

中使用“position：fixed”

这适合我。

<html>

<head><style>
img {
display:block;
width:269px;
height:95px;
margin: auto;
margin-top: 80px;
padding-top: 112px;
}

.triple {
font-family: Arial;
font-size: 13px;
display: inline-block;
margin-right:0;
}
#trio a {
text-decoration:none;
color: #404040;
;

}
#trio a:hover {
text-decoration: underline;
}
#Gmail, #Images {
padding-left: 15px;
}
#search {
width: 400px;
height:28px;
margin:auto;
padding-top:30px;
text-align: right;
}
.searchbar {
margin:auto;
display:block;
width:100%;
text-align: right;
}
#buttons {
height:22;
width:250px;
margin:auto;
display:block;
}

#wrapper {
min-height:100%;
position: relative;

}

#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background-color: red;
clear:both;
display:block;

}
</style>
</head>
<body>
    <div id="wrapper">  
        <div id="trio">
            <div class="triple" id="You">
                <a href="google.com">+You</a>
            </div>
            <div class="triple" id="Gmail">
                <a href="gmail.com">Gmail</a>
            </div>
            <div class="triple" id="Images">
                <a href="google.com">Images</a>
            </div>

        </div>
        <img src="https://www.google.com/images/srpr/logo11w.png">
        <div id="search">
            <input class="searchbar" type="text" maxlength="2048" value="Say &quot;Ok Google&quot;">
        </div>
        <div id="buttons">
            <input id="googlesearch" value="Google Search"type="submit"> 
            <input id="secondbutton" value="I'm Feeling Lucky" type="submit"> 
        </div>
        <div id="footer">   
        <div>
    </div>
</body>
</html>

尝试重新创建Google主页（HTML / CSS），无法让页脚停留在底部

3 个答案: