0

私のコードを見て、私のフッターを手伝ってください。考えられることはすべて試しましたが、フッターを一番下に置くことはできません。一番下にとどまると、ウィンドウのサイズが変更されたときに上のコンテンツと重なります。ここでのアイデアは、フッターをコンテンツの下のページの下部に残し、ウィンドウのサイズを変更したりズームしたりしても移動しないようにすることです。

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Sgembardesign.com</title>

<!-----CSS Library----->
<link href="assets/CSS/style sheet.css" rel="stylesheet">

<!----- Java Script Library ----->
<script src="assets/js/jquery.js"></script>
<script src="assets/js/my_code.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-           

ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">   

</script>
<style type="text/css">
    </style>


</head>
<body>

<div class="wrapper">
<div id="menu_bar">
    <div id="menu_li">
        <ul>
            <li><a href="index.html">home</a></li>
            <li><a href="about.html">about</a></li>
            <li><a href="projects.html">projects</a></li>
            <li><a href="blog.html">blog</a></li>
        </ul>
    </div>
</div>
<hr noshade size="3">


<div id="catalogs">
    <div id="web">
    </div>

    <div id="photo">
    </div>

    <div id="mobile">
    </div>
</div>


<div class="push"></div>
<div class="footer">
    <img class="img" src="assets/img/logo.gif" alt="logo" width="500" height="300"/>
</div>

</div>

</body>
</html>


**The CSS**


*
{
margin: 0;
}
body
{
height: 100%;
background-image: url("../img/dark-metal-grid-5.jpg");
}
html
{
height: 100%;
}
.wrapper
{

width: 950px;
min-width: 950px;
min-height: 100%;
height: auto;
height: 100%;
margin: 0 auto -142px;
border-bottom: 3px solid white;
sbackground:rgb(0,0,0); /* IE6/7/8 */
filter:alpha(opacity=60); /* IE6/7/8 */
background:rgba(0,0,0,0.6); /* Modern Browsers */
}

/*--------------menu items--------------*/

#menu_bar
{
width: 725px;
height: 95px;
float: left;
position: absolute;
padding: 4em;
}

a
{
color: white;
text-decoration: none;
position: relative;
left:95px;

}
ul
{
list-style-type: none;

}
li
{
display: inline;
margin-left: 20px;

}
#menu_li
{
font-size: 45px;
font-family: Impact, Charcoal, sans-serif;
line-height: 32px;


}
#menu_bar a:hover
{
text-decoration: none;
color: #C50F0F;
}

/*---------------hr------------------*/
hr
{
width: 950px;
color: #C50F0F;
background-color: #c50f0f;
position: absolute;
top: 105px;
border-width: 0;
line-height: 0;
height: 2px;
text-align: center;
}
/*---------------Catalogs-----------*/
#catalogs
{
text-align: center;
position: relative;
}

#web
{
width: 250px;
height:225px;
position:absolute;
top:200px;
overflow: hidden;
float: left;
left:40px;
background-color: #C50F0F;
background:rgba(255,0,0,0.4);
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
border: solid 3px black;

}

#photo
{
width: 250px;
height: 225px;
top: 200px;
position: absolute;
overflow: hidden;
display: inline;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
background-color: #C50F0F;
background:rgba(255,0,0,0.4);
left: 37%;
border: solid 3px black;

}

#mobile
{
width: 250px;
height:225px;
position:relative;
top:200px;
overflow: hidden;
float: right;
right:40px;
background-color: #C50F0F;
background:rgba(255,0,0,0.4);
border-bottom-right-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
border-top-left-radius: 25px;
border: solid 3px black;
}

.push
{
height: 142px;
}

.footer
{

width: 950px;
height: 142px;
margin-top: -142px;
clear: both;
bottom: 0px;
sbackground:rgb(0,0,0); /* IE6/7/8 */
filter:alpha(opacity=60); /* IE6/7/8 */
background:rgba(0,0,0,0.6); /* Modern Browsers */
}

.img
{
position: relative;
top: -75px;
left: -75px;
}
4

3 に答える 3

2

http://jsfiddle.net/Tc4be/

SOへようこそ。これはかなりひどい質問ですが。そのjsFiddleで私が何をしたかに注目してください。あなたの問題の小さな観察可能なサンプルを作成しました。

今問題。

    <div class="push"></div>
    <div class="footer">
        <img class="img" src="assets/img/logo.gif" alt="logo" width="500" height="300"/>
    </div>

</div>

する必要がある

    <div class="push"></div>
</div>   <!-- Footer Outside the Wrapper div --> 
<div class="footer">
        <img class="img" src="assets/img/logo.gif" alt="logo" width="500" height="300"/>
    </div>
于 2012-12-24T15:21:18.303 に答える
0
  • ジョーの答えに従って、ラッパーの外側にフッターを取得します
  • クラスに追加overflow: hidden;footerます。

JSFiddle

于 2012-12-24T15:43:30.903 に答える
0

フッターを配置して修正できます。

.footer
{
    width: 100%;
    height: 142px;
    position: fixed;
    clear: both;
    bottom: 0;
    left: 0;
    sbackground:rgb(0,0,0); /* IE6/7/8 */
    filter:alpha(opacity=60); /* IE6/7/8 */
    background:rgba(0,0,0,0.6); /* Modern Browsers */
}

また、本文に同じ量のパディングを追加すると、コンテンツの最後までスクロールできるようになります。

body {
    padding-bottom: 142px;
}
于 2012-12-24T15:18:27.370 に答える