位置付けの問題

Question

私はいくつかのコンテンツを私の英雄/ジャンボトロン画像の下に置いていくつかの問題を抱えています。 下線のものは重要ではありません！いくつかのjqueryを使って読み込み時にアニメーション化されます。以下はコード：

JSFiddle

私はジャンボトロンの画像

HTML以下、 "我々は何をすべきか" 内容にしたい：

<div class="hero"> 
    <div class="hero-text"> 
     <h1 class="invis-selection">Header Text</h1> 
     <div id="underline-1"></div> 
     <div id="underline-2"></div> 
     <div id="underline-3"></div> 
     <div id="underline-4"></div> 
    </div> 
    <img class="hero-img" src="img/city-night.png" alt="Hero Image" /> 
</div> 

<div class="wwd-main"> 
    <h1>What we do</h1> 
</div> 

はCSS：

.hero{ 
    position: fixed; 
    width: 100%; 
    height: 100%; 
    text-align: center; 
    color: #fff; 
    font-family: 'Lato', sans-serif; 
} 

.hero-text { 
    position: absolute; 
    width: 640px; 
    height: 125px; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
} 

.hero-text h1{ 
    position: absolute; 
    width: 640px; 
    height: 125px; 
    font-size: 7.1em; 
    z-index: 1; 
    margin-top: -15px; 
} 

.hero-img { 
    width: 100%; 
    height: 100%; 
} 

.wwd-main { 
    position: relative; 
    height: 30%; 
    background-color: #eeeeee; 
    z-index: 100; 
} 

Answer 1

しかし、これはあなたの画面が縦に小さくなるにつれて、あなたが一番下にテキストがゆっくりと消え気づくでしょう、あなたの問題を解決します。これは、要素のサイズを定義するために％を使用しているためです。画面が縮小するにつれて、ボックスは画面サイズよりも小さくなります。これを解決するには、.wwd-mainで使用した10％を90pxに変更します。

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
.hero{ 
 
    position: fixed; 
 
\t width: 100%; 
 
    height: 100%; 
 
\t text-align: center; 
 
\t color: #fff; 
 
\t font-family: 'Lato', sans-serif; 
 
} 
 

 
.hero-text { 
 
\t position: absolute; 
 
\t width: 640px; 
 
\t height: 125px; \t 
 
\t top: 50%; 
 
\t left: 50%; 
 
\t transform: translateX(-50%) translateY(-50%); 
 
} 
 

 
.hero-text h1{ 
 
    position: absolute; 
 
    width: 640px; 
 
\t height: 125px; \t 
 
\t font-size: 7.1em; 
 
\t z-index: 1; 
 
\t margin-top: -15px; 
 
} 
 

 
.hero-img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.wwd-main { 
 
    position: fixed; 
 
    bottom:0; 
 
    width:100%; 
 
    height: 10%; 
 
    background-color: #eeeeee; 
 
    z-index: 100; 
 
}

<div class="hero"> 
 
    <div class="hero-text"> 
 
    <h1 class="invis-selection">Header Text</h1> 
 
    </div> 
 
\t <img class="hero-img" src="http://www.mrwallpaper.com/wallpapers/Shanghai-City-Night-1920x1080.jpg" alt="Hero Image" /> 
 
</div> 
 
    
 
<div class="wwd-main"> 
 
    <h1>What we do</h1> 
 
</div>

編集：私はこの問題を解決するためにやった変更.wwd-mainがposition:relative;からposition:fixed;にした。これはテキストは常に画面の下部とに固定されることが保証されますbottom:0;を追加しました0ピクセルのオフセット。

Answer 2

あなたは出来る position: fixed;を.heroから削除するだけです。
とマージンを折りたたむには、あなたのCSSに以下を追加：

.wwd-main > h1 
{ 
    margin: 0; 
} 

Answer 3

テキストの高さと幅を2度定義しました。 変更されたコードのバージョンです。 スタイリングをカスタマイズして、好みに合わせることができます。

PS：ブートストラップまたは他のライブラリを使用することをお勧めします。その仕事

body { 
 
\t margin: 0; 
 
\t padding: 0; 
 
} 
 

 
.hero{ 
 
    
 
\t width: 100%; 
 
    height: 100%; 
 
\t text-align: center; 
 
\t color: #fff; 
 
\t font-family: 'Lato', sans-serif; 
 
} 
 

 
.hero-text { 
 
\t position: fixed; 
 
\t width: 640px; 
 
\t height: 125px; \t 
 
\t top: 20%; 
 
\t left: 50%; 
 
\t transform: translateX(-50%) translateY(-50%); 
 
} 
 

 
.hero-text h1{ 
 
    position: absolute; 
 
    width: 640px; 
 
\t height: 125px; \t 
 
\t font-size: 7.1em; 
 
\t z-index: 1; 
 
\t margin-top: -15px; 
 
} 
 

 
.hero-img { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.wwd-main { 
 
    position: relative; 
 
    height: 20%; 
 
    background-color: #eeeeee; 
 
    z-index: 100; 
 
}

<div class="hero"> 
 
    <div class="hero-text"> 
 
    <h1 class="invis-selection">Header Text</h1> 
 
    </div> 
 
\t <img class="hero-img" src="http://www.mrwallpaper.com/wallpapers/Shanghai-City-Night-1920x1080.jpg" alt="Hero Image" /> 
 
</div> 
 
    
 
<div class="wwd-main"> 
 
    <h1>What we do</h1> 
 
</div>

JSFiddle Link