A more convoluted example of this question is here: child div height of 100% being ignored (a working solution is yet to be found)
Validating test case for my question: http://www.elucidatedbinary.com/tmp/layouttest_100percentheight.html. I want the #main div (yellow background) to expand to 100% of the height of it's parent div (#container).
My question is simple, can this be done without
Reverting to jQuery (yucky!) or
Reverting to tables (yuckier!)
I am yet to find a single example of how this can be done using the CSS layout model.
Thankyou.
EDIT: When I say "expand to 100% of the height of it's parent div" I mean expand all the way to beneath the footer. The header is supposed to leave a pink gap at the top.
try:
#main { position: absolute; top: 0px; bottom: 0px; }
Related
Please visit my website at http://amrapps.ir/personal/indexbug.html
to visually see my problem.
Let me explain my problem:
In my website i have a fixed postion div which contains links and i takes and it takes 25 % of browser height.
Then it is the red div which takes 75 % of browser width.
When user clicks on -CLICK THERE TO READ MORE- in red div,it will be redirected to the next(yellow colored) div which takes 100 % of browser height.
Then you can click on go to top on the fixed div above to get back to red div.
Navigations are working well but there's a problem.
When you are at the 2nd(yellow) div,if you change browser width,the red div will be also visible! How can i fix that?
thank you for your effort.
Change your #aboutmore class to the below css:
#aboutmore {
background-color: #FFCE85;
margin-top: 5px;
top: 25%;
position: absolute;
/* height: 74%; */
width: 100%;
min-width: 1130px;
bottom: 0px;
z-index: 3;
}
Theres a couple of things going on here, and I'm not 100% of the result you want to accomplish, but we are working with CSS heights here so you need to keep some things in mind.
First of: when working with css heights, you need to make sure that all wrapping elements get the height of 100%. Including your body AND html tags. Without this, your body will just have the height of the elements inside it, and your 100% divs will do it to.
Second, you should turn of the body 'overflow: hidden' attribute, as it just obstructs correct testing.
Now, like I said, I'm not sure what you're trying to accomplish, but your header should be taken out of the wrapper as it is fixed. This will allow your wrapper to become the scrollable area. You also mentioned you wanted the second div to be 100% heigh and the first one 75%. Now, with position fixed this would mean your yellow div is only 75% visible, with 25% hidden (either by being off screen or under the header). If you want the first div and header together to take up 100%, and any subsequent div to take up 100% on their own, you should position all elements relative and not fixed.
I'm going to add some code here to help with a fixed header:
div#page-wrap {
height: 75%;
position: absolute;
top: 25%;
width: 100%;
overflow: scroll;
overflow-x: hidden;
}
about,
#aboutmore {
height: 100%;
position: relative;
top: 0%;
}
Now this will break your javascript (as you can't actually scroll the body), although I couldn't get it working in the first place anyhow. You'll find more about scrolling inside a div (as now you need to scroll in your wrapper element) in this thread: How do I scroll to an element within an overflowed Div?
I am having a CSS issue; See the attached image.
there have two fixed div.. where i will put my navigation and yellow area is my content area. content area will be scroll if content big..
but now problem i am facing content area position not fit properly. when i make other two div position: fixed then issue coming. please see my code and jsfiddle..
.midarea this div position not properly fit there. if you see jsfiddle then can under properly..
JSFiddle
You need .midarea to be fixed to match the others:
.midarea {
position: fixed;
left:260px;
right: 0;
height: 100%;
overflow: auto;
...
}
With this your float and width are obsolete (but you can have them if you really want).
Also please, please lose every z-index and every float with a position: fixed or position: absolute.
Visualize
position:fixed is absolutely OK.
Just calculate the sum of width of both fixed nav-colums and set a padding-left with this calculated width to the div.midarea. So all divs inside the midarea begin right of the fixed colums.
And a z-index higher of the content is needed. e.g. z-index:999;
Maybe the title is not easy to understand, sorry.
My problem in detail: i created a wordpress theme with an header. This header is surrounded by the "header-div". The header div has a width: 100% and a coloured background. But if the content in another div below overflows the viewport and you scroll horizontal, the background is white.
I know that the "width:100%" just is 100% of the parent element, but there is just the body. And the body has "width:100% and height:100%".
Where is the mistake?
Here is the site:
http://ericgerhardy.de/selltron/
Just try to reduce the browser width to 500px and scroll to the right. This should show my problem.
PS. I´m sorry if the question is already answered, but i searched for a while, with no results.
The white background appears because you have set a min-width: 1000px at some of the elements below the header.
If your only concern is to prevent the white background from appearing at the right side of the header on smaller screens and you don't care about having a responsive page (which is the case, if I understood your question), then you need to add min-width: 1000px; to your #header as well like this:
#header {
background-color: #D3D0CE;
height: 245px;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
z-index: 99999;
min-width: 1000px; /* This is the extra line */
}
The problem is that absolute positioned elements doesn't resize their parents but overflows them.
In this case your body is overflowed and a scrollbar appears but his size is still 100% of the viewport, because he is not expanded.
The abuse of absolute positiong often leads to such problems. Try tu use static positioning as much as possible. In this case it's really easy to use static positioning.
I have a site with absolute positioned elements on it, for example the top Navigation of the site:
#topNav
{
position: absolute;
top: 100px;
left: 50%;
height: 40px;
width: 1000px;
margin-left: -500px;
}
Now I created a sticky footer like on the following site:
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Now, the problem is that the footer will "overlap" the topNav,
because the topNav is positioned absolute, which means it's "outside of the normal float of elements". The relative position will not "notice" that there is the topNav before.
Before I start creating additional "pusher divs" for each absolute positioned element I would better ask if there are better practices than "pusher divs" or should I even not use position absolute on my elements?
EDIT:
JsFiddle here: http://jsfiddle.net/dkxUX/15/
When you scale down your browserwindow you'll find #footer overlapping all elements before it.
You could just apply a 140px top margin/padding to the body or other container element which would make the topNav's height and offset accounted for.
Better yet, don't set position to absolute in this case - it appears to me that all you're doing is horizontally centering a 1000px wide div.
/*top-margin of 100px + center the element*/
#topNav {width:1000px; height:40px; margin:100px auto 0;}
Update: I see your jsfiddle now. You could account for all absolutely positioned elements when setting the margin/padding as suggested in the first paragraph You are using absolutely positioned elements when normal document flow could be relied on.
a little bit too late to give an answer but it may help someone in the future, I came up with that problem not too long ago so here was my shot at it, using jquery since I couldn't came up with a CSS solution that wasn't removing the DOCTYPE tag (which isn't something you should do, anyways).
So here it is.
$("#CONTAINERDIV").prepend("<div id='relativefix' style='position:relative;margin-top:"+($("#YOUR_ABSOLUTE_DIV").offset().top+$("#YOUR_ABSOLUTE_DIV").outerHeight()+30)+"px'></div>");
$(window).resize(function(){
$("#relativefix").css("margin-top",($("#YOUR_ABSOLUTE_DIV").offset().top+$("#YOUR_ABSOLUTE_DIV").outerHeight()+30)+"px");
});
So yeah, that's all there is to it, you just dynamically add another div at the start of the container hard-placed under the absolute div, that will force all subsequent relative divs to me placed after it, it is like a clear fix for someone who ran out of ideas.
I have a small issue with which I'm struggling.
I need to align a element to the top of a percent div with bottom: 100% but I can't get it to align within the parent div.
So what I need is bottom: 0% to be aligned with the bottom of a div and bottom: 100% to be aligned with the top.
Any ideas?
EDIT:
http://jsfiddle.net/GmAEx/
I want the gray bar in that sample to be aligned to top: using 'bottom' 100%
It don't really understand what you mean with bottom: 100%, maybe you mean bottom: 0;?
Also see your updated example.
=== UPDATE ===
Thanks for the comment, I think now I know what are you want to get. The problem is, that bottom: 100% for the 'slider handle' means that it is completly outside the parent div.
Add a wrapper around the parent div which has the complete height minus the height of the slider handle and add a padding with height of slider handle. Replace the parent height with 100%. Move the with, background-color and margin-top to the wrapper too.
Also see bottom: 0%: updated example.
Also see bottom: 100%: updated example.
Presumably this is being dynamically generated, otherwise you'd just use top: 0 instead.
If this is the case, then you probably have something like:
child.style.bottom = y+"%";
In which case, it's a simple matter of adding:
child.style.marginTop = (child.offsetHeight/100*y)+"px";