Auto height of element

Question

I have 4 main sections on my website. Each one of them has width and height set to 100% using

    width:100%;
    height:100%;
    position:relative;

The problem is in the 3rd section where there is a responsive table which is obviously changing its height. As long as it changes its height, half of the content isn't visible because it's covered by the 4th section. I tried to use

overflow:auto

which didn't work. Is there any way to make contents height 100% yet let it auto adjust its height afterwards?

I even tried to use

height:auto

but the result was that the 3rd section disappeared completely.

Can you clarify what you mean by "Is there any way to make contents height 100% yet let it auto adjust its height afterwards". It's not clear what behavior you are trying to accomplish... — Brian, Jun 15 '15 at 14:25
what i am trying to acomplis , to my div change automaticly its height when the content inside its too big for it , but whenever i set height:auto to it, it completly dissapear. — Darlyn, Jun 15 '15 at 14:27
Height 100% should autoscale... you should post a jsfiddle, the issue you are seeing is really unclear from reading this. — Brian, Jun 15 '15 at 14:28
http://jsfiddle.net/Trolstover/tfxss1sL/ here , copied it to jsfiddle. as you can see you cant see the whole table. — Darlyn, Jun 15 '15 at 14:32
You have a lot of css issues here; the issues you have are being caused by your relative positioning. In general, the behavior you want is the default browser behavior and you are breaking it. Check out some of the changes I have made here: https://jsfiddle.net/tfxss1sL/3/ — Brian, Jun 15 '15 at 14:49
well , your code just broke the structure (drop downs) , i removed position:relative but it still does what it shouldnt.Seems like the last section is still on the same place after the tables container adjusts its height — Darlyn, Jun 15 '15 at 15:31

score 0 · Answer 1 · answered Jun 15 '15 at 14:32

0

Try setting the divs to:

min-height: 100%;
min-width: 100%;

This will ensure that the elements don't become less than 100% height and width, but also allow for expansion.

answered Jun 15 '15 at 14:32

James

102
11

score -2 · Answer 2 · edited May 23 '17 at 12:01

You have to set at a pixel height on at least one like style="width: 1200px;"

If you want to dynamicaly adjust the size of the website, try it using a javascript function.

How to get height and width after window resize

http://www.w3schools.com/jsref/event_onresize.asp

Hope this helps.

PS: I'm also a noob. If I'm wrong, please correct me.

Edit: Did you tried it with a Javascript function, who is triggered by the window.resizeEvent? (resizeEvent is added to the body like <body onresize="resize()"></body>

I just got an example with jquery but this would look like:

<script>
   function resize() {
       $("#div_container_to_resize").css("height:", (window.innerHeight) + "px");
   }
</script>

A pure javascript solution would look like:

<script>
   window.addEventListener('resize', resize); 
   function resize() {
       document.getElementById("div_container_to_resize").setAttribute("height:", window.innerHeight + "px");
   }
</script>

For more informations and details look at the posted links.

these are two different links! http://stackoverflow.com/questions/12596299/how-to-get-height-and-width-after-window-resize http://www.w3schools.com/cssref/pr_class_display.asp — Ore, Jun 15 '15 at 14:30
Whilst this may theoretically answer the question, [it would be preferable](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. — Paulie_D, Jun 15 '15 at 14:32

Auto height of element

2 Answers2