Solved

HTML - Table with 100% Height

Posted on 2013-12-04
13
403 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
  • 6
  • 4
  • 2
  • +1
13 Comments
 
LVL 2

Expert Comment

by:Aijaz Chauhan
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 2

Expert Comment

by:Aijaz Chauhan
Comment Utility
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
Comment Utility
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
Comment Utility
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

Author Comment

by:feesu
Comment Utility
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
Comment Utility
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
Comment Utility
AlexCode,

Your solution is just perfect!

Thank you,
0
 
LVL 2

Expert Comment

by:Aijaz Chauhan
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
It fixed it. You're a hero :)
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

744 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now