0
多分簡単な問題ですが、現在うまく動作しているメニューを含むバナー/ヘッダーを含む個人用Webサイトとフッターバーを作成しようとしています。どちらもメインコンテンツのためにdivの間に 'main' divを使用しています。何らかの理由で、フッターバーがメニュー/ヘッダーバーの上に表示され、メインセクションの下に表示するときに表示され、ページの下部に表示されます。HTMLフッター/ Divの配置
@font-face {
font-family: "cicle-gordita";
src: url("fonts/Cicle_Gordita.ttf") format("truetype");
src: url("fonts/Cicle_Gordita.eot") format("opentype");
}
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
background-color: #FFFFFF;
}
#banner {
height: 50px;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
position: fixed;
background-color: #000000;
/*background-image: url("images/menuHor.png");*/
}
.menuBit {
height: 40px;
width: 100px;
margin: 0px;
padding: 0px;
float: left;
margin-left: 10px;
}
.menuContent:hover {
text-decoration: underline;
cursor: pointer;
}
.menuContent {
font-family: "cicle-gordita";
font-size: 30px;
text-align: center;
padding: 0px;
margin: 0px;
margin-top: 10px;
color: #ffffff;
}
.main {
position: fixed;
margin: 0px;
margin-top: 50px;
padding: 0px;
width: 100%;
height: 90%;
background: #ff0000;
overflow: hidden;
}
#footer {
width: 100%;
background: #000000;
height: 50px;
position: fixed;
clear: both;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Personal - Home</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
<div id="banner">
<div class="menu">
<div class="menuBit">
<h2 class="menuContent">HOME</h2>
</div>
<div class="menuBit">
<h2 class="menuContent">BLOG</h2>
</div>
<div class="menuBit">
<h2 class="menuContent">WORK</h2>
</div>
</div>
</div>
<div class='main'>
<!-- Content Here -->
</div>
<div id="footer"></div>
</body>
</html>頭に示されているように、私はJScriptの/ jqueryのファイルを持っているが、それに含まれるすべてのページのロード時にメインをフェードするコードの小片である、それはしていません何かを変える。 fixedに設定すると
'.main'の高さを'90％ 'に設定している間は他のものを固定していますが、高さの合計は' 100％'でなければなりません。 – niceman
Iあなたの身体とフッターの両方に 'position：fixed;'を使用しないことをお勧めします。これに深く入る前に、基礎を再考することを検討してください！ – Santi
これは質問とは関係ありませんが、ヘッダー、フッター、メインにはhtml5のセマンティック要素を使用することを検討してください – niceman