0
Möglicherweise ein bisschen ein einfaches Problem, aber derzeit versucht, eine persönliche Website mit einem Banner/Header mit dem Menü zu erstellen, die gut funktioniert, und eine Fußzeile. Beide verwenden Divs mit einem "Haupt" Div dazwischen für den Hauptinhalt. Aus irgendeinem Grund erscheint die Fußzeile oben auf der Menü-/Kopfzeile, wenn ich versuche, sie unter den Hauptbereich zu bringen und unten auf der Seite zu bleiben.HTML footer/Div Positionierung
@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>Wie im Kopf gezeigt, habe ich eine JScript/Jquery-Datei, aber alles, was ein kleines Stück Code enthält, ist die Haupt-in, wenn die Seite geladen wird zu verblassen, es nicht etwas ändern.
Ich weiß nicht, ob dies das Problem ist, aber Sie setzen die Höhe von '.main' auf' 90% ', während die anderen behoben sind, ich denke, die Summe der Höhen sollte' 100% ' – niceman
I sein 'schlagen vor, nicht 'Position: örtlich festgelegt zu verwenden;' auf Ihrem Körper und Ihrem Fuß. Bevor Sie tiefer in das Thema eintauchen, denken Sie bitte daran, das Fundament zu überdenken! – Santi
Dies ist nicht relativ zu der Frage, aber in Betracht ziehen, html5 semantische Elemente für die Kopfzeile, Fußzeile, Haupt – niceman