0

要素がビューポートの高さ 100% になるようにするには、親の高さが固定されているか、html と body が高さ 100% である必要があることを理解しています。

私の問題は、画面の中央に必要な紹介タイトルがあることです。簡単だと思いました。divを幅と高さ100％にしてから、ユーザーが下にスクロールして残りのコンテンツにアクセスします...それほど簡単ではありません. div の高さを 100% にするには、html の高さを 100% にする必要がありますが、そうすると、コンテンツではなくビューポート (html 100%) の高さを読み取るため、グラデーションの背景が繰り返されます。

サイトはこちら。

コード：

<div class="intro">
   <div class="intro_text">
        <h2><?php the_title(); ?></h2>
        <h3><?php the_date('Y'); ?></h3>
   </div>
</div>

<div id="content">
   <!--The user scrolls down to see this-->
</div>

html {
width: 100%;
height: 100%;
}

body {
width: 100%;
height: 100%;
background-color: #004000;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ec448c), to(#5a94bc));
background: -webkit-linear-gradient(top, #ec448c, #5a94bc);
background: -moz-linear-gradient(top, #ec448c, #5a94bc);
background: -ms-linear-gradient(top, #ec448c, #5a94bc);
background: -o-linear-gradient(top, #ec448c, #5a94bc);
}

.intro {
width: 100%;
height: 100%;
}
4

4 に答える 4

1

負のマージンのトリックを行うことができます：

.intro { 
    height: 200px; 
    width: 200px; 
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
}

すべての祖先が位置を持っていない限り、ビューポートの div が中央に配置されます。トリックは、div をビューポートの幅と高さの 50% を左上隅から離して配置することです。次に、.intro div の高さと幅の半分に等しい負のマージンを上と左のマージンに使用します (これにより、div が新しい中心点の中央に配置されます)。

注: 高さと幅を調整する場合は、負のマージンも調整する必要があります (たとえば、幅を 300 に変更する場合、負の左マージンは幅の半分の 150 にする必要があります)。 IE6なので安心。

于 2013-08-21T14:37:14.790 に答える
0

私はあなたの質問に少し混乱していますが、あなたのバックグラウンドを繰り返したくない場合は、試すことができます

body { background:url(your_image.jpg) top no-repeat; background-position:fixed; }

于 2013-08-21T14:38:46.900 に答える
0

背景を固定するには：グラデーションを体に適用する代わりに、別の固定要素を使用してください

div#mybackground {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  background: ..gradient..;
}

これで、サイトで .intro_text { height:100%; を実行できます。次に、JavaScript を使用して、.intro_text の行の高さを .intro_text の高さと同じ値に設定し、これを h3 に追加します。

.intro_text h3 {
  position:relative;
  top: -90%;
}

top -90% に代わるより良い方法は、top を .intro_text の高さの負の値に設定することです。

于 2013-08-21T14:36:16.390 に答える
0

背景を に設定し、htmlそれに を追加 overflow: hiddenします。次に、 に を追加overflow: autoしbodyます。

デモ

于 2013-08-21T15:00:51.070 に答える