0
私のナビゲーションバーにはフッターがページの一番下にあるべきナビゲーションバーがスクロールバー
https://codepen.io/anon/pen/OOzEMo
<!DOCTYPE html>
<html>
<head>
<title>Calculators</title>
<link href="calculator.css" type="text/css" rel="stylesheet"/>
</head>
<header>
<h1>
<center><img src="https://i.imgur.com/YtL5Qyq.jpg" style="width:220px; height:175px;"></center>
</h1>
<ul class="nav">
<li><a href='home.html'>Home</a></li>
<li><a href='program.html'>Programs</a></li>
<li><a href='training.html'>Training Submissions</a></li>
<li><a href='calculator.html'>Calculators</a></li>
<li><a href='http://uspa.net/' target="_blank">USPA</a></li>
<li><a href='about.html'>About</a></li>
<li><a href='contact.html'>Contact</a></li>
</ul>
</header>
<body>
<script type="text/javascript" src="wilks.js"></script>
<div class='calc-bg'>
<div class="w-calc">
<select id="sex">
<option value="male">male</option>
<option value="female">female</option>
</select>
<select id="units">
<option value="kg">kg</option>
<option value="lb">lb</option>
</select>
<p>Body Weight: <input id="weight" type="number"></p>
<p>Total: <input id="total" type="number"></p>
<input type="button" onClick="computeWilks()" value="Calculate"/>
<h2 id="wilks"></h2>
</div>
</div>
</body>
<footer>
<div id="social">
<a class="instagram" href="http://instagram.com/ucipowerlifting"><img src="https://i.imgur.com/e7fsd60.jpg" width="60" height="60"></a>
<a class="facebook" href="https://www.facebook.com/groups/788049644580281/?ref=br_rs"><img src="https://i.imgur.com/812KuNA.jpg" width="60" height="60"></a>
<a class="contact" href='contact.html'><font color="white">Contact</font></a>
</div>
</div>
</footer>
</html>
@import url(https://fonts.googleapis.com/css?family=Montserrat|Patua+One|Roboto|Open+Sans|Roboto+Slab|Oswald);
* {
padding: 0;
margin: 0;
}
h1 {
background-color: black;
}
body {
margin: 0;
padding: 0;
height: 100%;
}
.nav {
width: auto;
font-family: 'Oswald';
font-size: 20px;
background-color: #595959;
color: white;
list-style: none;
text-align: center;
height: 100%;
white-space: nowrap;
}
.nav > li {
text-align: center;
display: inline-block;
width: 14.08%;
max-width: 100%;
}
.nav > li > a {
text-decoration: none;
color: white;
display: block;
padding: 5% 0 5% 0;
}
.nav > li > a:hover {
background-color: black;
color: white;
}
.calc-bg{
background-color: blue;
height: 100%;
width: 40%;
position: absolute;
}
.w-calc {
display: block;
position: absolute;
z-index: 1;
border-color: black;
box-sizing: border-box;
font-family: 'Oswald';
font-size: 25px;
font-weight: bold;
text-transform: uppercase;
padding: 20px 20px 50px 20px;
border-style: solid;
border-color: rgb(255, 210, 0);
text-align: right;
background-color: white;
}
h2 {
padding: 10px;
text-align: right;
font-size: 25px;
}
footer {
z-index: 2;
bottom: 0;
position: absolute;
font-family: 'Patua One';
width: 100%;
height: 20%;
background-color: black;
color: white;
border-top: white;
margin-top: 3%;
}
#social {
text-align: center;
padding: 3%;
}
.facebook {
display: inline-block;
margin-left: auto;
margin-right: auto;
}
.instagram {
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-right: 3%;
}
.contact {
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-left: 3%;
font-size: 30px;
text-decoration: none;
}
を表示する垂直スクロールバーを引き起こし下部に余分なスペースを作っているようだが、そこにあるの原因空白は、上部のナビゲーションバーと同じサイズです（図示せず）。私はボディータグの外にあるヘッダーと関係があると信じていますが、私は確信していません。
私はHTML/CSSの新機能です。コードが混乱していて、どんな助けがあれば幸いです。
すべてのhtmlは本文の内側にある必要があります。 – wazz
私は体内のすべてのhtmlを移動しましたが、まだスクロールバーを取得しています。 – minotrument