javascript - 页脚将自身定位在 HTML 部分的底部

Question

我正在尝试创建一个单页网站。我创建了 3 个 HTML 部分，在这些部分中我有包含所有内容的 div。每个部分都根据屏幕大小自行调整大小，我使用 JQuery 来执行此操作。在这些部分的内部，我希望在该部分的最底部有一个页脚，但这被证明是困难的。我试过将容器放在每个部分内，并将最小高度设置为 100%，然后将页脚放在里面，但这不起作用。我提供了一些链接。我真的很感激一些帮助。

网站位于 www.test.tagwebsites.com.au .
Javascript

<script>
function newsize() {
var wide = $(window).width();
var high = $(window).height();
$("section").width(wide).height(high);
}

</script>

HTML

<section>
<div id="portfolio">
<span id="holder"></span>

        <table border="0" id="gallery">
        <tr>
        <td><a href="http://www.raydz.com.au" target="new"><img src="images/raydz.png" alt="raydz website" /></a></td>
        <td><img src="images/gozzy.png" alt="gozzy website" title="Under construction"/></td>
        <td><a href="http://www.thevanfromhoian.com.au" target="new"><img src="images/hoian.png" alt="hoian website" title="The van from Hoi An" /></a></td>
        </tr>
        <tr>
        <td><a href="http://www.buxtongeneralstore.com.au" target="new"><img src="images/buxton.png" alt="buxton website" /></a></td>
        <td><a href="http://invest.edwardhinds.com.au" target="new"><img src="images/invest.png" alt="invest website" /></a></td>
        <td><img src="images/edward.png" alt="edward website" /></td>
        </tr>
        <tr>
        <td><img src="images/hanson.png" alt="hanson website" /></td>
        <td><img src="images/upskilled.png" alt="upskilled website" /></td>
        <td><img src="images/edwards.png" alt="edward hinds website" /></td>
        </tr>
        </table>
            <div id="foliofooter" class="foot">
            <p>These are just some of the pages we have developed</p>
            </div>

CSS

.foot{display:block;
width:100%;
height:60px;
background-color:#F33;
position:relative; 
bottom:0px;
clear:both;
}

#gallery{display:block;
clear:both;
width:90%;
margin-left:auto;
margin-right:auto;
min-height:100%;
}

#portfolio{display:block;
clear:both;
width:100%;
height:100%;
position:relative;
top:0px;
bottom:0px;
}

Answer 1

看起来正在发生的事情是，带有 bottom: 0px 的 .foot 类将页脚定位在该部分的底部。但是随后浏览器点击了您的 javascipt，如果窗口高度大于该部分的高度，它会更改该部分的高度 - 但它会将页脚留在后面(即 css 首先放置它的位置)。

你的 jquery 中需要这样的东西:

function newsize() {
  var wide = $(window).width();
  var high = $(window).height();
  $("section").width(wide).height(high);
  $('.foot').css("bottom", "0px");  
}

此外，如果您还没有调用此函数，请在页面加载后立即调用。

从 .foot 的 css 中删除 bottom: 0px

现在您已经在指定部分的高度后设置了 bottom 属性。