Menu
So I have a div that is supposed to have 100% height. It's only parent element is <body>, so 100% should be the height of the window. But instead of spanning the height of the screen, it only is as high as the container element inside it. The funny thing is, if I use fixed positioning, it does what I want it to. Alas, I can't use fixed in the site layout. Here is my css. If you would like to see what the site looks like right now, here is the 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 */
Any way I can get this div to span the whole 100%? I'm pretty sure there is a simple answer to this question, but I can't find it. Thanks in advance!
874
You have to make sure all parents of .content have a height defined.
So in your case what is missing is:
html, body {
height: 100%;
}
Or you could position .content as fixed and you'd have the same effect but with a different approach
.content {
position: fixed;
top: 0;
left: 0;
height: 100%;
}
Make body 100% high
html, body {
height: 100%;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
