IE 6でビューポートの下部にフローティングフッターを貼り付けるにはどうすればよいですか？
https://stackoverflow.com/questions/146659
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
position：fixedでこれが簡単になることはわかっていますが、残念ながらIE 6のサポートにこだわっています。これを行うにはどうすればよいですか。 CSSを使用してクリーンにすることをお勧めしますが、Javascriptを使用する必要がある場合、それは世界の終わりではありません。現在の実装では、<！> quot; floating footer <！> quot;があります。メインコンテンツ領域の上に浮かび、JavaScriptで配置されます。私が今持っている実装は、Javascriptを使用しても特にエレガントではないため、私の質問は次のとおりです。
- JavaScriptなしでこれを行う方法はありますか？
- Javascriptを使用する必要がある場合、<！> quot; nice <！> quot;このフローティングフッターの問題の解決策は？ <！> quot; nice <！> quot;ブラウザー間で機能し、ブラウザーのリソースを過負荷にせず（頻繁に再計算する必要があるため）、エレガントで使いやすい（つまり、
new FloatingFooter("floatingDiv")のようなものを記述した方がよい）ことを意味します。
上記のすべてを備えた非常に簡単なソリューションはないと思いますが、構築できるものは素晴らしいでしょう。
最後に、より一般的な質問です。私はこの問題を解決するのが大きな苦痛であることを知っているので、フッターコンテンツをすべてのページの下部に置くのではなく、他のUIの代替手段は何ですか？私の特定のサイトでは、ステップ間の遷移を示すためにそれを使用しています。これを行うことができる他の方法はありますか？
解決
これはあなたのために働くかもしれません。 IE6およびFirefox 2.0.0.17で動作します。試してみます。フッターの高さを非常に高くしました。明らかに必要なものに変更します。これがお役に立てば幸いです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Liquid Footer</title>
<style type="text/css">
.footer {
background-color: #cdcdcd;
height: 180px;
text-align: center;
font-size:10px;
color:#CC0000;
font-family:Verdana;
padding-top: 10px;
width: 100%;
position:fixed;
left: 0px;
bottom: 0px;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
body {height:100%; overflow-y:auto;}
html {overflow-x:auto; overflow-y:hidden;}
* html .footer {position:absolute;}
</style>
<![endif]-->
</head>
<body>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
This is to expand the content on the page<br>
<div class="footer">-- This is your liquid footer --</div>
</body>
</html>
他のヒント
条件付きコメントを使用しない場合、cssを別のファイルに配置できるようにするには、!importantを使用します。このようなもの：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
html {
overflow-x: auto;
overflow-y: scroll !important;
overflow-y: hidden; /* ie6 value b/c !important ignored */
}
body {
padding:0;
margin:0;
height: 100%;
overflow-y: hidden !important;
overflow-y: scroll; /* ie6 value b/c !important ignored */
}
#bottom {
background-color:#ddd;
position: fixed !important;
position: absolute; /* ie6 value b/c !important ignored */
width: 100%;
bottom: 0px;
z-index: 5;
height:100px;
}
#content {
font-size: 50px;
}
</style>
</head>
<body>
<div id="bottom">
keep this text in the viewport at all times
</div>
<div id="content">
Let's create enough content to force scroll bar to appear.
Then we can ensure this works when content overflows.
One quick way to do this is to give this text a large font
and throw on some extra line breaks.
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
</div>
</body>
</html>
$(function(){
positionFooter();
function positionFooter(){
if($(document).height() < $(window).height()){//Without the body height conditional the footer will always stick to the bottom of the window, regardless of the body height, $(document).height() - could be main container/wrapper like $("#main").height() it depend on your code
$("#footer").css({position: "absolute",top:($(window).scrollTop()+$(window).height()-$("#footer").height())+"px"})
}
}
$(window).scroll(positionFooter);
$(window).resize(positionFooter);
});
heightを100%に、overflow: autoを<html/>および<body/>タグに配置すると、絶対位置を持つものはすべて固定されます。最も基本的なのは、奇妙に配置されたスクロールバーがあるかなりファンキーですが、まともな結果に微調整することができます。
例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
html, body
{
height: 100%;
overflow: auto;
}
.fixed
{
position: absolute;
bottom: 0px;
height: 40px;
background: blue;
width: 100%;
}
</style>
</head>
<body>
<div class="fixed"></div>
overflow....<br />
overflow....<br />
overflow....<br />
overflow....<br />
overflow....<br />
overflow....<br />
overflow....<br />
overflow....<br />
overflow....<br /><!-- ... -->
</body>
</html>
フッターの高さが固定されていて、それを知っていてCSSでハードコーディングできる場合、次のようにできます：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.content
{
position : absolute;
top : 0;
left : 0;
right : 0;
bottom : 50px; /* that's the height of the footer */
overflow : auto;
background-color : blue;
}
.footer
{
position : absolute;
left : 0;
right : 0;
bottom : 0px; /* that's the height of the footer */
height : 50px;
overflow : hidden;
background-color : green;
}
</style>
</head>
<body>
<div class="content">
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
everything from the page goes here
</div>
<div class="footer">
the footer
</div>
</body>
</html>
所属していません StackOverflow
