html - Page with fixed centered layout, scrollbar shifts position of the content -

मेरे पास यह लेआउट (सरलीकृत) है

  & lt; div id = "main" & gt ; & Lt; div id = "header" & gt; ... & lt; / div & gt; & Lt; div id = "content" & gt; ... & lt; / div & gt; & Lt; div id = "footer" & gt; ... & lt; / div & gt; & Lt; / div & gt;   
 मुझे स्क्रॉल करने योग्य सामग्री रखते समय हेडर और पाद लेख की आवश्यकता होती है। समस्या यह है कि सभी 3 केन्द्रित हैं और यदि मैं  #content {overflow-y: scroll;}  और scrollbar प्रकट होता है, तो  & lt; div id = "content" & gt; / कोड> बाईं ओर स्थानांतरित कर दिया गया है और शीर्षक और पाद लेख के साथ लाइन में नहीं है क्या इसे रोकने का कोई तरीका है? या मैरी कुछ समाधान?  
 संपादित करें।   
 
 
 यह वही है जो आप चाहते हैं?  
 मैंने इसे फ्लेक्सबॉक्स के साथ बनाया है, लेकिन यदि आप संशोधन के तहत एक बॉक्स मॉडल का उपयोग नहीं करना चाहते हैं, तो मैं इसे  display: table  के साथ उदाहरण के लिए कर सकता हूं।  
 डेमो:  
 
  
   
 **  
 मैंने क्या किया है?   
 इस डेमो में मैं केवल  body   
  
  प्रथम डेमो: फ्लेक्सबॉक्स के साथ लेआउट < / कोड> तत्व:  
  & lt; body class = "p-flexbox flex-vcc" & gt; & Lt;! - आपकी शेष सामग्री - & gt; & Lt; / body & gt;   
 कहां:  
 
  p-flexbox  का अर्थ है  पैरेंट-फ्लेक्सबॉक्स ।  < Li>  फ्लेक्स- vcc  का अर्थ है  फ्लेक्सबॉक्स-ऊर्ध्वाधर-केंद्र-केंद्र    
 और सीएसएस नियमों का पालन करें:  
  .p-flexbox {/ * फ्लेक्सबॉक्स: इनिट सेटअप * / डिस्प्ले: -webkit-box; प्रदर्शन: -मोज-बॉक्स; प्रदर्शन बॉक्स; }। फ्लेक्स- vcc {/ * फ्लेक्सबॉक्स: प्रिंसिपल सेटअप * / -webkit-box-orient: vertical; -मोज-बॉक्स-ओरिएंट: ऊर्ध्वाधर; बॉक्स-ओरिएंट: ऊर्ध्वाधर; -वेबकिट-बॉक्स-पैक: केंद्र; -मोज-बॉक्स-पैक: केंद्र; बॉक्स-पैक: केंद्र; -वेबकिट-बॉक्स-संरेखित करें: केंद्र; -मोज-बॉक्स-संरेखित करें: केंद्र; बॉक्स-संरेखित करें: केंद्र; }   
 इसका मतलब क्या है? इसका अर्थ है कि सभी शरीर के बच्चों को ऊर्ध्वाधर अक्ष में केन्द्रित किया जाएगा और दूसरे अक्ष (x अक्ष) में केंद्र होगा।  
 इसके अलावा, मैं कुछ सीएसएस कोड को कुछ तत्वों में आकार जोड़ता हूं।  
  दूसरा डेमो:  डिस्प्ले के साथ लेआउट: तालिका    
  डिस्प्ले: तालिका  बनाने का एक अच्छा तरीका है एक वेब पेज में लेआउट इससे पहले, वेब डेवलपर्स ने  तालिका  तत्वों के साथ लेआउट बना दिया (मार्कअप में)। यह एक अच्छा अभ्यास नहीं था क्योंकि टेबल केवल टेबुलर डेटा के लिए हैं लेकिन अगर आप  display: table  शैली में उपयोग करते हैं, तो आप उसी परिणाम प्राप्त करेंगे, यदि आप मार्कअप में  table  तत्वों का उपयोग करते हुए लेआउट करते हैं।  
 ऐसा करने के लिए, आप केवल " कंटेनर " तत्व (मेरे मामले में,  div.principal ) में अनुवर्ती कक्षाएं जोड़ते हैं:  
  Div.principal {डिस्प्ले: तालिका; }   
 इसका अर्थ है कि  div.principal  एक  table  तत्व की तरह व्यवहार करेगा इसके साथ आप समान गुण जोड़ सकते हैं जो एक मेज!  
 उदाहरण के लिए:  सीमा-पतन ,  सीमा-रिक्ति , आदि।  
 ठीक है, ये है।  
 चीयर्स, लियोनार्डो