1

我们有一个 asp.net 母版页，它使用表格定义了我们的 Web 应用程序布局。目标是让内容页面在显示页眉和页脚后占据整个可用屏幕空间。这在 IE 中对我们很有效，但在 Chrome 或 FireFox 中无法正常工作。

Chrome 和 FireFox 的情况是内容部分仅扩展以包裹内容，例如欢迎屏幕最终只占据屏幕的一小部分，在屏幕底部留下一个大的空白部分。

这是我们的布局结构的基本示例：

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

4 回答 4

2

您的问题是您正在使用表格进行布局。这可以通过使用像粘性页脚 ( http://ryanfait.com/sticky-footer ) 之类的适当 HTML 轻松实现。

我建议获取 HTML5 样板或类似文件 ( http://html5boilerplate.com ) 并从那里开始工作。

如果这是一个现有的 Web 应用程序，您无法更改其 HTML，那么 Javascript 可能是一个解决方案......

于 2013-03-06T16:32:41.547 回答
1

没有好的方法可以在 CSS 中指定元素至少应与屏幕一样高。你必须求助于 JavaScript。

由于确定客户端屏幕的高度也是每个浏览器版本可能略有不同的事情，因此使用 jQuery 是最安全的：

// tableID is the ID of your element that you want to take up the space
$("#tableID").height($(window).height());
于 2013-03-06T16:31:57.803 回答
1

您的代码中缺少一些<td></td>和"。

还添加

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

到样式表。而 HTML 是

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

实时预览 >> jsfiddle

于 2013-03-06T16:38:12.527 回答
0

margin-top:0px在您的内容 tr 标签中设置

于 2013-03-06T17:57:53.817 回答