9
ट्विटर बूटस्ट्रैप के साथ स्टाइल किए गए पृष्ठ पर और navbar का उपयोग करके मैं Google मानचित्र मानचित्र के साथ नेविगेशन बार के नीचे पूरे कंटेनर को भरना चाहता था। यह पूरा करने के लिए कि मैंने नीचे दिए गए सीएसएस को जोड़ा है।बूटस्ट्रैप: नेविबार माइनस नेबरबार ऊंचाई के तहत पूरे कंटेनर को भरें
मैं html और body के आकार को 100% तक परिभाषित करता हूं ताकि इसका उपयोग मानचित्र की आकार परिभाषा के लिए किया जा सके। हालांकि, यह समाधान एक समस्या उत्पन्न करता है:
मानचित्र की ऊंचाई अब पूरे पृष्ठ की ऊंचाई के समान ही है, जिसके परिणामस्वरूप स्क्रॉल बार होता है जिसे मैं 40px नेविगेशन बार जोड़ता हूं। मैं नेविगेशन बार के मानचित्र का आकार 100% - 40px पर कैसे सेट कर सकता हूं?
#map {
height: 100%;
width: 100%;
}
#map img {
max-width: none;
}
html, body {
height: 100%;
width: 100%;
}
.fill {
height: 100%;
width: 100%;
}
.navbar {
margin-bottom: 0;
}
पूर्णता के लिए HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<!-- Stylesheets -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/core.css">
</head>
<body>
<div class="navbar">
<div class="navbar-inner">
</div>
</div>
<div class="container fill">
<div id="map">
</div>
</div>
</body>
</html>
क्या मैं सही हूं, इस तरह, ऐप अब उत्तरदायी नहीं है, क्योंकि बूटस्ट्रैप पूर्ण मेनू मानचित्र div पर अपने मेनू को टॉगल करता है? –
@ जुर्गनजोर्निग उत्तरदायित्व एक पूर्ण राज्य नहीं है। यदि यह छोटे/व्यापक स्क्रीन पर आपके लेआउट के लिए काम करता है, तो यह उत्तरदायी है। यदि नहीं, तो कुछ मीडिया प्रश्नों में फेंक दें और इसे अपनी आवश्यकताओं के अनुरूप बनाएं। – Sherbrow
हां, मैं आपसे सहमत हूं, लेकिन यदि मैं एक डिव पूर्ण शीर्ष 40px को स्थान देता हूं, तो छोटी स्क्रीन पर मानक बूटस्ट्रैप मेनू व्यवहार मेरे div को ओवरलैप करेगा जब मैं नेविबार मेनू खोलता हूं। क्षमा करें, मैं बस इस जवाब से बाहर निकलना चाहता था मेरी लेआउट जरूरतों को फिट करता है। बस इसे किसी अन्य तरीके से हल करें (स्थिति: स्थिर के साथ) –