none
IE8においてTABLEおよびDIVの高さを100%にしたい RRS feed

 > 

  • 質問

  • Question
    サインインして投票
    0
    サインインして投票

    VS2005
    ASP.NET 2.0(内部コードVB.NET)
    で開発しています。
    対象ブラウザはIE８です。

    AjaxのUpdatePanel内にて1行2列のTABLEを配置し、2つのTD内にそれぞれDIVを配置しています。
    STYLEにて
    html,body{height:100%;}
    #UpdatePanel1 {
    width: 100%;
    height: 100%;
    }
    を設定し、TABLEおよび２つのDIVのスタイルにはheight:100%を設定しているのですが、実行してみると高さが100%になりません。
    どうすれば高さを100%で表示することができるのでしょうか？
    aspxソース

    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>無題のページ</title>
    <style type="text/css">
        html,body{height:100%;}
        #UpdatePanel1 {
            width: 100%;
            height: 100%;
        }    
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <table style="border-right: red thin solid; border-top: red thin solid; border-left: red thin solid;
                    width: 336px; border-bottom: red thin solid; height: 100%">
                    <tr>
                        <td>
                            <div style="border-right: aqua thin solid; border-top: aqua thin solid; border-left: aqua thin solid;
                                width: 100%; border-bottom: aqua thin solid; height: 100%">
                                <asp:TreeView ID="TreeView1" runat="server">
                                    <Nodes>
                                        <asp:TreeNode Text="Chapter 1">
                                            <asp:TreeNode Text="Section 1" />
                                            <asp:TreeNode Text="Section 2" />
                                        </asp:TreeNode>
                                        <asp:TreeNode Text="Chapter 2">
                                            <asp:TreeNode Text="Section 1" />
                                            <asp:TreeNode Text="Section 2" />
                                        </asp:TreeNode>
                                    </Nodes>
                                </asp:TreeView>
                            </div>
                        </td>
                        <td>
                            <div style="height: 100%">
                            </div>
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
        </asp:UpdatePanel>
        &nbsp;&nbsp;
    </form>
</body>
</html>

    TABLEには赤枠を、DIVには青枠を設定しております。互換表示の場合ですと期待通りの表示となるのですが、
    互換表示じゃない場合は内容のサイズに合わせた高さで表示されてしまいます。
    • 編集済み ritto 2009年5月29日 5:30
    2009年5月29日 4:41
    |

回答

  • Question
    サインインして投票
    0
    サインインして投票
    IE7で見てみましたが、<td>のheightを明示的に100%にしたら希望されている状態になりました。
    IE8とのことですので、F12キーで開発者ツールを起動し、どのタグがどのサイズを持っているのかを直接見て確認した方が早いと思いますよ。
    そうすることで例えば、<body>にmarginがつけられていることが見えたりします。（bodyのmargin: 0にして、その他のタグも調整すれば、100%の状態でスクロールバーを出さなくできるでしょう。）
    • 回答としてマーク ritto 2009年6月2日 6:33
    2009年5月29日 9:16
    |

すべての返信

  • Question
    サインインして投票
    0
    サインインして投票
    IE7で見てみましたが、<td>のheightを明示的に100%にしたら希望されている状態になりました。
    IE8とのことですので、F12キーで開発者ツールを起動し、どのタグがどのサイズを持っているのかを直接見て確認した方が早いと思いますよ。
    そうすることで例えば、<body>にmarginがつけられていることが見えたりします。（bodyのmargin: 0にして、その他のタグも調整すれば、100%の状態でスクロールバーを出さなくできるでしょう。）
    • 回答としてマーク ritto 2009年6月2日 6:33
    2009年5月29日 9:16
    |
  • Question
    サインインして投票
    0
    サインインして投票
    ありがとうございます。
    TDの高さを明示的に設定してみましたが、IE８ではやはり無理でした。
    開発ツールを見ながらいろいろやってみましたが、解決策は見つかりませんでした。
    とりあえず、100%表示されなくてもいいという結論に達しましたので、
    この質問は閉めたいと思います。
    2009年6月2日 6:34
    |