http://dev.epicwebdesign.ca/korokriver/
It's been a long night. I'm having issues the grey metallic div on this page. I want the height to be 100% of the content. When I set it, it is set as 100% of the window height and falls all over the bottom of the page.
I have set 100% height on html, body, and every div leading to this one (site, copy, content, metals)
I should clarify, I explained that badly.
I want the grey child div to be the height of the site, and the height of the parent div. Not the height of it's content.
It's also happening with the other pages, though a different div.
http://dev.epicwebdesign.ca/korokriver/?page=geologicalconsultants
You could add overflow:hidden on #content. That should do it.
If you just want the div to wrap to its contents:
Remove height:100%; this is currently setting it to be 100% of the window.
By default divs wrap to their content unless floating child elements are not cleared properly, so there should be no need to set a height.
You could use jQuery to set the height of the child to the height of the parent like so.
$('#child').height($('#parent').height());
http://jsfiddle.net/ZXc3P/
Related
At the moment I have a large <div> that I'd like to add a bottom margin to, to push it up from the bottom of the page. However this currently has no effect because its parent, the <body> tag, is smaller than it, as you can see here:
The body tag is highlighted in blue and brown, but you can see my div (the white border) extending below it.
However if I apply the trick of setting the <body> and <html> tags to height: auto and min-height:100% to make sure they fill the entire page, all of my inner content loses its size, because they all use percentage heights and no longer have a parent with a fixed height.
How can you use percentage heights if the parent tag has a height of auto?
I'm afraid you can't do this. A percentage height on an element only works if the parent element has a specific height. See also: CSS – why doesn’t percentage height work?
If I have a div with height:100% & width:100%, it's background color will be up to the browser's height and width primarily. But if the content inside that div grows dynamically, then, the div will not expand according to the content, text will be overlapped and flows over that div.
On the other hand, if I set min-height and min-width to 100%, then if the content length is smaller than browser's window, background-color will not stretched to browser's height and width.
html, body{
height: 100%;
margin: 0;
padding: 0;
}
#container{
height: 100%;
width: 100%;
background-color: red;
}
How to make such div which background-color will cover up browser's window size primarily but if the content grows dynamically, it will be able to expand with content at the same time.
Regards.
I still don't know what you are actually trying to achieve. Going by your fiddle sample, it would have been much easier to just use a solid border around the inner diver to get a red surrounding (instead of another div with background color and padding). But if you just don't want that the text oveflows the div, you have to allow the div to resize:
http://jsfiddle.net/JQ7fr/1/
Update
I think see your problem now. What you are trying to do is not possible the way you are trying to do it. You are falling for a fundamental misconception of the CSS Box Model. The min-height of a box always refers to the height of its parent. If the height of the parent is not set, the height is auto by default, which means the height is calculated by the browser to be as big as necessary for the content of the box to fit. It is also calculated that way if you set a min-height!
Assume you give body a height of 100%, the body is as high as your browser window. If give your outer div a min-height of 100%, it will also be as high as your browser window, but since you set no height (setting min-height does NOT affect the height property!), the height of this box is auto. So in fact, the real height (CSS standard calls this the "tentative height") is only as big as the content of your outer div (not necessarily 100%), yet since min-height says it must be 100% it will render with a height of 100%, regardless what its real height is. If you now set min-height of your inner div to 100%, those 100% mean "100% of the height of my parent box height" and the parent box height is auto, it is NOT 100%! That's why the inner div does not fill the whole screen then.
Of course you can give your outer div a height of 100%, in that case setting the min-height of your inner div to 100% will make it fill the whole screen, but now the outer div is really just 100% in height, it will not expand beyond 100% (it has a FIXED HEIGHT), not even if the inner div is bigger than that, that's why red color will not expand beyond the screen height, even if the yellow color goes beyond the screen height.
Either your outer div has a fixed height, in which case the height will be fixed (that's the whole point of a fixed height, isn't it?) or it has a flexible height, but if it has a flexible height, it will never be "higher" than required for its content (the inner div) and thus using 100% at the inner div, whether you set min-height or height doesn't matter, always refers to 100% of the outer div height and that one will be as big as required for the inner div. I hope you were able to understand what I'm saying here.
You can surely get outer div to behave the way you want (always fill at least 100% of the screen, but expand beyond that if the content requires it) by just setting it's min-height to 100%, since here min-height will refer to the body height and your body has a fixed height, but the inner div will never behave that way. Well, it can behave that way, if your outer div has a fixed width, but then the outer div will not expand, not even if the inner div would require it, instead the inner div will overflow beyond the bounds of the outer one.
I'm pretty sure it is no problem to some create a web page that will look exactly the way you want it to look, but the problem is, we (or I) don't know what it is supposed to look. I doubt you want an ugly yellow page with a red and blue border around it, do you? Yet so far this is the only page we have seen from you. I don't know what kind of color effect you are trying to achieve, whether you are using images (or if you should be using images) or how the page will really look like in the end.
I can't understand your question very clearly, I think you should set a correct overflow property to your div,
try giving it overflow: auto; or any other suitable one
The CSS Overflow Property
Take a look at this jsfiddle example: http://jsfiddle.net/2YbpZ/5/
Here, I'm stretching the content div to 100% height and it's working fine. However, when I have some really tall content within the content div this happens: http://jsfiddle.net/2YbpZ/2/
As you can see, the content div cuts off at the bottom of the viewport when I want it to carry on with the content inside it.
I know why this happens, because its parent element (html and body) are set to 100% height and it can't go more than that. To fix this I add a wrapper div and now it works: http://jsfiddle.net/2YbpZ/4/
But now there's another problem, when the content inside the content div isn't long enough to stretch outside of the viewport the content div doesn't stretch to the height of the page, like so: http://jsfiddle.net/2YbpZ/4/
So, the question is, how can I adapt this to make the content div always at least 100% height?
Dont use a wrapper, but use min-height:100% instead of height:100% on your #content div.
Note: IE6 does not support min-height.
I have overflow-x:hidden placed on the body tag of my page so that any content extending beyond the window will not be visible. No scroll bars show up, however, I can still scroll to the left / right to see the content (kinda defeats the purpose of overflow-x).
-ms-overflow-x: doesn't fix the problem either.
There is a wrapper 900px;
Inside the wrapper, there is a div inside:
width:100%;
padding-right:300px;
position:absolute;
left:200px;
I would like the inner div to hang over the right side of the window without causing it to scroll (and leaving a 200px space the its left).
Any help? Thanks!
Since the width of the div is 100%, there should never be an overflow, since the div will always fit 100% of the viewport (assuming you haven't changed the size of your body tag).
As for the padding, the padding is added on after the width, so you're saying the div is 100% of the width of it's container (the body tag), and the padding is an additional 300px to the right, which will be invisible as it's out of the viewport.
You might want to try giving the div an explicit size width and experiment that way.
It may help to see an example of your markup as well, to get an idea of what you're trying to achieve.
More HTML/CSS would be useful, but given what you have right now, my first thought is that your wrapper is still set to position: static (the default for HTML elements).
If you add position: relative to your wrapper, it will contain the absolutely-positioned element within it, and should constrain it to the overflow restrictions.
Additionally, you may want to look into the box-sizing property and how the W3C box model works. In short, your padding is adding to the width of the element, so it's actually (100% + 300px), which results in a size that is larger than the container.
If you don't want to mess with box-sizing, you can also add max-width: 100% to your absolute div to force it to not grow out of its container.
I have the following code in this fiddle , I want the height of the profile_window_content to be more than the height of the image in jcrop-tracker.Height of div is set to auto , then why it is not greater than image height. Please help.
Floated content is supposed to fall out of the bottom of containers.
Set overflow to hidden if you want to cause containers to wrap floated elements anyway.