Höhe 100% nicht funktioniert
Also ich habe ein div, dass soll 100% Höhe. Es ist nur das parent-element ist <body>
, also 100% soll die Höhe des Fensters. Aber statt spanning die Höhe des Bildschirms, es ist nur so hoch wie das container-element drin. Das komische ist, wenn ich mit festen Positionierung, es tut, was ich will. Leider kann ich nicht mit festen in der Website-layout. Hier ist meine css. Wenn Sie möchten, um zu sehen, was die Website sieht aus wie jetzt, hier ist der link: http://ion.comli.com/projects/
body, ul {
margin: 0;
padding: 0;
}
body {
background: url('/images/background.png') no-repeat fixed;
}
/* CONTENT */
.content{
margin-left: auto;
margin-right: auto;
position: absolute;
top: 50px;
left: 15%;
height: 100%;
width: 70%;
background-color: #ffffff;
}
/* END CONTAINER*/
/* CONTAINER */
.container{
background: #ffffff;
margin: 5% 10%;
text-align: center;
}
.container .title a {
font-family: Franchise, "sans-serif";
font-size: 48px;
color: black;
line-height: 48px;
text-align: center;
text-decoration: none;
}
.container .date {
font-family: Ubuntu, "sans-serif";
font-size: 12px;
color: #666666;
line-height: 12px;
text-align: center;
text-decoration: none;
}
.container .body {
font-family: Ubuntu, "sans-serif";
font-size: 16px;
text-align: left;
}
/* END CONTAINER */
/* PROJECT */
.project {
display: block;
margin: 5% auto;
height: 100px;
width: 500px;
border-radius: 10px;
background: url("/images/background.png");
opacity: 0.5;
}
.project h2 {
font-family: Franchise;
font-size: 48px;
color: white;
text-align: center;
}
/* END PROJECT */
/* NAVIGATION */
nav ul {
background-color: #1b1b1b;
display: table;
list-style: none;
position: fixed;
top: 0;
height: 50px;
width: 100%;
box-shadow: 0 0 6px #888888;
z-index: 1;
}
nav ul li {
float: left;
}
nav ul li a {
display: table-cell;
height: 50px;
line-height: 50px;
padding: 0 65px;
font-family: Ubuntu;
font-size: 16px;
color: #ffffff;
text-decoration: none;
background-color: #292929;
}
nav #title {
font-family: Lobster;
font-size: 36px;
line-height: 50px;
border-right: 1px solid #ffffff;
background-color: #1b1b1b;
}
nav #menu {
padding: 0 25px;
background-color: #1b1b1b;
}
nav #menu:hover {
box-shadow: none;
background-color: #292929;
}
nav li:hover #menu {
box-shadow: none;
background-color: #292929;
}
nav ul ul {
background: #292929;
display: none;
position: absolute;
top: 100%;
right: 0px;
width: 15%;
}
nav ul ul li {
background: #292929;
float: left;
position: relative;
clear: both;
}
nav ul li:hover > ul {
box-shadow: none;
display: block;
}
/* END NAVIGATION */
/* SCROLLBAR */
/* END SCROLLBAR */
Jede Art, wie ich dieses div-span-die ganzen 100%? Ich bin mir ziemlich sicher, dass es eine einfache Antwort auf diese Frage, aber ich kann es nicht finden. Vielen Dank im Voraus!
InformationsquelleAutor CaptainXD | 2013-06-30
Du musst angemeldet sein, um einen Kommentar abzugeben.
Müssen Sie sicherstellen, dass alle Eltern von
.content
haben eineheight
definiert.So, in Ihrem Fall, was fehlt, ist:
Alternative
Oder Sie könnten position
.content
alsfixed
und Sie würden die gleiche Wirkung haben, aber mit einem anderen AnsatzInformationsquelleAutor Matyas
Körper 100% der hohen
InformationsquelleAutor rodrigo-silveira