Reputation: 27
I have the following HTML and CSS:
* {
margin: 0px;
padding: 0px;
border: none;
}
html,
body {
background-color: yellow;
height: 100%;
}
#header {
position: absolute;
height: 100px;
width: 100%;
background: #335599;
border-bottom-color: #ffffff;
border-bottom-style: solid;
border-bottom-width: 1px;
z-index: 100;
}
#footer {
height: 60px;
width: 100%;
background-color: #dd1155;
border-top-color: #ffffff;
border-top-style: solid;
border-top-width: 1px;
z-index: 1000;
}
#wrap {
position: relative;
height: 100%;
}
#wrap_content {}
.undef {
width: 100%;
}
.top_h {
height: 100px;
}
.bottom_h {
height: 60px;
}
#page_content {
padding-left: 150px;
position: relative;
color: #FFFFFF;
background-color: #000000;
}
#menu {
height: 100%;
position: relative;
float: left;
background-color: #1188FF;
border-right-color: #ffffff;
border-right-style: solid;
border-right-width: 1px;
z-index: 10;
}
#menu ul {
list-style: none;
display: block;
min-height: 200px;
}
#menu ul li {
width: 150px;
height: 25px;
padding-top: 10px;
padding-bottom: 4px;
text-align: center;
background-color: #992277;
border-bottom-color: #000000;
border-bottom-width: 1px;
border-bottom-style: solid;
font-family: Cambria;
}
#menu ul li:hover {
background-color: #167322;
color: #ffffff;
}
<div id="wrap">
<div id="header"></div>
<div class="undef">
<div class="top_h"></div>
<div id="menu">
<ul>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
<li>Menu item</li>
</ul>
<div class="bottom_h"></div>
</div>
<div id="page_content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis nibh id odio laoreet, nec bibendum erat auctor. Vivamus imperdiet nisi eget nisl blandit lobortis. Nam vestibulum scelerisque nisi, sit amet fermentum metus dapibus ut. Etiam et volutpat
eros, sed porttitor elit. Nulla bibendum ornare metus, in venenatis lectus rhoncus sit amet. In hac habitasse platea dictumst. Fusce nibh nulla, rhoncus eget laoreet a, aliquam ac libero. Curabitur tristique porttitor congue. Integer lacinia congue
orci quis vestibulum. Nulla risus nisi, sodales id augue in, laoreet feugiat orci. Vestibulum fermentum sapien est, eget pretium eros adipiscing vel. Nulla malesuada ornare congue. Suspendisse eget enim et dolor porttitor scelerisque ut eu augue.
Duis vitae risus quis est rutrum consectetur pharetra ullamcorper lacus. Suspendisse vestibulum auctor mi, in laoreet libero pellentesque ut. Donec a elit at ligula viverra dictum vel feugiat elit.
</p>
<div class="bottom_h"></div>
</div>
</div>
<div id="footer"></div>
</div>
I want to create a page only by using css that has the following:
Also the page should dynamically change if the browser window size is changed. The solution should be browser compatible but if it works for firefox or/and chrome then all is ok.
I tried to do this using a lot of tricks but none of them worked. Is it possible to do something like this using only css 2.0?
Upvotes: 0
Views: 15583
Reputation: 250
how about:
#header, #menu, #content, #footer {
position:fixed;
height:100%;
width:100%;
top:0;
left:0;
}
#header {
height:100px;
z-index:9999;
}
#menu {
width:150px;
padding:100px 0 60px; /* account for header, footer */
z-index:9997;
}
#content {
padding:100px 0 60px 150px; /* account for header, menu, footer */
z-index:9996;
}
#footer {
height:60px;
top:inherit;
bottom:0;
z-index:9998;
}
html:
<body>
<div id="header">...</div>
<div id="menu">...</div>
<div id="content">...</div>
<div id="footer">...</div>
</body>
Upvotes: 1
Reputation: 10704
Here is a fiddle of my resolution: http://jsfiddle.net/6rVsE/
2
add to #footer
:
position:fixed; bottom: 0px;
3
add to: #menu
:
width: 150px;
add to: #menu ul li
:
width: 100%;
4
because you are doing relative: I would resolve this in Javascript. This example is using jQuery.
$("#page_content").css("height", $(window).height() - $("#header").height() - $("#footer").height() +"px");
Upvotes: 1