div_html/css_WEB-ITnose で上部と高さに無効なパーセンテージを使用する問題

CSS

各位高手，小弟新手请教一个比较低级的问题
我在login.jsp中使用div将几个text框和一个botton定位到背景图上相应的位置。但是我在css中对height和top使用百分比时无效，但使用像素又是可以的。我百度了该情况，一般都说是因为IE默认body的height为空的，必须定义body的height才可以。但我已定义了body的height为了100％，仍然无效。只好请教各位高手了。下面是具体的代码：

css文件中作了几个定义：
.loginBg{
background-repeat:no-repeat;
background-position:center top;
background-image:url(../images/loginBackGroud.jpg); 
background-attachment:fixed;
    margin: 0px;
width:100%;
height:100%;
}
.loginTableTop{
position:relative;
float:center;
top:14.29%;
/*top:100px;*/
width:50%;
height:53.57%;
z-index:999;
background-color:green;
}
.loginTable{
position:relative;
float:center;
left:0%;
top:46.86%;
/*top:328px;*/
width:30%;
height:17.86%;
/*height:125px;*/
z-index:999;
background-color:red;
}
.loginTableBottom{
position:relative;
float:center;
width:80%;
heigth:32.86%;
top:500px;
z-index:999;
background-color:blue;
}


我在login.jsp文件中是这样使用的

        
            
                
            
        
        
            
                

                    

    




             

     

    

    

    

「送信」 value="ログイン">
表>
/html>


ディスカッション (解決策) に返信

誰も助けたくありませんか? ? ? ? ?

DIV が絶対位置にある場合にのみ、高さはパーセンテージを使用できます

DIV の style="position:ralative" を絶対に変更するという意味ですか?
ただし、この場合、ブラウザ ウィンドウのサイズが変更されると、位置も変更されます。
それでも相対を使用したい場合、高さを設定するにはどうすればよいですか?
IE9 以降で、position:ralative を使用するブロックレベルの要素の場合、高さのパーセンテージが無効です。 Firefox および Webkit ブラウザーは動作します。

さまざまなブラウザと互換性を持たせるために、min-height 属性を追加することをお勧めします

また、現在のレイアウトは非常に悪く、テーブルが多用されています

ご希望のレンダリングを投稿してください。何が起こるか見てみましょう。助けます。

これは背景画像です:

私のアイデアは、マップの位置にユーザー ボックス、パスワード ボックス、ログインを配置することです。位置は相対的なもので、ブラウザのサイズが変わると自動的に調整できます
ただし、高さは無効です

ログイン ダイアログ画面を中央に配置しますか?


はい、 をマップのログイン ボックスと一致させたいです
視覚的には、アカウントのパスワードはベース マップのログイン ボックスに入力されます

背景とログイン ボックスは分離する必要があります。そうしないと位置決めが難しくなります。

Q 225733202 を追加