Solved

HTML - Table with 100% Height

Posted on 2013-12-04
13
415 Views
Last Modified: 2013-12-09
Hi There,

I have an HTML table in an ASPX that I want to have as full page of the browser (width & height).

100% width works, but 100% height doesn't!

What is missing?

Thank you,
0
Comment
Question by:feesu
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 4
  • 2
  • +1
13 Comments
 
LVL 2

Expert Comment

by:Aijaz Chauhan
ID: 39697623
You can do it in number of ways

1)you can use fix height by giving height="800px" but it will be fixed with 800px

2) use a div: give it style="min-height:800px;height:auto"
    (you can do same thing with table also).

I hope these solution will be helpfull to you. Thank You
0
 
LVL 39

Expert Comment

by:Pratima Pharande
ID: 39697665
Can you share the html code ?
May be you are setting height 100 % to inernal table and some hight is already set to parent table.
0
 

Author Comment

by:feesu
ID: 39697691
Thank you experts for writing back.

If you happen to have seen how DNN works, I load user controls in the cells of the table at runtime, and I want even of the page is empty, the table to be full page because it has a footer menu at the bottom cell of it, and it should always be at the bottom!

I also recently added a div in the background of that table to animate some images using javascript.

I am sharing the code:
default.zip
0
Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

 
LVL 2

Expert Comment

by:Aijaz Chauhan
ID: 39697719
add style in div(id="div_loadingPanel") like

style="height:100%;min-height:1000px;"

It will work for sure.


I have tested one example that is as given below

<div style="height:100%;min-height:1000px; border:solid 1px green;">
      
      <div style="height:1500px; border:solid 1px red;">
      <div>

</div>
0
 

Author Comment

by:feesu
ID: 39697726
Aijaz_Chauhan,

1- I don't get it. Why the div_loadingPanel? This panel has nothing to do with my page. It is just a loading panel to show progress during Ajax!

2 - My problem here is the html table not the div. However, why 1000px height?? That's not a 100%, I want the html table or the item in question to be full height of page no matter what the size of the page is, and upon resizing the page as well!

Did I miss anything?
0
 
LVL 2

Expert Comment

by:Aijaz Chauhan
ID: 39697742
Ok i got it. sorry it was my mistake

do one thing wrap your table with div and give it a style.

Example
 
<style>
.backgrondDiv
{
   height:100%;
   min-height:1000px;
}
</style>

<div class="backgrondDiv''>
  <table id="tbl_0_toCenter" border="0" bordercolor="Red" cellpadding="0" cellspacing="0"
        style="width: 100%;">

     // your code is here for table
  </table>
</div>
0
 

Author Comment

by:feesu
ID: 39697769
Hi  Aijaz_Chauhan,

Unfortunately that did not solve my problem.

I am attaching how it looks like at runtime.

The div of the background images with ID "footer" is the one loading the blue bg image.

The table inside the div is the one with red border, check our the footer where the "copyrights" is. It should be at the bottom of the page, and that's why I want it's height to be 100%.

This table ID is tbl_3_container
snap.png
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 39697836
Hi mate,
my solution for that is absolute positioning, here's a demo: http://jsfiddle.net/AlexCode/8XC63/

HTML
<table class="tblLayout" border="1">
    <tr>
        <td colspan="2" height="96px">
            <h1>Header</h1>
        </td>
    </tr>
    <tr>
        <td width="33%">
            <h1>Left</h1>
        </td>
        <td>
            <h1>Content</h1>
        </td>
    </tr>
</table>

Open in new window

CSS
.tblLayout {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

Open in new window

0
 

Author Comment

by:feesu
ID: 39697862
AlexCode,

Your solution is just perfect!

Thank you,
0
 
LVL 2

Expert Comment

by:Aijaz Chauhan
ID: 39697873
I go through your posted apsx page but i don't get the table which actually contains a all dynamic data.


I suggest you that , give minimum height to a div or table or a  tr which contains dynamic data. otherwise you need to post your html with css.
0
 

Author Comment

by:feesu
ID: 39705460
Aijaz_Chauhan,

It's ok. Thanks for all the time and effort you made for trying to help me. I really appreciate it.

AlexCode,

In the same page, I have hidden the scroll bars because the background image is on some screens off the page. However, if I click-and-hold the mouse cursor on the page and move it down, the whole page scrolls down! I have basically hidden the scroll bars because I don't want the user to scroll the page.

Any idea?
0
 
LVL 30

Assisted Solution

by:Alexandre Simões
Alexandre Simões earned 500 total points
ID: 39705593
Well I don't know exactly what's going on there but I guess setting the position to fixed instead of absolute should do the trick:
.tblLayout {
    position:fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

Open in new window

If it doesn't fix I will need a live sample to work on.
0
 

Author Comment

by:feesu
ID: 39705637
It fixed it. You're a hero :)
0

Featured Post

Want Experts Exchange at your fingertips?

With Experts Exchange’s latest app release, you can now experience our most recent features, updates, and the same community interface while on-the-go. Download our latest app release at the Android or Apple stores today!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question