Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

HTML - Table with 100% Height

Posted on 2013-12-04
13
Medium Priority
?
416 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
Find the IP of a Linux Server in Command Line

Knowing your server’s IP address(s) can be a useful bit of information to have for various reasons. This tutorial will teach you how to check the IPs of any modern Linux server. To follow along will simply need access to the server via SSH or TTY.

 
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 2000 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 2000 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

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

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

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
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…
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.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

730 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