0

画面サイズに基づいてページ上で div を移動しようとすると問題が発生します。

ページ (以下のコード) に幅が正しく表示されていますが、ユーザーがページのサイズを変更したときに高さが正しく表示されないようです。

私がやろうとしていることは..

  • 上部に表示されるヘッダーがある
  • 左側にメニューがあるページ
  • ページテキストを表示する右側のページ
  • 下部のフッター

私がやろうとしていることのサンプル

私のページは以下のようになります。

index.htm:

<style type="text/css"> 
    body{
    margin:0;
    padding:0px;
    line-height: 1.5em;
    padding-bottom:10px;   /* Height of the footer */
    } 

    #topsection{
    background: #EAEAEA;
    height: 90px; /*Height of top section*/
    }
</style>


    <!-- top -->
    <div id="topsection">
        <div>
            This is the top
        </div>
    </div>


    <!-- Left side -->
    <div ID="left" STYLE="width:260px; left:0px; height:90%; float:left;">
        <iframe src="test.htm" NAME="menu" width="270px" height="100%" frameborder="0"></iframe>
    </div>

    <!-- right side -->
    <div ID="right" STYLE="height:90%; left:0px; float:left;">
        <iframe src="test1.htm" NAME="right" width="100%" height="100%" frameborder="0"></iframe>
    </div>

    <!-- footer -->
    <div ID="foot" STYLE="height:10%; left:0px; top:90%; float:left;">
        <iframe src="foot.htm" NAME="footer" width="100%" height="100%" frameborder="0"></iframe>
    </div>

test.htm:

<body bgcolor="#808080">

test1.htm:

<body bgcolor="#88888888">
right side text

foot.htm:

<body bgcolor="#9999999">
This is a footer
4

3 に答える 3

2

あなたのヘッダー： 

#topsection{
    position:absolute;
}

あなたのフッター：

#foot{
    position:absolute;
}

あなたは絶対を使うべきだと思います

cssの位置「タグ」に関する詳細情報は次のとおりです。

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

于 2012-07-06T07:47:37.997 に答える
1

トップバーとフッターに対してこれを行います。希望はあなたの場合にうまくいくかもしれません。

   #topsection{
       position:fixed;
................ 
        }
    #foot{
position:fixed;
................ 
}
于 2012-07-06T07:41:53.923 に答える
0

これはまさにあなたが求めているものです。ヘッダーとフッターを修正

于 2012-07-06T07:43:27.890 に答える