2017-11-16 18 views
0

https://jsfiddle.net/z4of8fvy/フッターは、私は私のコードはややずさんである知っているコンテンツ

上で示した、下に行くことはありませんが、私はまだ学んでいます。私はバリデーターを通してそれを実行して、欠けているかどうかを確認しましたが、見つけられませんでした。どんな助けもありがとう。

あなたが指摘できる他のものがある場合は、私もそれを感謝します。 詳細については私に依頼し続けますが、他に何が言えるのか分かりません。私はある時点でフッターが私と一緒に働いていたことを知っています:粘着性と底:0しかし、私は問題が現れたときの内容を追加しました。それは私が少し試してみると、おそらくそれをさらに台無しにしました。

<div id="topBar" class="container-fluid"> 
    <div class="row"> 
     <div id="logo" class="col-xs-6"> 
      <a id="homelink" href="https://smithstreetmediagroup.com"> 
      <h1>SMG <br> Studios </h1> 
      </a> 
     </div> 
     <div id= "menu" class = "col-xs-6"> 
      <a class="topBar" href="mess.html"><h4>Me$$ aka M.T.M </h4></a> 
      <a class="topBar" href="services.html"><h4>Services </h4></a> 
      <a class="topBar" href="campaigns.html"><h4>Campaigns </h4></a> 
      <a class="topBar" href="jeybundy.html"><h4>Jey Bundy </h4></a> 
      <a class="topBar" href="store.html"><h4>Store </h4></a> 
      <a class="topBar" href="contact.html"><h4>Contact </h4></a> 
     </div> 
    </div> 
</div> 
<div class="container"> 
    <div class="row"> 
     <div id="studioHome" class = "col-xs-4 mainOne"> 
      <h1> Studio Services </h1> 
      <a href="services.html"> <h1 class="buttons"> Read More </h1> </a> 
     </div> 
     <div id="jbHome" class = "col-xs-4 mainOne"> 
      <h1> Jey Bundy </h1> 
      <a href="services.html"> <h1 class="buttons"> Read More </h1> </a> 
     </div> 
     <div id="mtmHome" class = "col-xs-4 mainOne"> 
      <h1> Me$$ aka M.T.M </h1> 
      <a href="services.html"> <h1 class="buttons"> Read More </h1> </a> 
     </div> 
    </div> 
</div> 
<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-6 mainTwo"> 
      <h1>Our Mission</h1> 
      <p> 
       Smith media groups consist of a team of polite professionals that provide high quality and affordable service. We consider our customers family so we take pride in making our customers feel as comfortable and satisfied as possible. We offer a vast variety of services such as photoshoots, music videos, parties, wedding videos/photos, real estate photos, music production & duplication, ect. If you have any questions give us a call or use our contact form and we will give you a call. Our Vison, Your Success</p> 
     </div> 
     <div class="col-xs-6 mainTwo"> 

      <iframe width="560" height="315" src="https://www.youtube.com/embed/5iSNm5c6dBs?rel=0" frameborder="0" ></iframe> 

     </div> 

    </div> 
</div> 
<div class="container"> 
    <div class = "row"> 
     <div class = "col-xs-12"> 
      <div id="slideshow"> 
       <div class="slideImg"> 
        <img src="battleflyer.jpg" /> 
       </div> 
       <div class="slideImg"> 
        <img src="bluesmoke.jpg" /> 
       </div> 
       <div class="slideImg"> 
        <img src="streetview.jpg" /> 
       </div> 
       <div class="slideImg"> 
        <img src="trackboard.jpg" /> 
       </div> 
      </div> 
</div>  
    </div> 
</div> 
<footer> 
    <div class = "container-fluid"> 
     <div class = "row" id="bottomBar"> 
      <div class = "col-xs-4"> 

       <a href="https://www.facebook.com/smithstreetmediagroup/"> <i class="fa fa-facebook-official" aria-hidden="true"> Facebook</i></a> 
       <a href="https://www.instagram.com/smithmediagroup/?hl=en"><i class="fa fa-instagram" aria-hidden="true"> Instagram</i></a> 



      </div> 
      <div class = "col-xs-4"> 

      </div> 
      <div id="designer" class = "col-xs-4"> 
      <h6>Designed by Xavier Velez</h6> 
      </div> 
     </div> 
    </div> 

</footer> 

答えて

0

それは実際には、これらの日は非常に簡単です。 1行のコード。

min-height: 100vh;

https://codepen.io/rhroyston/pen/gXXMmr

+0

これは、任意の変更をしませんでした。 –

+0

私のコードをテンプレートとして使用してください。それは新しいCSSグリッドを利用しており、今後も使用したいと考えています。携帯電話とタブレットとデスクトップの表示がどのように変化するかを確認します(ブラウザウィンドウの幅を変更します)。 –

関連する問題