1

We have an asp.net master page that defines our web application layout using Tables. The goal is to have the content page take up the entire available screen real estate after having displayed the header and footer. This works for us fine in IE but does not work as intended in Chrome or FireFox.

What happens with Chrome and FireFox is that the content section expands only to wrap the content, which, in instances like a welcome screen ends up taking only a small portion of the screen leaving a big blank section at the bottom of the screen.

Here is a basic example of how our layout is structured:

<table style=height:80%;width:100%" cellpadding="0" cellspacing="0">
<tbody>

 <tr>  
  <td colspan="2">
  <!--Header Banner goes here This displays fine--> 
  </td> 
 </tr>

<tr style="height:100%" valign="top">
 <!--Content Goes Here. Problem is that page only expands 
      as much as its content section vs filling up the whole page. -->

</tr>
<tr>
<!--Footer Goes here. This works fine!!-->
 </tr>
</tbody>
</table>
3
  • 1
    ...layout using tables? CSS is for layout. Tables are for tables. Mar 6, 2013 at 16:31
  • His time machine must be parked around here somewhere... :p
    – ConorLuddy
    Mar 6, 2013 at 17:21
  • 1
    Alright, so I agree with you folks, but can't just change a legacy application without approval. This is what we have for this 8-years old application and we have to live with it, unfortunately :)
    – Sam A.
    Mar 6, 2013 at 18:47

4 Answers 4

2

Your problem is that you're using tables for layout. This would be easily achieved with proper HTML using something like a sticky footer (http://ryanfait.com/sticky-footer).

I'd recommend grabbing the HTML5 boilerplate or similar (http://html5boilerplate.com) and working from there.

If this is an existing web app that you can't change the HTML of then Javascript might be a solution...

2
  • 1
    Thanks @conorLuddy, yeah it is unfrotunately something we have to live with until our next major version re-write. I will look into javascript...
    – Sam A.
    Mar 6, 2013 at 18:48
  • No worries. I know the feeling when you can't alter legacy code. It sucks. If you put a div in the content area and give it a fixed height or min-height it might be another solution. It depends on whether or not your content will need to scale vertically though...
    – ConorLuddy
    Mar 7, 2013 at 10:10
1

There is no good way to specify in CSS that a element should be at least as high as the screen. You have to resort to JavaScript.

Since determining the height of the client are of the screen is again something that every browser version might do slightly differently, it is safest to use jQuery:

// tableID is the ID of your element that you want to take up the space
$("#tableID").height($(window).height());
2
  • 1
    ...or he could approach it the correct way and use CSS and no tables at all. Mar 6, 2013 at 16:33
  • @knagis thanks for your input. I will give this a try since it seems to be the most feasible given our situation and what we are able to change with our application today.
    – Sam A.
    Mar 6, 2013 at 18:50
1

You are missing some <td></td> and " in your code.

Also add

html,body {
    height:100%;
    min-height:100%;
}

to the StyleSheet. And HTML is

<table style="height:80%;width:100%;background-color:yellow" cellpadding="0" cellspacing="0">
<tbody>

 <tr>  
  <td colspan="2" style="background-color:red">
  Header Banner goes here This displays fine
  </td> 
 </tr>

<tr valign="top">
    <td  style="background-color:green;height:100%">Content Goes Here. Problem is that page only expands as much as its content     section vs filling up the whole page.</td>
</tr>
<tr>
    <td  style="background-color:blue">Footer Goes here. This works fine!!</td>
 </tr>
</tbody>
</table>

Live preview >> jsfiddle

3
  • Thanks for input and catch. In trying to edit out any application-specific code looks like I may have trimmed too much from our markup.
    – Sam A.
    Mar 6, 2013 at 18:50
  • Hello @madhushankarox This still did not work for me when integrated with our ASP.NET MasterPage. I did however confirm it working in jsFiddle. Much appreciated.
    – Sam A.
    Mar 11, 2013 at 22:21
  • It may be because your table has wrapped by other elements without a height or something. eg: `<div><table></table></div> Mar 12, 2013 at 0:19
0

Set margin-top:0px in your content tr tag

1
  • Thanks for your input. That did not however help my case here.
    – Sam A.
    Mar 6, 2013 at 18:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.