0

我没有“粘性页脚”，我希望页脚始终在页面底部占据一定的高度，并且内容会根据页脚调整（反之亦然）。通过将内容调整到页脚，我的意思是出现滚动条并且内容开始滚动。它一直工作到一定的浏览器窗口大小，并且在较小的尺寸下，页脚开始覆盖内容 - 而不是 textholder div 的滚动条变得更长。为什么会这样，有没有办法解决它？

http://clients.idea-bureau.com/test/fixed_footer.html

    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fixed footer</title>

<style>
html, body {width:100%; height:100%; padding:0; margin:0; }
#container {
    width: 1200px;
    margin-right: auto;
    margin-left: auto;
    min-height:100%;
    height: 100%;
    position:relative;


}

#content{
    float:left;
    width: 55%;
    height: 70%;
    background-color:orange;


}

#textholder{
    width:80%;
    height:90%;
    font-size:1.5em;
    margin-left: 20%;
    margin-top: 5%;
    margin-bottom:5%;
    background-color:#996633;
    overflow:auto;

}
#footer{

    position: fixed;
    height: 155px;
    width:100%;;
    bottom: 0px;
    background-color: #069;
}
</style>

</head>

<body>
<div id="container">
<div id="content">

<div id ="textholder">
A motorist in a Mercedes was driving through the countryside on a beautiful Saturday afternoon, having a lovely time, when he came to an area of the road that was covered with a rather large puddle of water from a previous rain storm. Worried that he was going to damage the car and its engine in the deep water, he asked a local farmer (who just happened to be standing near the large pool of water) how deep the water was. "Arr", said the local farmer "That water only be a few inches deep!" Relieved, the motorist edged his car into the water, expecting to come out the other side in no time. Instead, as he drove in, the water came right up the side of the car, and the engine sputtered to a halt. Sitting there with the water along with and a floating weed lapping at the window, the motorist yelled at the local angrily: "I thought you said this water was only a few inches deep!!!" "Well", replied the local farmer "It only come up to the waist of them there ducks!"
<p>
A motorist in a Mercedes was driving through the countryside on a beautiful Saturday afternoon, having a lovely time, when he came to an area of the road that was covered with a rather large puddle of water from a previous rain storm. Worried that he was going to damage the car and its engine in the deep water, he asked a local farmer (who just happened to be standing near the large pool of water) how deep the water was. "Arr", said the local farmer "That water only be a few inches deep!" Relieved, the motorist edged his car into the water, expecting to come out the other side in no time. Instead, as he drove in, the water came right up the side of the car, and the engine sputtered to a halt. Sitting there with the water along with and a floating weed lapping at the window, the motorist yelled at the local angrily: "I thought you said this water was only a few inches deep!!!" "Well", replied the local farmer "It only come up to the waist of them there ducks!"
</div>
</div>
<div id = "footer"></div>
</div>

</body>
4

1 回答 1

1

您的内容有Height:70%，因此您的页脚最多可以占总高度的 30%，否则它将与内容重叠。目前您拥有155px的高度超过总高度的 30%。所以改成30%再试试。

#footer {
position: fixed;
height: 30%;
width: 100%;
bottom: 0px;
background-color: #069;
}
于 2013-09-16T21:43:35.610 回答