आप स्क्रॉल बार के दो सेट के बिना किसी वेब पेज पर एमएस ऑफिस 2007 रिबन की तरह दिखने वाले गैर स्क्रॉलिंग div कैसे बनाते हैं। खिड़की के लिए एक और div के लिए एक।स्क्रॉल बार के दो सेट के बिना आप HTML पृष्ठ के शीर्ष पर गैर स्क्रॉलिंग div कैसे बनाते हैं
एक निश्चित स्थिति <div> तत्व का उपयोग करें, जिसमें 100% चौड़ाई और उच्च z-index है।
तुम भी सुनिश्चित करना है कि कि आपके स्क्रॉल सामग्री के शुरू होने से ठीक किया <div> द्वारा अस्पष्ट नहीं है चाहते हैं जब तक आप नीचे स्क्रॉल शुरू करते हैं, एक और <div> और स्थिति यह उचित रूप से में इस डाल कर देंगे।
<body>
<div style="position: fixed; top: 0px; width:100%; height: 100px;">
HEader content goes here
</div>
<div style="margin-top: 100px;">
Main content goes here
</div>
</body>
नोट पहले <div> की ऊंचाई है, और दूसरा के शीर्ष मार्जिन, आपकी आवश्यकताओं के अनुरूप समायोजित करने की आवश्यकता होगी।
पीएस यह किसी कारण से आईई 7 में काम नहीं करता है, लेकिन यह एक अच्छा प्रारंभिक बिंदु है, और मुझे यकीन है कि आप इस विषय पर कुछ बदलाव कर सकते हैं, जो इस तरह से काम करता है जिस तरह से आप चाहते हैं।
ध्यान दें कि यह आईई 6 में काम नहीं करेगा, और केवल आईटी 7 में सख्त मोड में काम करेगा। – nickf
हां - बस पाया कि कठिन तरीके से - ब्राउज़र असंगतताओं को दर्द नहीं है। शायद StackOverflow के लिए मार्कअप को जांचने की आवश्यकता है, क्योंकि यह आपकी प्रोफ़ाइल के बारे में अधिसूचनाओं को प्रदर्शित करने के समान कुछ करता है। – belugabob
+1 इसके लिए स्टैक ओवरफ्लो क्या करता है। –
आप वैकल्पिक रूप से इस्तेमाल कर सकते हैं
<div style='position:absolute;top:0px:left:0px;'>Text</div>;
यह पेज के शीर्ष पर div jamm होगा, लेकिन अगर आपके पृष्ठ को स्क्रॉल नीचे यह वहाँ रहना होगा।
आपके उत्तर में एक छोटी लेकिन महत्वपूर्ण वाक्यविन्यास गलती है ... आप शीर्ष के बाद अर्धविराम चाहते हैं: 0px; (वर्तमान में एक कोलन) – Yetti99
बेलुगाबोब का सही विचार है कि आप जो करने की कोशिश कर रहे हैं वह निश्चित स्थिति है, जो आईई 6 का समर्थन नहीं करता है।
मैंने this tutorial के नीचे से एक उदाहरण संशोधित किया जो आपको चाहिए और सभी अच्छे ब्राउज़रों के अलावा आईई 6+ का समर्थन करना चाहिए। यह काम करता है क्योंकि आईई आप शैली घोषणाओं में जावास्क्रिप्ट डाल देता है:
<style type="text/css">
div#fixme {
width: 100%; /* For all browsers */
}
body > div#fixme {
position: fixed; /* For good browsers */
}
</style>
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
div#fixme {
/* IE5.5+/Win - this is more specific than the IE 5.0 version */
right: auto; bottom: auto;
left: expression((0 - fixme.offsetWidth + (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth) + (ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft)) + 'px');
top: expression((0 - fixme.offsetHeight + (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight) + (ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop)) + 'px');
}
</style>
<![endif]>
<![endif]-->
<body>
<div id="fixme"> ...
इस प्रयास करें:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fixed Header/Full Page Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body,
div {
margin: 0;
padding: 0;
}
body {
/* Disable scrollbars and ensure that the body fills the window */
overflow: hidden;
width: 100%;
height: 100%;
}
#header {
/* Provide scrollbars if needed and fix the header dimensions */
overflow: auto;
position: absolute;
width: 100%;
height: 200px;
}
#main {
/* Provide scrollbars if needed, position below header, and derive height from top/bottom */
overflow: auto;
position: absolute;
width: 100%;
top: 200px;
bottom: 0;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<div id="main">
<p>FIRST</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>MAIN</p>
<p>LAST</p>
</div>
<!--[if lt IE 7]>
<script type="text/javascript">
var elMain = document.getElementById('main');
setMainDims();
document.body.onresize = setMainDims;
function setMainDims() {
elMain.style.height = (document.body.clientHeight - 200) + 'px';
elMain.style.width = '99%'
setTimeout("elMain.style.width = '100%'", 0);
}
</script>
<![endif]-->
</body>
</html>
असल में, तुम क्या कर रहे दस्तावेज़ के अंदर तत्वों को स्क्रॉलबार शरीर से स्क्रॉलबार को दूर करने और लागू कर रहा है । यह आसान है। यह चाल हैडर के नीचे की जगह को भरने के लिए #main div से आकार प्राप्त करना है। यह top और bottom पदों को सेट करके और height दोनों को सेट करके अधिकांश ब्राउज़रों में पूरा किया जाता है। नतीजा यह है कि div का शीर्ष शीर्षलेख के नीचे तय किया गया है और div के नीचे हमेशा स्क्रीन के नीचे तक फैला होगा।
बेशक यह सुनिश्चित करने के लिए हमेशा आईई 6 होता है कि हम अपने पेचेक कमाते हैं। संस्करण 7 से पहले आईई विरोधाभासी पूर्ण पदों से आयाम प्राप्त नहीं करेगा। Some people आईई 6 के लिए इस समस्या को हल करने के लिए आईई के सीएसएस एक्सप्रेशन का उपयोग करें, लेकिन ये अभिव्यक्ति सचमुच प्रत्येक मूसमॉव पर मूल्यांकन करती हैं, इसलिए मैं बस आकार बदलने पर #main div का आकार बदल रहा हूं और एक सशर्त टिप्पणी का उपयोग करके अन्य ब्राउज़रों से जावास्क्रिप्ट के ब्लॉक को छुपा रहा हूं।
चौड़ाई को 99% तक सेट करने वाली लाइनें और सेटटाइमआउट को 100% पर सेट करने के लिए आईई 6 में थोड़ी प्रतिपादन विषमता को ठीक करता है जो विंडो का आकार बदलते समय क्षैतिज स्क्रॉलबार कभी-कभी प्रकट होता है।
नोट: आपको एक डॉक्टरेट का उपयोग करना होगा और आईई को क्विर्क मोड से बाहर करना होगा।
शायद मुझे यहां सीएसएस शुद्धवादियों द्वारा निशाना बनाया जाएगा, लेकिन किसी भी ब्राउज़र में 100% चौड़ाई और ऊंचाई कार्यों के साथ एक तालिका का उपयोग करके, और ब्राउज़र-विशिष्ट सीएसएस हैक की आवश्यकता नहीं है।
यहां एक टेबल का उपयोग कैसे काम करता है? इसका उपयोग किसके रूप में/कहां किया जाता है? – PandaWood
यहां जांचें: http://www.imaputz.com/cssStuff/bigFourVersion.html# – sbr