2

IMがdivコンテンツをフッターを超えないようにしようとしているので、ページが拡大するにつれてコンテンツdivを拡大したいのですが、テキストがフッターを通過すると、フッターがページ上で上にジャンプします
html、body {margin ：0; /上、右、下、左/パディング：0; /上、右、下、左/高さ：100％; }

container {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    margin: 0 auto -100px;
    height: auto;
    min-height:100%;
}

content {
    position: relative; 
    padding-bottom:100px;
    overflow:auto;
    height:100%;
}

Header, #Footer {
    position: absolute;
    width:100%;
    background:url('bglines.png');
    background-size:15px 15px;
    color:white;
    padding:0 auto;
    text-align:center;
    color:#2FAACE;
}

Footer {
    margin-top: 100px;
    clear:both;
} 

menu {
    position:absolute;
    list-style-type:none;
    background: #808080;
    width:100%;
    padding: 85px 0px 0px 0px; /* Always on top */
}

ptop {
    text-transform:uppercase;
    font-family:impact;
    font-size:40pt;
    margin: 15px auto;
    color:#2FAACE;
}

pbottom {
    font-family:times;
    font-size:14pt;
    color:#2FAACE;
}

main {
position: absolute;
text-align:center;
left:50%;
width:90%;
margin-left: -45%;
top:150px;
color:white;
padding-bottom:100px;
}

p {
    font-size: 75px;
    color:white;
}

mainbg {
    background:#CCCCCC;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    opacity:0.9;
    filter:alpha(opacity=90); /* For IE8 and earlier */
    left:50px;
    width:95%;
    top:150px;
    position: absolute;
}

li {
    line-height:40px;
    margin:0px 0px 0px 0px;
    padding:0px 5px 5px 0px;
    text-align:center;
    float:left;
}

a, a:hover {
display:block;
font-family:Georgia;
width: 75px;
text-decoration:none;
font-size:30px;
}

a { color:white; }

a:Hover {
    background:#2FAACE;
    border-radius:9px 9px 9px 9px;
    color:#FFFFFF; /*TL, TR, BR, BL*/
}
4

1 に答える 1

4

前にdivwithを追加してください。それは実際にすべてのフローティングをクリアし、フッターを下部にとどまらせるように修正します。clear:bothfooter

<div style="clear:both;"></div>

または、スタイルでクラス（クリア）を定義している場合は、

<div class="clear"></div>
于 2012-07-02T02:09:02.533 に答える