1

テーブルを使用して Web アプリケーションのレイアウトを定義する asp.net マスター ページがあります。目標は、ヘッダーとフッターを表示した後、使用可能な画面領域全体をコンテンツ ページで占有することです。これは 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）を入手して、そこから作業することをお勧めします。

これがHTMLを変更できない既存のWebアプリである場合は、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 に答える