页脚不会显示在底部,显示内容

时间:2017-11-16 20:17:11

标签: html footer

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>

1 个答案:

答案 0 :(得分:0)

这些天真的非常简单。一行代码。

min-height: 100vh;

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