I'm trying to make a div's height stretch out to 100% but everything I have tried has failed.
I HAVE looked around the web for solutions on this, and have tried every single one, yet I am still doing something wrong.
Here is my code: http://jsbin.com/elijuh/3/edit
Output: http://jsbin.com/elijuh/3
I have made every other div above the div, I want to stretch to also adjust to 100% which is what everyone on the Google is suggesting, but still nothing.
The two divs I'm trying to adjust is quick_analy_main and quick_analy_graph.
I know it is probably really easy to do, but I can't figure it out.
Can someone tell me where I've gone wrong please.
I think I fixed the issue: http://jsbin.com/elijuh/13/edit
When you set height to 100%, you always have to ask the question "100% of what?". It's always the height of the parent, so what is the parent in this case? It all bubbles up to the body element here. So what is the body set to? Nothing. Set it to 100% and see what happens. But html must also have a height set because it is the parent of the body.
Related
This might be a silly question. However, I couldn't find the exact reason for this question. Whenever I set 100% to width and height of a div it doesn't take this behaviour but when I set the width and height of the Html and body elements to 100% then the div with 100% size works perfectly. What is the reason behind it? Thanks in advance :)
Just ask yourself: 100% of what? The answer is: 100% of the parent element, which in many situations is the body, whose parent again is the HTML tag.
As the subject says, I can't seem to get min-height to work on an element when it's parent also has min-height set. I've written up a jsfiddle example to show you what I'm talking about:
http://jsfiddle.net/cE29B/5/
My purpose of this is of course to have a footer that's always at the bottom of the window, or site, depending on site size.
Would anyone happen to know how to get around this problem and still have that footer where I want it?
Thank you!!
EDIT: To be more clear, the main problem here is that #content (green background) is only one line high when the CSS says it should have a minimum height of 100%. This works if it's parent has a height that's either % or px, or a min-height that's only px. A % min-height breaks the child's % min-height.
Hey you can give your footer position and bottom 0;
remove margin-top as like this check to live http://jsfiddle.net/rohitazad/cE29B/8/
I have now searched for hours, but haven't found a solution yet. I hope anyone out there can help me :)
I searched and found the following script: http://jsfiddle.net/tcaVN/81/
This script is great but if the div#center isn't full of content, it looks like the following: jsfiddle.net/tcaVN/80/
I actually want to resize it to 100% height even if it isn't full of content. Is this possible and if yes: How?
I really don't get it.
Many thanks in advance!
Edit: Thank you all for your help!
With my own design it now looks like this: http://jsfiddle.net/tcaVN/102/
The problem is, that you now can scroll even if there is no content.
Edit2: I have found the issue! There was a padding too much in #content.
my answer is here..
http://jsfiddle.net/tcaVN/101/
edit:
http://jsfiddle.net/tcaVN/103/ ( this is with text which extends beyond body, just added to show that css changes works for both the cases.. )
what i did was added
height:100% to html,body and #bind
and added min-height:100% to #center
based on this
http://www.tutwow.com/htmlcss/quick-tip-css-100-height/
This should work.
The likely problem is that you assume that the body and html containers default to 100% width and 100% height. This is not the case. By default, the width is 100% but the height adjusts to the content inside the html/body containers.
Hopefully I understood your question.
this one will work, even if the content exceeds the div.
setting min-height: 100% instead of fixing height:100% ensures a flexible div.
I know this is a common question and I've already tried the searched methods. Here is the jsfiddle: http://jsfiddle.net/ZfZK9/ and here's my problem
Basically, I've got a main div container. It has an image and some text. I need the image on one side, then the text on the other. I tried putting the img in a div, setting it's height to 100%, and floating it right, but as you can see in the jsfiddle once the text goes below the image it doesn't keep the column formation.
I'm not sure why the display: block and height: 100% aren't doing any good on the left column.
Thanks
Edit: I'm assuming height: 100% doesn't work because that gets rendered and then text gets added later. I'm still trying to find an elegant solution though, and general-purpose.
Another problem, is when I set both divs (of the image and of the text) to float: left, it just displays the image then the text under it
It can be done like this: http://jsfiddle.net/ZfZK9/34/
Just create two div's as columns around both sides, then set both those sides to a specific width, then play around with the padding and margin til you get what you want.
To keep your border around your content, I added a clearfix which will help contain the two floated columns....
http://jsfiddle.net/ZfZK9/34/
Had to edit a few things, took a bit to get it right, but now all should be working. Contains two floated divs, with a browser proof clearfix added to the mix. If you wanted the image, or the sidebar to appear as if it continues to the bottom, read about Faux Columns
You have some css in the html and some in the css so this is hard to follow. What I believe I see is a common mistake where you must consider when you set something to 100% you have to think, 100% of what? It's always the parent of that element. So what is the parent set to? If nothing, there's your problem.
Just remember that if the parent is also set to 100%, the same question will apply.
EDIT: I see the problem now. I misunderstood. What you want to do then is set the width of the right div, the one with the text. Float that right and it should solve the problem.
i made myself a Speed Dial-like homepage with links I visit the most.
Now, i made it elastic, so when browser window is narrowed horizontally, the boxes getting narrower too.
What I want is that when browser window is narrowed vertically, that boxes get narrower again.
I tried with several percentage height rules but it didn't work, need help.
Here is the page I'm working on its one-file page so CSS is not separated.
http://www.purplerspace.com/dl/
You have to add the height percentages to almost all the divs if you want it to work. Add height: 100% to html, body then the wrappers and also the lis and yeah, the a style too.
Don't know if it's optimal but tables for this should work. Set the table height and width to 100%. And don't forget to set your html and wrapper tag to 100% in height.