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.

Answer 1

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.

Answer 2

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.

Auto height of element

2 个答案: