0

ボディの背景があり、そのボディに div があります。ウィンドウのサイズ変更時に、アプリケーションをそのようにしたいです。幅を維持するために、本体に固定幅を指定すると、ウィンドウのサイズ変更時にスクロールバーが表示されず、その結果、ページ全体が表示されません。固定幅を指定しないと、ページの配置が変更され、ウィンドウのサイズ変更時に本文内の要素が折りたたまれます。これが私のコードです。よろしくお願いします。

 body.background
{
    background: url(../images/common/header/Background_color.png);
    background-repeat:repeat-x;
    background-attachment:fixed;
    background-position:top center;  
    height: 100%;
    width: 100%;
    border: 0;
    background-size:contain; 
    position:fixed;
    overflow:auto;
}

div.emptybody
{
   height:100%;
   width:97%;
   background-color: rgb(255, 255, 255);
   margin: 0px 25px 25px 25px;
   height:470px;
   background-position:center;
   background-repeat:no-repeat;
   background-attachment:fixed;
}


<body class="background">
<div class="emptybody">

-------------other elements and contents---------------

</div>
</body>
4

3 に答える 3

0

体に固定幅を与えると、幅を維持することができます。

コードで固定幅を使用していません。「%」の使用は動的です。ウィンドウのサイズを変更すると、画面のすべての境界から常に「%」で計算されます。

画面の境界を超えるには、ページが「オーバーフロー」する必要があります。これには 2 つの方法があります。

  1. div に固定幅をピクセル単位で指定します

    div.emptybody { 高さ: 自動; 幅: 900px;}

  2. 親 (div.emptybody) 内の「子」div に固定幅を与えます。

    div.emptybody { 高さ: 100%; 幅: 97%;}
    div.emptybodyChild {高さ: 自動; 幅: 900px; }

于 2013-06-13T07:19:07.510 に答える
0

これを試して

body {
    height: 100%;
    bottom: 0px;
    width: 100%;
    background-color: black;
}
div {
    position:absolute;
    height: 10px;
    width: 200px;
    margin:10px;
    background-color: red;
}

また、margin-top/left/ を指定するか、単に top/left/ の値を使用して、div の位置を指定することもできます

于 2013-06-13T07:42:31.840 に答える
0

あなたは正しい軌道に乗っていましたが、オーバーフローを間違って適用しました。オーバーフローはコンテンツの div 用である必要があり、スクロールするように設定する必要があります。ここで見つけてください: http://jsfiddle.net/msbodetti/EWwJA/

また、div に 2 つの高さを指定しました。他の高さ 470px の前に 100% の高さを適用しました。コンテンツに必要な場合は、メインの div 内に div またはスパンを追加して、幅と高さを固定することもできます。

HTML:

<body class="background">
<div class="emptybody">

    <span class="fixedText">-------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents----------------------------other elements and contents---------------</span>

</div>
</body>

CSS:

 body.background
{
    background: #000;
    background-repeat:repeat-x;
    background-attachment:fixed;
    background-position:top center;  
    height: 100%;
    width: 100%;
    border: 0;
    background-size:contain; 
    position:fixed;
}

div.emptybody
{
   width:250px;
   background-color: rgb(255, 255, 255);
   margin: 0px 25px 25px 25px;
   height:200px;
   background-position:center;
   background-repeat:no-repeat;
   background-attachment:fixed;
   overflow:scroll;
}
于 2013-06-13T09:52:45.173 に答える