स्टेटिक हैडर + मेनू, स्क्रॉल शरीर

यह है कि मैं क्या पूरा करने के लिए कोशिश कर रहा हूँ है क्षेत्र पर)। मैं मूल विचार पाने में कामयाब रहे, लेकिन मैं सामग्री div हो रही यह सही स्थिति है में जब स्क्रॉलबार शो, और यहां तक कि अगर मैं हमेशा स्क्रॉलबार दिखाने के लिए निर्धारित है, मैं एक निश्चित चौड़ाई उपयोग नहीं कर सकते क्योंकि वे करने के लिए समस्या हो रही है ब्राउज़र से ब्राउज़र में भिन्न है।स्टेटिक हैडर + मेनू, स्क्रॉल शरीर

<div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;"> 
    <div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;"> 
     Header 
    </div> 
</div> 

<!-- Fixed div acting as the body "page" so the scrollbar shows as the page's --> 
<div style="position:absolute; left:0px; top:0px; bottom:0px; right:0px; overflow-y:auto; padding-top:100px; z-index:1;"> 
    <div style="position:relative; width:800px; height:100%; margin:0 auto; padding-right:200px;"> 
     <div style="background-color:Orange; width:100%; height:900px;"> 
      Content 
     </div> 
    </div> 
</div> 

<div style="position:absolute; left:50%; right:0px; padding-top:100px; z-index:0;"> 
    <div style="width:500px; float:left;"> 
     <div style="background-color:Green; float:right; width:200px; "> 
      Menu 
     </div>    
    </div> 
</div>

सामग्री उपरोक्त कोड में स्क्रॉलबार चौड़ाई, मैं इसे कैसे सही पेज के बाकी के साथ प्राप्त कर सकते हैं से बंद है (यानी। की गणना यह है स्क्रॉलबार चौड़ाई पर विचार, भले ही यह एक है बिना स्थिति)?

स्रोत

2011-03-04 Danicco

+1 ascii ग्राफिक। और एसओ पर एक नए उपयोगकर्ता से अच्छा प्रारूपित प्रश्न देखना हमेशा अच्छा लगता है। –

क्या यह निश्चित चौड़ाई हो या हेडर पूरे व्यूपोर्ट को फैलाए? – roryf

पूरे "बॉडी" (नीचे हेडर, सामग्री + मेनू) एक निश्चित चौड़ाई पर होना चाहिए। मैंने पहले वास्तव में बड़े व्यापक पर नज़र रखता है के साथ समस्या थी जब मैं समझना अपने HTML काफी मुश्किल था एक निश्चित चौड़ाई सेट नहीं किया ... – Danicco

तो मैं समझता हूँ कि आपकी समस्या को सही ढंग से इस एक समाधान हो जाएगा: http://jsfiddle.net/7pJS8/

स्रोत

2011-03-04 17:19:10 Adam

मान लीजिए स्थिर हैडर अनुभाग एक निरंतर ऊंचाई नहीं था, लेकिन स्थिति के हिसाब से बदलती? क्या पूरी खिड़की के बजाए स्क्रॉल करने के लिए नीचे सामग्री प्राप्त करने के लिए अभी भी एक सीएसएस-एकमात्र तरीका है? – enigment

वहाँ तय ऊंचाइयों के साथ यह करने के लिए और फिर स्क्रॉल क्षेत्रों पर अतिप्रवाह संपत्ति का उपयोग करने के तरीके है। हालांकि, कि अच्छा अभ्यास नहीं है, आप पर jQuery या अपनी पसंद के जे एस पुस्तकालय से एक चिपचिपा हेडर का उपयोग कर या (एक है कि ऊपर और नीचे उपयोगकर्ता स्क्रॉल के रूप में देखने के क्षेत्र इस प्रकार है) स्क्रॉल हैडर है क्या देखना चाहिए।

स्रोत

2011-03-04 17:09:00 Brian

position:fixed आपकी समस्या का समाधान नहीं हो जाता? यदि आप हेडर और मेनू div में position:fixed सेट करते हैं?

स्रोत

2011-03-04 17:29:46

हाँ यह करता है, हालांकि मुझे यह बेहद याद है कि यह "मानक" विकल्प नहीं है। या शायद यह पृष्ठभूमि की स्थिति के बारे में था, अब मुझे यकीन नहीं है। मैं इसे एक कोशिश देने जा रहा हूँ, धन्यवाद! – Danicco

<style> 
body { 
    padding: 0px; 
} 
.container { 
    margin: 0px auto; 
    position: relative; 
    width: 500px; 
} 

#header { 
    left: 0px; 
    position: fixed; 
    top: 0px; 
    width: 100%; 
    z-index: 1000; 
} 
#header .container { 
    background: blue; 
    height: 100px; 
} 

#content { 
    background: green; 
    height: 1500px; 
    margin-top: 100px; 
} 
#content .inner { 
    margin-right: 200px; 
} 

#sidebar { 
    left: 0px; 
    position: fixed; 
    top: 100px; 
    width: 100%; 
    z-index: 1000; 
} 
#sidebar .inner { 
    background: red; 
    height: 200px; 
    position: absolute; 
    right: 0px; 
    top: 0px; 
    width: 200px; 
} 
</style> 

<div id="header"> 
    <div class="container"> 
     header 
    </div> 
</div> 
<div id="content" class="container"> 
    <div class="inner"> 
     content 
    </div> 
</div> 
<div id="sidebar"> 
    <div class="container"> 
     <div class="inner"> 
      sidebar 
     </div> 
    </div> 
</div>

संभव समाधान: http://jsfiddle.net/zWERN/

स्रोत

2011-03-04 17:31:06 roryf

पेज के सभी पर एक स्क्रॉल करने के बाद, एक गायब शीर्षक और मेनू में बदल सकते हैं - जब सामग्री लंबा है।

क्या आप देख रहे हैं Holy Grail design के एक सबसेट है।

Here के एक कार्यान्वयन फ्लेक्स प्रदर्शन का उपयोग:

<!DOCTYPE html> 
<html style="height: 100%"> 
    <head> 
    <meta charset=utf-8 /> 
    <title>Holy Grail</title> 
    <!-- Reset browser defaults --> 
    <link rel="stylesheet" href="reset.css"> 
    </head> 
    <body style="display: flex; height: 100%; flex-direction: column"> 
    <div>HEADER<br/>------------ 
    </div> 
    <!-- No need for 'flex-direction: row' because it's the default value --> 
    <div style="display: flex; flex: 1"> 
     <div>NAV|</div> 
     <div style="flex: 1; overflow: auto"> 
     CONTENT - START<br/> 
     <script> 
     for (var i=0 ; i<1000 ; ++i) { 
      document.write(" Very long content!"); 
     } 
     </script> 
     <br/>CONTENT - END 
     </div> 
     <div>|SIDE</div> 
    </div> 
    <div>------------<br/>FOOTER</div> 
    </body> 
</html>

स्रोत

2015-10-23 07:25:29

स्टेटिक हैडर + मेनू, स्क्रॉल शरीर

उत्तर

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