このスティッキー フッターソリューションを使用して、ブラウザーのサイズが変更されてもフッターがページの下部にくっつくようにしました。これが私のhtmlと内部CSSです。
<html>
<!DOCTYPE html>
<head>
<style>
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/
* {margin:0;padding:0;}
html, body {height: 100%;}
#wrap {min-height: 100%;}
#header {
top:-14px;
left:-20px;
background-image:url('header.jpg');
background-repeat: no-repeat;
background-size: 140%;
background-position:-344px;
height:333px !important;
width:1349px;
}
#main {overflow:auto;
padding-bottom: 180px;} /* must be same height as the footer */
#footer {
position:relative;
background-image: url('footerbg.jpg');
margin-top: -180px; /* negative value of footer height */
height: 180px;
width:1349px;
clear:both;}
/*Opera Fix*/
body:before {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}
ul
{
list-style-type: none;
}
a:link{text-decoration:none;
color:white;
}
a:link {color:white !important;
-webkit-transition:color 0.3s ease-in;
-moz-transition:color 0.3s ease-in;
-o-transition:color 0.3s ease-in;
transition:color 0.3s ease-in;
}
a:visited {color:white !important;}
a:hover {color:red !important;}
a:active {color:white !important;}
#news{
position:relative;
top:300px;
left:195px;
height: 20px;
width: 30px;
}
#shop{
position:relative;
top:280px;
left:665px;
height: 20px;
width: 30px;
}
#coming{
position:relative;
top:390px;
left:15px;
color: #000000 !important;
}
a.maillink {color:blue !important;}
a.maillink:hover {color:pink;text-decoration:none !important;}
nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style-type: none !important; }
nav li {
float: left; }
#nav1 {
position:relative;
top:11px;
left:34.5%;
font-family: insolentitalic, insolentregular;
color:white;
font-size:.9em;
z-index:1;
}
#nav2 {
position:relative;
top:11px;
left:36.3%;
font-family: insolentitalic, insolentregular;
color:white;
font-size:.9em;
z-index:1;
}
#nav3 {
position:relative;
top:11px;
left:38%;
font-family: insolentitalic, insolentregular;
color:white;
font-size:.9em;
z-index:1;
}
#nav4 {
position:relative;
top:11px;
left:39.8%;
font-family: insolentitalic, insolentregular;
color:white;
font-size:.9em;
z-index:1;
}
#nav5 {
position:relative;
top:11px;
left:41.6%;
font-family: insolentitalic, insolentregular;
color:white;
font-size:.9em;
z-index:1;
}
#nav1:hover {
position:relative;
top:11px;
left:34.5%;
font-family: insolentitalic, insolentregular;
color:red;
font-size:.9em;
z-index:1;
}
#nav2:hover {
position:relative;
top:11px;
left:36.3%;
font-family: insolentitalic, insolentregular;
color:red;
font-size:.9em;
z-index:1;
}
#nav3:hover {
position:relative;
top:11px;
left:38%;
font-family: insolentitalic, insolentregular;
color:red;
font-size:.9em;
z-index:1;
}
#nav4:hover {
position:relative;
top:11px;
left:39.8%;
font-family: insolentitalic, insolentregular;
color:red;
font-size:.9em;
z-index:1;
}
#nav5:hover {
position:relative;
top:11px;
left:41.6%;
font-family: insolentitalic, insolentregular;
color:red;
font-size:.9em;
z-index:1;
}
</style>
</head>
<body>
<div id="header">
<nav>
<ul>
<li id="nav1"><a href="">HOME</a></li>
<li id="nav2"><a href="">ETC</a></li>
<li id="nav3"><a href="">ETC</a></li>
<li id="nav4"><a href="">ETC</a></li>
<li id="nav5"><a href="">CONTACT</a></li>
</ul>
</nav>
</div>
<div id="wrap">
<div id="main">
<p>My main content here</p>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
ヘッダー、メイン コンテンツ、フッターです。
それは良いです。ここで見られるよう
に、ブラウザー ウィンドウのサイズを変更すると、フッターがコンテンツを覆い隠しません。これは素晴らしいことです。ここまでは順調ですね。下にスクロールしてフッターを見つけましたが、問題ありません。ここに見られるように:
それでは、ブラウザのサイズを変更してみましょう。
フッターのサイズが変更され、メイン コンテンツが覆われているため、フッターがブラウザーと共に移動します。以下にしておきたいと思います。誰でもこれに対する解決策を提供できますか?