调整大小时（页面重新调整时）粘滞页脚浮动页面

时间：2015-08-19 20:52:44

标签： html css footer sticky-footer

这个问题是几年前发布的By Sally但是她自己解决了，她的解决方案对我不起作用。

我已经浏览了本网站上几乎所有相关的粘性页脚页面以及其他地方的一些页面，但我找不到回答这个问题的任何内容。我确信它与我的布局有关，但我已经尝试了我研究过的各种方式，并且可以想到这是我能够找到一个我最满意的粘性页脚。

以下是我正在使用的HTML。

<body>
    <div id="container">
        <header class="main-header">
            <a href="index.html"> <img src="logo3.png" alt="logo" /> </a>
            <ul class="main-nav">
                <li><a id="home" href="index.html">Home</a>
                </li>
            </ul>
            <ul class="second-nav">
                <li><a id="about" href="About.html">About Us</a>
                </li>
                <li><a id="portfolio" href="Portfolio.html">Portfolio</a>
                </li>
                <li><a href="SportsComplex.html">Sports Complex</a>
                </li>
                <li><a href="Contact.html">Contact Us</a>
                </li>
            </ul>
        </header>

        <body class="body">
            <div class="frameT">
                <div class="frameTC">
                    <div class="thumb" id="thumbs">
                        <a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
                            <span class="caption">_______</span>
                        </a>
                        <a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
                            <span class="caption">________</span>
                        </a>
                        <a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
                            <span class="caption">________</span>
                        </a>
                        <span class="stretch"></span>
                    </div>
                </div>
            </div>
        </body>

        <footer class="footer">
            <div class="quote">
                <h6>""</h6>
                <p> - </p>
            </div>
        </footer>
    </div>
</body>

和CSS 

/*header*/
.main-header {
    display: inline-block;
    position: relative;
    margin: 1%;
    width: 98%;
    top: 0;
    left: 0;
    min-width: 904px;
    z-index: 10;
    border: 0px solid #2675a9;
    border-top: none;
    border-radius: 0 0 0 0;
    background-color: #606060;
    background-color: rgb(29, 67, 129);
    -webkit-box-shadow:0 1px 5px black;
    -moz-box-shadow:0 1px 5px black;
    box-shadow:0 1px 5px black;
}

.main-header:after {
    content: " ";
    display: table;
    clear: both;
}

.main-header li {
    display: inline;
}

.main-header img {
    position: relative;
    float: left;
    top: 5.5px;
    left: 5.5px;
    width: 60px;
    height: 60px;
}

.main-nav {
    float: left;
    margin: 12.5px 0 12.5px 5px;
    padding: 0;
}

.main-nav a {
    text-shadow: 0.06em 0.08em #2666b1;
    letter-spacing: 4px;
    color: #ebebeb;
    font-family: StonyIsland;
    display: block;
    font-size: 2.5em;
    padding: 0px 10px;
    text-decoration: none;
    margin: 0px;
    font-weight: 300;
}

.logo {
    height: 50px;
    width: 50px;
    top: 0;
    left: 0;
    padding: 10.5px;
    margin: 0;
}

.second-nav {
    float: right;
    border-radius: 4px;
    margin-bottom: 5px;
    margin-top: 5px;
    margin-left: 0;
    margin-right: 0;
    border: none;
    padding: 9.5px;
}

.second-nav > li {
    float: left;
    border: solid 1px #ebebeb;
    border-bottom: none;
    border-top: none;
    border-right: none;
}

.second-nav li:first-child {
    border-left: none;
}

.second-nav li:second-child {
    border-left: none;
}

.second-nav a {
    color: #ebebeb;
    display: block;
    font-family: Capsuula;
    font-size: 1.13em;
    padding: 10px 30px;
    text-decoration: none;
}

a:hover{
    text-shadow: none;
    color: rgb(237, 12, 12);
}

/*body*/
html {
    position: relative;
    height: 100%;
    overflow-x: hidden;
}

ul {
    list-style-type: none;
}

a {
    text-decoration: none;
    font-size: 1.5em;
}

#wrap {
    min-height: 100%;   
}

#main {
    padding-bottom: 60px;
}

body {
    height: 100%;
    margin: 0 0 60px;
    background-color: rgb(255, 255, 255);
}

/*body location*/

 #thumbs {   
    width: auto;
    margin: 0;
    text-align: center;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}

#thumbs a {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 4em;
    margin-top: 12%;
}

#thumbs img {
    width: 300px;
    height: 300px;
    background-color: grey;
    border-radius: 60px;
    box-shadow: 0 1px 20px black;
}

.caption {
    display: block;
}

/*footer*/

footer {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 60px;
    width: 100%;
    background-color: rgba(255, 255, 255) transparent;
    background-color: rgba(255, 255, 255, 0.5);
}

.footer .quote {
    float: right;
    color: rgb(56, 56, 56);
}

.footer h6 {
    font-size: 15px;
    font-family: Capsuula;
    margin: 0;
    padding: 7px;
}

.footer p {
    font-size: 21px;
    font-family: Capsuula;
    float: right;
    margin: 0;
    padding;
    5px;
    padding-right: 12px;
}

这是我的JSfiddle

在我的正常全屏幕中，三个300px x 300px正方形适合一条线，一切都很好但是当窗口尺寸减小时（就像我小提琴中的那个），正方形变成两条线并被推离屏幕。页脚保持在屏幕底部的位置，直到您滚动然后它只是保持放置并且不跟随页面底部。

当广场被强制分成两行时，我希望页脚被推到屏幕的底部。

-OR -

保持在屏幕底部并向用户滚动。

任何帮助都会非常感激！

1 个答案:

答案 0 :(得分：1)

我取出多余的身体并将其变成div。我在页脚之前结束了容器，并添加了push div，其高度与footer相等。似乎现在工作。查看fiddle

＆＃13;
＆＃13; 
/*header*/
 .main-header {
    display: inline-block;
    position: relative;
    margin: 1%;
    width: 98%;
    top: 0;
    left: 0;
    min-width: 904px;
    z-index: 10;
    border: 0px solid #2675a9;
    border-top: none;
    border-radius: 0 0 0 0;
    background-color: #606060;
    background-color: rgb(29, 67, 129);
    -webkit-box-shadow:0 1px 5px black;
    -moz-box-shadow:0 1px 5px black;
    box-shadow:0 1px 5px black;
}
.main-header:after {
    content:" ";
    display: table;
    clear: both;
}
.main-header li {
    display: inline;
}
.main-header img {
    position: relative;
    float: left;
    top: 5.5px;
    left: 5.5px;
    width: 60px;
    height: 60px;
}
.main-nav {
    float: left;
    margin: 12.5px 0 12.5px 5px;
    padding: 0;
}
.main-nav a {
    text-shadow: 0.06em 0.08em #2666b1;
    letter-spacing: 4px;
    color: #ebebeb;
    font-family: StonyIsland;
    display: block;
    font-size: 2.5em;
    padding: 0px 10px;
    text-decoration: none;
    margin: 0px;
    font-weight: 300;
}
.logo {
    height: 50px;
    width: 50px;
    top: 0;
    left: 0;
    padding: 10.5px;
    margin: 0;
}
.second-nav {
    float: right;
    border-radius: 4px;
    margin-bottom: 5px;
    margin-top: 5px;
    margin-left: 0;
    margin-right: 0;
    border: none;
    padding: 9.5px;
}
.second-nav > li {
    float: left;
    border: solid 1px #ebebeb;
    border-bottom: none;
    border-top: none;
    border-right: none;
}
.second-nav li:first-child {
    border-left: none;
}
.second-nav li:second-child {
    border-left: none;
}
.second-nav a {
    color: #ebebeb;
    display: block;
    font-family: Capsuula;
    font-size: 1.13em;
    padding: 10px 30px;
    text-decoration: none;
}
a:hover {
    text-shadow: none;
    color: rgb(237, 12, 12);
}
/*body*/
 html {
    position: relative;
    height: 100%;
    overflow-x: hidden;
}
ul {
    list-style-type: none;
}
a {
    text-decoration: none;
    font-size: 1.5em;
}
#wrap {
    min-height: 100%;
}
#main {
    padding-bottom: 60px;
}
body {
    height: 100%;
    margin: 0 0 60px;
    background-color: rgb(255, 255, 255);
}
/*body location*/
 #thumbs {
    width: auto;
    margin: 0;
    text-align: center;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
#thumbs a {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
    margin-left: 2%;
    margin-right: 2%;
    margin-bottom: 4em;
    margin-top: 12%;
}
#thumbs img {
    width: 300px;
    height: 300px;
    background-color: grey;
    border-radius: 60px;
    box-shadow: 0 1px 20px black;
}
.caption {
    display: block;
}
/*footer*/
.push{height:60px;}
 footer {
    position: relative;
    left: 0;
    bottom: 0;
    height: 60px;
    width: 100%;
    background-color: rgba(255, 255, 255) transparent;
    background-color: rgba(255, 255, 255, 0.5);
}
footer .quote {
    float: right;
    color: rgb(56, 56, 56);
}
footer h6 {
    font-size: 15px;
    font-family: Capsuula;
    margin: 0;
    padding: 7px;
}
footer p {
    font-size: 21px;
    font-family: Capsuula;
    float: right;
    margin: 0;
    padding;
    5px;
    padding-right: 12px;
}
＆＃13; 
<body>
    <div id="container">
        <header class="main-header"> <a href="index.html"> <img src="logo3.png" alt="logo" /> </a>

            <ul class="main-nav">
                <li><a id="home" href="index.html">Home</a>

                </li>
            </ul>
            <ul class="second-nav">
                <li><a id="about" href="About.html">About Us</a>

                </li>
                <li><a id="portfolio" href="Portfolio.html">Portfolio</a>

                </li>
                <li><a href="SportsComplex.html">Sports Complex</a>

                </li>
                <li><a href="Contact.html">Contact Us</a>

                </li>
            </ul>
        </header>
        <div class="body">
            <div class="frameT">
                <div class="frameTC">
                    <div class="thumb" id="thumbs"> <a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
                            <span class="caption">_______</span>
                        </a>
 <a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
                            <span class="caption">________</span>
                        </a>
 <a id="single_image1" href=".html"><img src="http://placehold.it/300x300" alt="" />
                            <span class="caption">________</span>
                        </a>
 <span class="stretch"></span>

                    </div>
                </div>
            </div>
        </div>
            </div>
    <div class="push"></div>
        <footer class="footer">
            <div class="quote">
                 <h6>"Hello"</h6>

                <p>-</p>
            </div>
        </footer>
</body>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题