Solved

HTML - Table with 100% Height

Posted on 2013-12-04
13
410 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
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
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 
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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Code Coverage and Coding Standards 2 43
Date on a table 16 33
tiled banner 2 12
I really need help in my css for such a simple change, but can't find the code to do it 13 51
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

679 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