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

看起来正在发生的事情是，.foot bottom: 0px班的function newsize() { var wide = $(window).width(); var high = $(window).height(); $("section").width(wide).height(high); $('.foot').css("bottom", "0px"); }将您的页脚放在该部分的底部。但随后浏览器命中你的javascipt，如果窗口高度大于部分的高度，它会改变部分的高度 - 但它会将页脚留在后面（即css首先放置它的位置）。

你的jquery需要这样的东西：

bottom: 0px

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

从.foot

的css中删除{{1}}

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

Answer 2

我决定从头开始再次构建模板。这次我从部分开始，通过使用0的顶部和0的底部的绝对定位，添加与部分相同的宽度和高度的div容器，然后使用相对定位添加页脚。然后我添加了其余的内容。这解决了我的所有问题。我必须在初始构建期间犯了一个小错误。

页脚将自己定位在HTML部分的底部

2 个答案: