आईई 6 में व्यूपोर्ट के नीचे चिपकने के लिए मैं एक फ़्लोटिंग फ़ूटर कैसे प्राप्त करूं?

मुझे पता है कि यह स्थिति के साथ आसान होगा: निश्चित, लेकिन असुविधाजनक मैं आईई 6 का समर्थन करने के साथ अटक गया हूँ। मैं यह कैसे कर सकता हूं? मैं साफ होने के लिए सीएसएस का उपयोग करता हूं, लेकिन अगर मुझे जावास्क्रिप्ट का उपयोग करना है, तो यह दुनिया का अंत नहीं है। मेरे वर्तमान कार्यान्वयन में मेरे पास एक "फ़्लोटिंग फ़ूटर" है जो मुख्य सामग्री क्षेत्र से ऊपर तैरता है और जावास्क्रिप्ट के साथ स्थित है। मेरे पास अभी भी कार्यान्वयन जावास्क्रिप्ट के साथ विशेष रूप से सुरुचिपूर्ण नहीं है, इसलिए मेरे प्रश्न हैं:आईई 6 में व्यूपोर्ट के नीचे चिपकने के लिए मैं एक फ़्लोटिंग फ़ूटर कैसे प्राप्त करूं?

क्या जावास्क्रिप्ट के बिना ऐसा करने का कोई तरीका है?
यदि मुझे जावास्क्रिप्ट का उपयोग करना है, तो क्या इस फ़्लोटिंग पाद लेख समस्या के लिए कोई "अच्छा" समाधान है? "अच्छा" से मेरा मतलब है कि ब्राउज़र में काम करेगा, ब्राउज़र के संसाधनों को अधिभारित नहीं करेगा (क्योंकि इसे अक्सर पुन: गणना करना होगा), और सुरुचिपूर्ण/उपयोग करने में आसान है (यानी new FloatingFooter("floatingDiv") जैसे कुछ लिखना अच्छा होगा)।

मुझे लगता है कि कोई सुपर आसान समाधान नहीं है जिसमें ऊपर सबकुछ है, लेकिन जो कुछ मैं बना सकता हूं वह बहुत अच्छा होगा।

अंत में, बस एक और सामान्य प्रश्न। मुझे पता है कि यह समस्या हल करने के लिए एक बड़ा दर्द है, तो प्रत्येक पृष्ठ के नीचे पाद लेख सामग्री के बजाय अन्य यूआई विकल्प क्या हैं? मेरी विशेष साइट पर, मैं चरणों के बीच संक्रमण दिखाने के लिए इसका उपयोग करता हूं। क्या मैं अन्य तरीकों से ऐसा कर सकता हूं?

स्रोत

2008-09-28 Bialecki

तो हासकर महसूस कर रहे थे, मैं एक फ्रेम सेट का उपयोग कर सुझाव देना चाहेंगे। लेकिन मैं नहीं हूं, इसलिए मैं नहीं करूँगा। – skaffman

केवल जावास्क्रिप्ट टैग क्यों? मुझे एक सीएसएस सवाल की तरह लग रहा है। –

मुझे आश्चर्य है कि कितने लोग अभी भी आईई 6 का उपयोग करते हैं? –

यह आपके लिए काम कर सकता है। यह मेरे लिए आईई 6 और फ़ायरफ़ॉक्स 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>

स्रोत

2008-09-29 01:07:09 Taptronic

मैं सशर्त टिप्पणियों के बिना एक संस्करण का उपयोग करता हूं क्योंकि मैं आमतौर पर एक अलग फ़ाइल में अपना सीएसएस रखना चाहता हूं। नीचे मेरा जवाब देखें। –

मैं हमेशा स्थिति के बारे में भूल जाता हूं: तय; हाँ! – jlarson

मैंने इसे अतीत में सीएसएस अभिव्यक्तियों का उपयोग करके किया है। इस तरह

कोशिश कुछ:

.footer { 
    position: absolute; 
    top: expression((document.body.clientHeight - myFooterheight) + "px"); 
}

read more here
and here

स्रोत

2008-09-28 20:37:44 Mattias

मुझे लगता है कि "अभिव्यक्ति" केवल आईई में समर्थित है ... – qbeuek

तो IE6 और स्थिति के लिए अभिव्यक्ति() का उपयोग करें: सशर्त टिप्पणियों का उपयोग करके सभी के लिए तय किया गया है। – Eevee

हाँ, यह एक * आईई केवल * समस्या को हल करने के लिए एक बिल्कुल वैध तरीका की तरह लगता है। – nickf

-1

पाद लेख की ऊंचाई तय किया है और आप इसे जानते हैं और सीएसएस में कड़ी मेहनत से कोड यह है, तो आप इसे इस तरह से कर सकते हैं कर सकते हैं:

<!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>

स्रोत

2008-09-28 20:52:11 qbeuek

आप 100% को height और overflow: auto<html/> और <body/> टैग करने के लिए रखा है, तो निरपेक्ष स्थिति के साथ कुछ भी तय हो जाएगा। अजीब तरह से स्क्रॉल बार के साथ यह सबसे मजेदार है लेकिन सभ्य परिणामों के लिए tweak हो सकता है। उदाहरण

<!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>

स्रोत

2008-09-29 21:53:10

आप सशर्त टिप्पणियों का उपयोग न करने के लिए, ताकि आप एक अलग फ़ाइल में सीएसएस डाल सकते हैं चाहते हैं, तो !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>

स्रोत

2009-05-24 21:51:37

$(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); 
});

स्रोत

2011-10-31 07:10:20 Greg

आईई 6 में व्यूपोर्ट के नीचे चिपकने के लिए मैं एक फ़्लोटिंग फ़ूटर कैसे प्राप्त करूं?

उत्तर

संबंधित मुद्दे