Question

我没有“粘性页脚”，我希望页脚始终在页面底部占据一定的高度，内容会调整到页脚（反之亦然）。通过内容调整到页脚我的意思是出现滚动条并且内容开始滚动。它工作直到某个浏览器窗口大小和较小的大小，页脚开始覆盖内容 - 而不是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>

Answer 1

您的内容已Height:70%，因此您的页脚最多可占总高度的30％，否则会与内容重叠。目前你有155px，超过总高度的30％。因此，将其更改为30％，然后尝试。

#footer {
position: fixed;
height: 30%;
width: 100%;
bottom: 0px;
background-color: #069;
}

有位置的页脚：固定重叠页面内容

1 个答案: