Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 418
  • Last Modified:

HTML - Table with 100% Height

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
feesu
Asked:
feesu
  • 6
  • 4
  • 2
  • +1
2 Solutions
 
Aijaz ChauhanCommented:
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
 
Pratima PharandeCommented:
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
 
feesuAuthor Commented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
Aijaz ChauhanCommented:
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
 
feesuAuthor Commented:
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
 
Aijaz ChauhanCommented:
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
 
feesuAuthor Commented:
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
 
Alexandre SimõesManager / Technology SpecialistCommented:
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
 
feesuAuthor Commented:
AlexCode,

Your solution is just perfect!

Thank you,
0
 
Aijaz ChauhanCommented:
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
 
feesuAuthor Commented:
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
 
Alexandre SimõesManager / Technology SpecialistCommented:
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
 
feesuAuthor Commented:
It fixed it. You're a hero :)
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 6
  • 4
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now