हैडर div शीर्ष पर रहता है, स्क्रॉलबार के साथ नीचे लंबवत स्क्रॉलिंग div केवल उस div

से जुड़ा हुआ है मेरे पास 2 मुख्य divs, हेडर और एक div में निहित स्क्रॉलिंग सूची है। मैं चाहता हूं कि शीर्षलेख हमेशा पृष्ठ के शीर्ष पर बने रहें, और नीचे स्क्रॉलिंग सूची। स्क्रॉलबार को स्क्रॉलिंग div से जोड़ा जाना चाहिए, न कि संपूर्ण पृष्ठ पर, यानी स्क्रॉलबार शीर्षलेख के दाईं ओर दिखाई नहीं देता है, केवल स्क्रॉलिंग div।हैडर div शीर्ष पर रहता है, स्क्रॉलबार के साथ नीचे लंबवत स्क्रॉलिंग div केवल उस div

______________________ 
|_______header_______| 
|     |*| 
| Container Div |*| 
|     |*| 
|     |*| 
|     |*| 
|     |*| 
|     |*| 
---------------------- 

* = scrollbar

लेआउट तरल पदार्थ होना चाहिए और खिड़की खड़ी फैला रहा है, केवल कंटेनर div और यह स्क्रॉलबार अब मिलना चाहिए है:

यह मैं क्या हासिल करने की कोशिश कर रहा हूँ है।

मैं हेडर position: fixed; को शीर्ष स्थान पर नहीं रखना चाहता, तब तक स्क्रॉलबार इसके नीचे दाईं ओर होगा।

स्रोत

2012-03-13 Garywoo

'स्थिति: स्थिर '? – Jon

HTML:

<div class="header">This is the header</div> 
<div class="content">This is the content</div>

सीएसएस:

.header 
{ 
    height:50px; 
} 
.content 
{ 
    position:absolute; 
    top: 50px; 
    left:0px; 
    right:0px; 
    bottom:0px; 
    overflow-y:scroll;   
}

स्रोत

2012-03-13 03:23:20 bhamlin

फिडल: http://jsfiddle.net/n9P3X/1/ – valentinas

धन्यवाद, यह बिल्कुल सही है, इतना आसान समाधान, मुझे नहीं पता कि यह मुझसे क्यों बच निकला, हाहा। – Garywoo

'ओवरफ्लो-वाई: ऑटो;' का उपयोग करें यदि कोई मौका है कि '.content' पृष्ठ के नीचे तक नहीं पहुंचता है। यह उस मामले में स्क्रॉलबार को हटा देगा। – Keith

यहाँ एक demo है। position:fixed; top:0; left:0; का उपयोग करें ताकि शीर्षलेख हमेशा शीर्ष पर रहे।

#header { 
    background:red; 
    height:50px; 
    width:100%; 
    position:fixed; 
    top:0; 
    left:0;  
}.scroller { 
    height:300px; 
    overflow:scroll;  
}

स्रोत

2012-03-13 03:31:30 Dips

यह मुख्य div (जैसे 100%) पर सेट तरल लेआउट ऊंचाई के साथ काम नहीं करेगा, धन्यवाद। – Garywoo

आप js शरीर div

<html><body> 
<div id="head" style="height:50px; width=100%; font-size:50px;">This is head</div> 
<div id="body" style="height:700px; font-size:100px; white-space:pre-wrap; overflow:scroll;"> 
This is body 
T 
h 
i 
s 

i 
s 

b 
o 
d 
y 
</div> 
</body></html>

स्रोत

2012-03-13 03:35:37 PasteBT

फ्लेक्स जादू मिले लिए बेहतर ऊंचाई पाने के उपयोग करने के लिए की जरूरत है।

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> 
    <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> 
    </body> 
</html>

* फ्लेक्स समाधान का लाभ यह है कि सामग्री लेआउट के अन्य भागों से स्वतंत्र है। उदाहरण के लिए, सामग्री को हेडर की ऊंचाई जानने की आवश्यकता नहीं है।

फ्लेक्स डिस्प्ले का उपयोग करके पूर्ण Holy Grail कार्यान्वयन (हेडर, पाद लेख, एनवी, साइड, और सामग्री) के लिए, here पर जाएं।

स्रोत

2015-10-23 07:04:14

यह एक प्रतिभाशाली समाधान है! यह 100vh से बेहतर तरीका है – Student22

हैडर div शीर्ष पर रहता है, स्क्रॉलबार के साथ नीचे लंबवत स्क्रॉलिंग div केवल उस div

उत्तर

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