Flexbox粘性页脚（Safari问题）

时间：2014-09-22 04:26:51

标签： html css safari

我用flex box方法创建了一个粘性页脚。它在Chrome和Firefox中完美运行，但是当我在Safari中打开我的网站时，我的页脚下面似乎有空间。如何摆脱这个空间并确保页脚始终位于底部？

这是我的代码：

CSS 

html {
    height:100%;
    margin:0;
    padding:0;
}
#wrapper {
    flex:1;
    -webkit-flex:1;
    min-width:1100px;
}
body {
    display: flex;
    flex-direction: column; 
    min-height:100vh;
    -webkit-flex-direction:column;
    -webkit-display:flex;
    -webkit-min-height:100vh;
    min-height:100%;
}

header {
    height:100px;
    width:100%;
    background:black;
    margin:0 auto;

}

.logo{
    padding-left:10px;
    float:left;
    padding-top:5px;
}

.chapter-logo {
    float:right;
    padding-top:15px;
    padding-right:10px;
}

/* Start MENU styling*/

.menu{
    margin:0 auto;
    padding:0 ;
    text-align:center;
    clear:both
}

ul.menu {
    background-image: -o-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: -moz-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: -webkit-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: -ms-linear-gradient(bottom, #ACB5B5 0%, #E2F0EA 100%);
    background-image: linear-gradient(to bottom, #ACB5B5 0%, #E2F0EA 100%);
    height: 40px;
    width: 100%;
    border-left:solid 1px #22674A;
    white-space: nowrap;
    text-align:center;
}

ul.menu > li {
    position: relative;
    display:inline-block;
    list-style:none;
    text-align:center;
    width:20%;
    border-style:1px #22674A;
    font-family: "Open Sans", sans-serif;
    font-weight:700;
}

/*START sub menu styling*/

ul.menu li:first-child a {
    border-left:none;
}

ul.menu ul li:first-child {
    border-bottom:solid 1px #22674A;
}

ul.menu ul li:nth-child(2) {
    border-bottom:solid 1px #22674A;
}

ul.menu ul li:last-child{
    border-bottom:none;
}

ul.menu ul li a {
    border:none;
}
ul.menu ul {
    background-image: -o-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -moz-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -webkit-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: -ms-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: linear-gradient(to bottom, #E2F0EA 0%, #ACB5B5 100% );
    position: absolute;
    padding:0;
    border-left:none;
    border:solid 1px #22674A;
    width:100%;
    text-align:center;
    display:none;

}
ul.menu a {
    cursor: pointer;
    display: block;
    color: #22674A;
    line-height: 40px;
    text-decoration:none;
    font-weight:bold;
    border-left:solid 1px #22674A; 
}
ul.menu li {
    list-style: none;
}

/* End MENU styling */

/* Banner Styling*/
.index {
    height:400px;
    background-image: url("http://i.imgur.com/RI05og7.jpg");
    background-repeat:no-repeat;
    background-size:100% 400px;
}

.letter{
    width:460px;
    height:250px;
    margin-left:20px;
    line-height:1.75em;
    font-family:"Open Sans", sans-serif
}

h4 {
    color:#22674A;
    font-family:"Open Sans", sans-serif;
    font-weight:700;
}

/*End of Banner Styling*/

/*News Styling*/
.news-section {
    height:350px;
    margin-bottom:25px;
    width:100%;
}

.news  {
    width:812px;
    height:300px;
    margin:0 auto;
}
.greekgod {
    width:250px;
    height:230px;
    border:solid 1px black;
    text-align:center;
    background-image: -o-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -moz-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -webkit-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: -ms-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: linear-gradient(to bottom, #E2F0EA 0%, #ACB5B5 100% );
    line-height:1.5em;
    font-family:"Open Sans", sans-serif;
    float:left;
    margin-top:30px;
    margin-right:30px;
    padding:5px;
}

.donate-button {
    width:150px;
    height:40px;
    border:3px solid black;
    background:#22674A;
    border-radius:5px;
    color:white;
    text-align:center;
    padding-top:7px;
    text-decoration:none;
    margin-left:45px;
    font-family:"Open Sans", sans-serif;
}
.kovacs {
    width:250px;
    height:230px;
    border:solid 1px black;
    background-image: -o-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -moz-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -webkit-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: -ms-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: linear-gradient(to bottom, #E2F0EA 0%, #ACB5B5 100% );
    text-align:center;
    line-height:1.5em;
    padding:5px;
    font-family:"Open Sans", sans-serif;
    float:left;
    margin-top:30px;
}

 .sign-up {
    width:150px;
    height:40px;
    border:3px solid black;
    background:#22674A;
    border-radius:5px;
    color:white;
    text-align:center;
    padding-top:7px;
    text-decoration:none;
    margin-left:40px;
    font-family:"Open Sans", sans-serif
}

.social{
    float:left;
    border:solid 1px black;
    position:relative;
    text-align:center;
    width:250px;
    height:230px;
    margin-right:30px;
    background-image: -o-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -moz-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100% );
    background-image: -webkit-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: -ms-linear-gradient(bottom, #E2F0EA 0%, #ACB5B5 100%);
    background-image: linear-gradient(to bottom, #E2F0EA 0%, #ACB5B5 100% );
    padding:5px;
    font-family:"Open Sans", sans-serif;
    margin-top:30px;

}

.social a {
    padding:15px;
}

.social h4 {
    padding-bottom:20px;
    padding-top:none;
}
.footer {
height:50px;
width:100%;
min-width:1100px;
background-color:black;
}

.footer p {
    text-align:center;
    color:white;
    font-size:13px;
    font-family:"Open Sans", sans-serif;
    padding-top:15px;
}

.inner-footer {
    width:100%;
}

HTML 

<body>
    <div id="wrapper">
        <header>
            <div class="logo"><a href="index.html"><img src="http://i.imgur.com/eWLyoIY.png"/></a></div>
            <div class="chapter-logo"><a><img src="http://i.imgur.com/RPIvgdD.png"/></a></div>
        </header>
        <nav>
            <ul class="menu">
                <li><a href="index.html">Home</a>

                <li class="dropdown"><a href="">About ▾</a>
                    <ul class = "sub-menu">
                        <li><a href="history.html">History</a>
                        </li>
                        <li><a href="brothers.html">Brothers</a>
                        </li>
                    </ul>
                <li class = "dropdown"><a href="">Philanthropy ▾</a>
                    <ul class="sub-menu">
                        <li><a href="kovacs.html">Kovacs Color Run</a>
                        </li>
                        <li><a href="greekgod.html">Greek God</a>
                        </li>
                    </ul>

                <li><a href="membership.html">Membership</a>
                <li><a href="contact.html">Contact</a>

            </ul>
        </nav>


<div class="index">
    <div class ="letter">
        <p><b><br>Welcome to the official website for the New York Iota chapter of Phi Kappa Psi at Binghamton 

University! Here you will be able to learn about us, and get a brief introduction to Greek Life at 

Binghamton. If you have any questions or simply want to learn more information, feel free contact us at 

any time.</b></br> 

        <br><b><font color ="#22674A">Carl Hashem (Chapter President)</b></font></br>
    </div>
</div>
<div class = "news-section">
<div class ="news">

    <div class ="social">
        <h4 align="center">Connect</h4>
        <a href ="http://instagram.com/phipsibing"><img src="http://i.imgur.com/1GhbSOj.png"/></a>
        <a href="https://twitter.com/phi_psi_bing"><img src="http://i.imgur.com/oawoJtC.png"/></a>
        <a href="https://www.facebook.com/phipsi.sociallist?fref=ts"><img src="http://i.imgur.com/2dAtAX3.png"/></a>
    </div>
    <div class = "greekgod">
        <h4 align = "center">Greek God</h4>
        <p align="center">On October 18th 2014, Anthony Leighton will be representing us in this years Greek God competition. All proceeds go to the Elizabeth Glazier Pediatric Aids Foundation.</p>

        <a href="https://www.payitsquare.com/collect-page/46106"><div class="donate-button">
        <p>Donate!</p>
        </div></a>
    </div>
    <div class = "kovacs">
        <h4 align="center">Kovacs Color Run</h4>
        <p align="center">The 5th Annual Steve Kovacs Color Run will take place on October 19th 2014. All proceeds are split between the Fairview Recovery Center and Childhood Development Center.</p>
        <a href="https://www.payitsquare.com/collect-page/41430"><div class="sign-up">
        <p>Sign Up!</p>
        </div></a>
    </div>
</div>
</div>
</div>

</body>
<div class ="footer">
<div class ="inner-footer">
        <p>© Phi Kappa Psi NY Iota Chapter. All Rights Reserved.</p>
</div> 
</div>

0 个答案:

没有答案
相关问题
最新问题