-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の位置を追加してください：fixed;下：0; – zhuravlyov
フィードバックいただきありがとうございます。いいえ、固定したくありません。ページを下にスクロールすると、フッターが表示されます。ユーザーがページを上下にスクロールするときにフッターが表示されないようにするには、フッターをページの下に配置します。 – cerberus99
@ cerberus99これをチェックしてください私も同様に答えを更新しましたhttps://jsfiddle.net/2h6j11kL/ –