-1
在这里，我想修复页面下方的页脚。我似乎无法完成此页面，而footer的css代码在其他页面上运行良好。再次，我想将页脚固定在页面的下方。页脚不固定在页面下方
需要帮助。
(function() {
function onSubmitClicked(event) {
var product = document.getElementById('product'),
productVal = product.value,
profile = document.getElementById('profile'),
profileVal = profile.value;
url = 'testPoint.html?product=' + encodeURIComponent(productVal) + '&profile=' + encodeURIComponent(profileVal);
location.href = url;
}
var submitButton = document.getElementById('btngo');
submitButton.addEventListener('click', onSubmitClicked);
})();body {
background-color: #d62929;
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: whitesmoke;
font-weight: bold;
font-size: 18px;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: black;
text-align: center;
padding: 22px 30px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #c12525;
color: white;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: whitesmoke;
min-width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 20px 20px;
text-decoration: none;
display: block;
text-align: left;
font-size: 15px;
}
.dropdown-content a:hover {
background-color: #c12525;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active {
background-color: #d62929;
color: white;
font-weight: bold;
font-size: 18px;
}
@media screen and (max-width: 600px) {
ul li,
ul li {
float: none;
}
}
@media screen and (max-width: 300px) {
footer {
-webkit-order: 3;
order: 3;
}
}
h1 {
font-size: 40px;
font-weight: bold;
}
h2 {
font-size: 20px;
font-weight: bold;
}
p2 {
font-size: 15px;
font-weight: bold;
}
tr,
td {
padding: 15px;
text-align: left;
}
table {
margin: auto;
border-collapse: collapse;
width: 30%;
table-layout: fixed;
text-align: center;
}
tr {
height: 200px;
vertical-align: middle;
text-align: left;
}
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button2 {
background-color: white;
color: black;
border: 2px solid black;
width: 8%;
}
.button2:hover {
background-color: black;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid black;
width: 8%;
}
.button3:hover {
background-color: black;
color: white;
}
.rfloat {
margin: 5px;
text-align: center;
}
.clear {
clear: both
}
footer {
background: #aaa;
color: #fff;
text-align: center;
padding: 1rem;
clear: both;
/* clearing floating affects from both left,right sides */
}
.footp {
margin: 0;
padding: 0;
margin-left: 20px;
display: inline-block;
line-height: 30px;
vertical-align: top;
}<ul>
<li><a href="home.html">Home</a></li>
<li class="dropdown">
<a class="active dropbtn" href="javascript:void(0)">Capacity Study</a>
<div class="dropdown-content">
<a href="mainFrame.html">Conduct Study</a>
<a href="report.html">Reports</a>
</div>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
<div class="txt">
<table>
<tr>
<td>
<p2>Choose a Product : </p2>
<select id="product">
\t
\t <!--Setting the 'NONE' value for the drop down menu list option when user do not want to choose any value. optgroup is used for the subtitles off the main product dept.-->
\t <optgroup label="DEFAULT">
\t <option value = "NONE">NONE</option>
\t </optgroup>
\t
\t <!--Product List for PCR Legacy-->
\t <br><br>
\t <!--End of first drop down list-->
\t </select>
<br><br>
<p2>Choose a Profile : </p2>
<select id="profile">
\t
\t <optgroup label="DEFAULT">
\t <option value = "NONE">NONE</option>
\t </optgroup>
\t </select>
</td>
</tr>
</table>
<br><br><br>
<div class="rfloat">
<input type="button" value="Back" onclick="goBack()" class="button button3" />
<input type="submit" id="btngo" value="Go" class="button button2" />
</div>
<div class="clear"></div>
<br><br><br>
</div>
<div>
<footer>
<p class="footp">©All rights reserved.</p>
<p class="footp">|</p>
<p class="footp">Internal Use Only</p>
<p class="footp">|</p>
<p class="footp">Maintained By</p>
</footer>
</div>
所以，你想解决您的页面底部的页脚的答案吗？如果是这样，只需添加CSS位置：固定;底部：0; – zhuravlyov
感谢您的反馈。不，我不希望它是固定的 - 当我向下滚动页面时，可以看到页脚。我不希望用户在页面上下滚动时看到页脚，我只想将页脚放置在页面下方。 – cerberus99
@ cerberus99检查了这我已经更新了答案，以及https://jsfiddle.net/2h6j11kL/ –