我已經嘗試過在頁腳底部保留底部頁面，但它覆蓋了底部已經存在的元素而不是在它們下面。固定做類似的事情，除非頁面更長，它會掩蓋頁面中心的元素。我簡直就是想讓我的div的背景顏色延伸到頁面的底部，並讓我的標誌和文本保持在設定高度的div之間。這是我得到的。將Div標籤擴展到頁面底部w/out覆蓋頁面上已有的元素

<!DOCTYPE html> 
<html> 
<head> 

<link rel="stylesheet" type="text/css" href="main.css"/> 
<title> 

</title> 

<div class="heading"> 
<img src="Images/Redbird.gif" alt="Redbird" style="float:left; padding-left:15px; padding-top:15px; width:150px;height:90px"> 

<form> 
    Search: 
    <input type="search" name="Search" style="float:right;"> 
</form> 
<br></br> 
<button type="button" id="Login">Login</button> 
<button type="button" id="Login">Create New Account</button> 
<h1>Technology Blog</h1> 
<a href="index.html"> 
<img src="Images/House.png" alt="Home" style="width:35px; height:35px;"> 
</a> 
</div> 

<div class="table"> 
<table style+"width:100%"> 
    <tr> 
     <td><a href="phones.html">Phones & Tablets</a></td> 
     <td>Computers & Laptops</td> 
     <td>Internships</td> 
     <td>Troubleshooting</td> 
     <td>Product Ratings & Reviews</td> 
    </tr> 
</table> 
</div> 
</head> 

<body> 
<div class="Welcome"> 
<h2>Welcome</h2> 
<p>Welcome to Illinois State University's Technology Blog. Here you can view and post questions, answers, reviews, and other information that is related to technology. This website is for Illinois State University Students ONLY! You must sign in or create an account to view or post on this website.</p> 
</div> 
<div class="Slideshow"> 
<img src="Images/DellComps.jpg" alt="Computers" style="width: 397px; height: 298px"> 
</div> 

</body> 

<div class="Footer"> 

<img src="Images/Seal.png" alt="ISU Seal" style="width: 40px; height: 40px; padding-bottom: 10px; padding-top: 10px"> 

Copyright 2014 @ TEC 319 Group <br/> Illinois Sate University 
</div> 

</html>

繼承人的CSS。我只需要編輯.Footer標籤，我相信

html{ 
height: 100%; 
position: relative; 
} 
h1{ 
text-align: center; 
font-family: impact; 
font-style: italic; 
} 

.heading{ 
background-color: #CA0000; 
height:150px; 
} 
td{ 
border:5px solid black; 
text-align:center; 
background-color:#790000; 
color:white; 
padding:10px; 
font-family: helvetica; 
font-style: italic; 
font-size: 15px; 
} 
table{ 
width:100% 
} 
.table{ 
background-color:black; 
height:53px; 
} 
form{ 
float:right; 
} 
button{ 
float:right; 
} 
.Slideshow img{ 
display: block; 
position: center; 
margin-left: auto; 
margin-right: auto; 
} 
.Footer img{ 
display: block; 
position: center; 
margin-left: auto; 
margin-right: auto; 
} 
.Footer{ 
margin-top: 40px; 
text-align: center; 
background-color: #D8D8D8; 
padding-bottom: 20px; 
width: 100%; 
} 


.Preview td{ 
display: block; 
text-align: left; 
color: black; 
background-color: white; 

} 
.Blog td{ 
display: block; 
text-align: left; 
color: black; 
background-color: white; 
border: 0px; 

} 
.newPost h2{ 
display: block; 
position: center; 
margin-left:auto; 
margin-right: auto; 
vertical-align: middle; 
color: white; 
background-color: #790000; 
border: 5px solid black; 
border-collapse: collapse; 
width: 250px; 
text-align: center; 
} 
h3 { 
color: white; 
background-color: #790000; 
border: 5px solid black; 

} 
h4{ 
text-align: left; 
font-size: 14pt; 
color:#790000 
} 
.back h2{ 
display: block; 
position: left; 
border:5px solid black; 
background-color:#790000; 
color:white; 
padding:10px; 
font-family: helvetica; 
font-style: italic; 
font-size: 15px; 
width: 100px; 
} 

form.comment{ 
float:left; 
size 
} 
a.blogTitle:link { 
color: #790000; 
text-decoration: none; 
} 
a.blogTitle:visited{ 
color: #790000; 
text-decoration: none; 
} 
a.blogTitle:active{ 
color: #790000; 
text-decoration: none; 
} 
a.blogTitle:hover{ 
color: #CA0000; 
text-decoration: none; 
} 
a:link { 
color: white; 
text-decoration: none; 
} 
a:visited{ 
color: white; 
text-decoration: none; 
} 
a:active{ 
color: white; 
text-decoration: none; 
} 
a:hover{ 
color: #CA0000; 
text-decoration: none; 
}

來源

2014-10-16 Tator

您是否希望頁腳始終可見？或者你想要它在頁面主體的一切下面？這是兩種不同的情況，需要不同的答案。 – Brian 2014-10-16 19:13:54

下面的答案 – Tator 2014-10-16 19:15:36

下面的答案。 @tator – Brian 2014-10-16 19:20:25

您需要的頁腳位置設置爲relative有它尊重頁面上的其他元素。 absolute和fixed都從頁面流中刪除元素，這會導致重疊。

Demo

變化position:relative到fixed在演示CSS並取消bottom看出區別。您也可以在body標籤上使用height來查看行爲如何變化。

<div id="content"> 
    <p>Content</p> 
</div> 
<div id="footer"> 
    <p>Footer stuff</p> 
</div> 

body { 
    margin:0; 
    padding:0; 
} 
#content { 
    height:1200px; 
    width:100px; 
    background-color:#eee; 
    position:relative; 
    margin:0; 
    padding:0; 
    border:1px solid black; 
} 
#footer { 
    width:100px; 
    position:relative; 
    /* bottom:0; */ 
    background-color:#eee; 
    margin:0; 
    padding:0; 
    border:1px solid black; 
}

來源

2014-10-16 19:18:09 Brian

.Footer div標籤和頁面底部之間仍有空白。 – Tator 2014-10-16 19:31:50

沒有在你的問題中提到。 CodePen演示已更新。要去除元素周圍的空白，你必須設置'body {margin：0; padding：0}'。 – Brian 2014-10-16 19:37:15

我很感激你的幫助，但是沒有一個是按照我希望的方式工作的。我得問問我的教授。感謝您再次抽出時間，非常感謝！ – Tator 2014-10-16 19:43:09

將Div標籤擴展到頁面底部w/out覆蓋頁面上已有的元素

回答

Demo

相關問題