떠 다니는 바닥 글을 IE 6의 뷰포트 맨 아래에 고수하려면 어떻게해야합니까?
https://stackoverflow.com/questions/146659
-
02-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
나는 이것이 자세가 쉬울 것이라는 것을 안다 : 고정되었지만, 불행히도 나는 IE를 지원하는 데 갇혀있다. 6. 어떻게 할 수 있습니까? 차라리 CSS를 사용하여 깨끗하게 사용하지만 JavaScript를 사용해야한다면 세상의 끝이 아닙니다. 현재 구현에는 기본 콘텐츠 영역 위에 떠오르고 JavaScript가있는 "플로팅 바닥 글"이 있습니다. 내가 지금 가지고있는 구현은 JavaScript에서도 우아하지 않으므로 내 질문은 다음과 같습니다.
- JavaScript 없이이 작업을 수행하는 방법이 있습니까?
- JavaScript를 사용해야한다면이 떠 다니는 바닥 글 문제에 대한 "좋은"솔루션이 있습니까? "Nice"라는 의미는 브라우저에서 작동하는 것을 의미하며 브라우저의 리소스를 과부하시키지 않으며 (자주 재 계산해야하므로) 우아하고 사용하기 쉽습니다 (즉, 같은 것을 쓰는 것이 좋을 것입니다.
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>
나는 과거에 CSS 표현식을 사용하여 이것을했다.
다음과 같은 것을 시도하십시오.
.footer {
position: absolute;
top: expression((document.body.clientHeight - myFooterheight) + "px");
}
$(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
