I have this css:
html,body {margin:0;}
#nav {
height:30px;
background:#FFF;
background:red;
}
#content {
position:absolute;
left:0;
bottom:0;
top:30px;
right:0;
height:100%;
background:green;
}
I'm trying to have a nav bar at the top (the red part) and the content area underneath (the green part) should just fill the remaining space but as you can see the height is more than the window height creating a scroll. How can I overcome this?
jsFiddle: http://jsfiddle.net/2dcr5yty/5/
Don't use a height 100%. Use a bottom: 0. Because it will be 100% height of the container. Which is the body, so 100% body height means. covering the whole document if position top = 0. Since you have it 30px top. It will have a scrollbar for 30px.
Example: http://jsfiddle.net/2dcr5yty/6/
#content {
position:absolute;
left:0;
bottom:0;
top:30px;
right:0;
bottom:0;
background:green;
}
Related
w3c Says that z-index "Only works on positioned elements(position: absolute;, position: relative; or position: fixed;)."
I see it works in absolute position: http://jsfiddle.net/WwXVV/2/
But why not in relative position: http://jsfiddle.net/WwXVV/
Can anyone explain why in relative position and in this specific case the div with the higher z-index is not on top?
CSS:
#top {
position:relative;
float:left;
width:100px; height:100px;
background-color:yellow;
z-index:1;
}
#bottom {
position:relative;
float:left;
width:100px; height:100px;
background-color:blue;
z-index:0;
}
HTML:
<div id="top"></div>
<div id="bottom"></div>
You are simply floating them next to one another. Apply left to the bottom div:
#bottom { left: -100px; }
What this will do is "position" the bottom div under the top one. Applying relative position by itself won't do anything, you need to start moving the target element around to see the stacking effect.
If you are wondering about absolute positioning, it works differently. Absolute positioning takes the element out of document flow (meaning it won't affect the layout of other elements), and by default puts it at the top left of its first ancestor that doesn't have a value of position:static, so both your elements stacked on top of each other.
You have floated both elements to the left. They don't overlap, hence z-index doesn't do anything.
If you add margin-left: -20px to the right box, you'll see the desired effect.
Simple, with position:relative and float:left; the divs will be next to each other. With position: absolute they will ignore float:left; and will put both element on the same spot, using z-index to show who is in front.
z-index is just relevant when the boxes overlap visually.
In case of Relative Positioning, z-index working fine. Try this code
#top {
position:relative;
top:20px;
left:0px;
width:100px; height:100px;
background-color:yellow;
z-index:1;
}
#bottom {
position:relative;
top:0px;
left:30px;
width:100px; height:100px;
background-color:blue;
z-index:0;
}
In case of Absolute Positioning
#top {
position:absolute;
top:0px;
left:20px;
top:0; left:0;
width:100px; height:100px;
background-color:yellow;
z-index:1;
}
#bottom {
position:absolute;
top:20px; left:50px;
width:100px; height:100px;
background-color:blue;
z-index:0;
}
I'm working on the following layout structure:
<div id="wrapper">
<div id="header"></div>
<div id="pageContainer"></div>
<div id="footer"></div>
</div>
With the following CSS I set the footer to the bottom of the page:
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#pageContainer {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#6cf;
}
If the content in the 'pageContainer div' is small, I don't want to show the scroll bars in the div but attach the footer to the bottom of the 'pageContainer div' (right not the footer is always at the bottom of the viewport)
If the content of the 'pageContainer div' is long I need the footer to remain visible in the viewport (at the bottom) and show the scroll bars in the 'pageContainer div'.
How do I do this? Any ideas? thanks!
PS: I need a solution that doesn't use JS.
If I read you correctly, you're describing behavior where positioning switches from relative to fixed, depending on the size of an element relative to the real-estate available in the viewport.
Quite certainly, you cannot achieve this without JavaScript.
But a solution where the footer is always at the bottom of the viewport is fairly common and easy to do without JavaScript. In case you do not already know how to do that:
#header, #pageContainer, #footer{
position:fixed;
left:0px;
right:0px;
}
#header{
top:0px;
height:100px;
background:#ff0;
}
#pageContainer {
top:100px;
bottom:60px;
overflow:auto;
}
#footer {
bottom:0px;
width:100%;
height:60px;
background:#6cf;
}
I guess you could do something like this:
#header {
background:#ff0;
padding:10px;
height: 15%;
}
#pageContainer {
padding:10px;
max-height: 70%;
overflow: auto;
}
#footer {
bottom:0;
width:100%;
height:15%;
background:#6cf;
}
Note that you need to specify your heights in percentages. Also padding might be an issue.
I'm trying to create a HTML CSS Layout using div tag.
Code here
Now it display a vertical bar. I want to avoid this vertical bar, and would like to display only if the content is big.
May you wnt an Sticky Footer than put your footer outside the #container.
Check this http://jsbin.com/ujemaq/17
EDIT:
Ok your actual problem arises with the height ambiguity, see these line:
#container{
min-height: 100%;
width:100%;
height:100%; /* this causes container to a 100% height of body*/
}
#header{
width:100%;
height:55px; /* this takes 55px of container height*/
/*border:2px solid;*/
}
#menu{
width:100%;
height:20px; /* this takes another 20px of container height*/
/*border:2px solid;*/
}
#left-nav{
width:20%;
height:100%;
float:left;
/*border:2px solid;*/
}
#content{
height:100%; /*You thinking of getting full height of container but the 75px height is already grabbed by header and menu, so while expanding content to 100% height a vertical scrollbar appears */
/*border:2px solid;*/
}
apply this css
body,html{
height:100%;
}
#container{
min-height: 100%;
width:100%;
height:100%;
}
#header{
width:100%;
height:55px;
/*border:2px solid;*/
}
#menu{
width:100%;
height:20px;
/*border:2px solid;*/
}
#left-nav{
width:20%;
float:left;
/*border:2px solid;*/
}
#content{
height:85%;
/*border:2px solid;*/
}
#footer{
background-color:#FFA500;text-align:center;
}
</style>
i have a div,
it's width is 200px ,height is 150px,
i want the style of div's position is fixed
To make it centered horizontally and vertically centered
Try this:
div{
position:fixed;
margin:auto;
left:0; right:0; top:0; bottom:0;
width:200px; height:150px;
}
I have a middleContent div which has two sub-divs acting as columns. The middleMain div works fine, the middleRight div doesn't show unless I fill it with some content or use absolute positioning.
This is a picture of my page:
http://imageshack.us/photo/my-images/403/tempzk.jpg/
With the following CSS:
#middleContent
{
position:relative;
min-height:500px;
height:auto;
}
#middleMain
{
float:left;
height:100%;
left:0;
right:auto;
}
#middleRight
{
position:absolute;
float:right;
width:100px;
height:100%;
right:0;
background-color:Orange;
top: 0px;
}
However, I need it to work with relative positioning since the height expands depending on the content in middleMain. MiddleRight doesn't have any content in it (but needs the capability to add content so I can't just use a picture), so I basically need to display an empty div (but with background color) that takes up the height of the whole page.
change your CSS to :
#middleContent
{
position:relative;
min-height:500px;
height:auto;
overflow: hidden;
}
#middleMain
{
float:left;
height:100%;
left:0;
right:auto;
}
#middleRight
{
position:relative;
float:right;
width:100px;
height:100%;
right:0;
background-color:Orange;
top: 0px;
padding-bottom: 9000px;
margin-bottom: -9000px;
}
http://jsfiddle.net/fXHqL/1/
Add this line to #middleRight
display:block;
it should work.