इस के साथ 100% ऊंचाई मूल रूप से है कि मैं क्या हासिल करना चाहते हैं:बूटस्ट्रैप नेवबार
मैं कुल पृष्ठ 100% ऊंचाई होना चाहता हूँ, लेकिन जब मैं 100% पर साइडबार और शरीर में कहें, पृष्ठ ने navbar से 40px जोड़ता है, इसलिए मुझे एक स्क्रॉलबार मिलता है जब भी कोई नहीं होना चाहिए।
body, html, .container-fluid, .sidebar, .body {
height: 100%;
min-height: 100%;
}
.navbar {
height: 40px;
position: relative;
}
आप 100% से नेवबार की ऊंचाई घटाना करने के लिए होगा। कई समाधान हैं, जिनमें से कई जावास्क्रिप्ट शामिल करेंगे लेकिन आपको इसकी आवश्यकता नहीं होगी।
1: बॉक्स आकार
नेवबार एक निरपेक्ष स्थिति दे। फिर आपके पास नीचे गायब होने वाले अन्य तत्वों की सामग्री का मुद्दा है। फिर अगला चाल आता है, नेविबार के आकार को शीर्ष-पैडिंग जोड़ें। और अंतिम चाल, box-sizing: border-box;.sidebar और .body जोड़ें। -moz-box-sizing:
उदाहरण:: Fiddle to box-sizing
2: असल में घटाना बेहतर ब्राउज़र समर्थन के लिए आप भी तो जैसे -moz- और -webkit- उपसर्गों की जरूरत है।
उपयोग .body, .sidebar{ height: calc(100% - 40px); ब्राउज़र समर्थन इस बात के लिए बहुत कम जो मैं जानता हूँ बॉक्स आकार के लिए की तुलना में कम से है, इसलिए मैं पहले समाधान की सिफारिश करेंगे। Calc explained on css-tricks
3: flexbox (जोड़ा anno 2015)
अब आप शायद calc का उपयोग कर जब आप ऊंचाई जानते हैं, लेकिन तालिकाओं का उपयोग के लिए एक भयानक प्रतिस्थापन flexbox है के साथ जाना चाहिए। उत्तरदायी वेबसाइटों में जटिल डिजाइन के लिए यह वास्तव में मेरा उद्धारक है। सर्वोत्तम सुविधाओं में से एक का उपयोग करके - flex-shrink: 0 - शीर्षलेख पर आप अन्य तत्वों को शेष कंटेनर को भरने के लिए स्वयं को समायोजित करने के लिए मजबूर कर सकते हैं।
एक पुरानी जवाब शायद हां, तो फिर flexbox पर एक व्यापक गाइड को लिखने के लिए सबसे अच्छी जगह है, अपनी तरफ बार और शरीर के चारों ओर एक कंटेनर जोड़कर css-tricks
क्योंकि यह:
मैं इसे तालिकाओं का उपयोग द्वारा तय कर ली, लेकिन मुझे यकीन है कि वहाँ एक आसान तरीका
<body>
<div class="container-fluid">
<div class="navbar"></div>
<div class="sidebar"></div>
<div class="body"></div>
</div>
</body>
और सीएसएस मैं अब तक क्या मिल गया है होना चाहिए नेविबार से डिफ़ॉल्ट मार्जिन जोड़ रहा है। इसके अलावा
.navbar {
height: 40px;
position: relative;
margin: 0;
padding: 0;
}
, अधिकतम ऊंचाई तक मिनट बदलने का प्रयास करें: इस प्रयास करें
max-height: 100% !important;
लेकिन फिर पेज अब भी मुझे एक 40px स्क्रॉलबार दे रहा है क्योंकि साइडबार और शरीर div ऊंचाई 100% कर रहे हैं, और नेवबार ऊंचाई 40px, 100% है जो है + 40px – user2538584
@ user2538584 संपादन की जांच करें। जांचें कि क्या यह काम करता है। –
'.avavbar { लाइन-ऊंचाई: 50 पीएक्स; मार्जिन: 0; पैडिंग: 0; } 'मेरे लिए काम कर रहा है – sky91
मैं से थोड़ा अधिक अपने कोड को बदलने के लिए एक महान लिंक नहीं है वर्ग:
body, html, .container-fluid, .sidebar, .body {
height: 100%;
min-height: 100%;
}
#container{
width:100%;
height:100%;
}
.sidebar{
background-color: green;
width:10%;
float:left;
height:100%;
}
.body{
background-color: orange;
float:left;
width:90%;
height:100%;
}
.navbar {
height: 40px;
position: relative;
background-color: yellow;
width:100%;
}
यहाँ RESULT
Css है
एचटीएमएल
<div class="container-fluid">
<div class="navbar">
navbar
</div>
<div id="container">
<div class="sidebar">
sidebar
</div>
<div class="body">
body
</div>
</div>
</div>
</body>
धन्यवाद लेकिन फिर भी मुझे 40px स्क्रॉलबार मिलता है – user2538584
' calc() 'समर्थन के संदर्भ में, यह वास्तव में [आश्चर्यजनक रूप से अच्छा] है (http://caniuse.com/#feat=calc)। मैं इस धारणा के तहत भी था कि समर्थन लगभग मौजूद नहीं था – Bojangles
धन्यवाद, उस ज्ञान के साथ मेरा जवाब संपादित किया। दुर्भाग्यवश आईई 8 में अभी भी एक सभ्य बाजार हिस्सेदारी है। मुझे पता होना चाहिए था, मैंने पहले कैन्यूज पेज की जांच की थी। मेरे दिमाग ने शायद इसे अपनी परियोजना के लिए उपयोग नहीं किया जा सकता है, इसलिए कोई समर्थन नहीं- –
बहुत बहुत धन्यवाद !!! – user2538584