के अंदर 100% ऊंचाई div प्राप्त करना मैं flexbox का उपयोग करके निम्नलिखित लेआउट का उत्पादन करने की कोशिश कर रहा हूं।फ्लेक्सबॉक्स आइटम
शीर्ष काला बार, मध्य अनुभाग और नीचे काले बार सभी फ्लेक्स आइटम, जो सिर्फ शरीर टैग के अंदर एक आवरण div, जो इस प्रकार लग रहा है के बच्चे हैं कर रहे हैं।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
<link href="~/Styles/bootstrap.min.css" rel="stylesheet" />
<link href="~/Styles/font-awesome.min.css" rel="stylesheet" />
<link href="~/Styles/ppt_site.css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<div id="topRow">
</div>
<div id="centralRow">
<div id="sidebarColumn">
</div>
<div id="contentColumn">
</div>
</div>
<div id="bottomRow">
</div>
</div>
@Section['customScripts']
<script src="~/Scripts/siteGlobals.js"></script>
<script src="~/requireconfig"></script>
<script data-main="~/scripts/NewTemplatesAppLoader.js" src="~/requirejs"></script>
</body>
</html>
शैली पत्रक इस सब को नियंत्रित करने के रूप में
.wrapper, html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
#topRow {
background-color: black;
color: white;
}
#centralRow {
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
#bottomRow {
background-color: #333333;
color: white;
}
#sidebarColumn {
background-color: #B83B1D;
color: white;
}
#contentColumn {
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
background-color: #F7F7F7;
color: black;
padding: 10px;
overflow-y: auto;
}
इस प्रकार है जहां तक मुख्य लेआउट चला जाता है, यह सब पूरी तरह से काम करता है, आप फिर भी अगर आप छवि में देखने पर ध्यान देंगे, पीले रंग की सीमा के साथ शीर्ष पर एक क्षेत्र के रूप में लाल साइड बार।
वह क्षेत्र, उपरोक्त सीएसएस में लाल क्षेत्र (साइडबार कॉलम) की पूरी ऊंचाई को फैलाता है, लेकिन कोशिश करें क्योंकि मैं इसे जो भी कर सकता हूं उसे करने के लिए मैं इसे प्राप्त नहीं कर सकता।
आदर्श रूप से, मैं इसे एक div होना चाहता हूं, यह एक फ्लेक्स कंटेनर है, जिसे मैं 4 फ्लेक्स आइटम डाल सकता हूं और उनमें से प्रत्येक को प्रत्येक स्थान पर एक चौथाई स्थान लेना चाहिए, लेकिन पीले रंग के साथ div सीमा अभिभावक कंटेनर की ऊंचाई (लाल साइडबार, जो एक फ्लेक्स आइटम स्वयं है) दिखाई नहीं दे सकती है, तो यह केवल इसकी सामग्री के आस-पास की जगह की ऊंचाई लेती है।
मैंने इसे अधिक div में लपेटने और उन divs को पोजीशन करने की कोशिश की है, मैंने आगे divs में आगे फ्लेक्स बॉक्स लपेट लिए हैं, मैंने ब्लॉक, इनलाइन, टेबल-सेल्स और बस बाकी सब कुछ के बारे में सोचने की कोशिश की है।
कोई फर्क नहीं पड़ता कि मैं क्या कोशिश करता हूं, मुझे लगता है कि पीले रंग के कंटेनर को माता-पिता के समान ऊंचाई नहीं लग रहा है।
कोई भी विचार किसी को भी?
अद्यतन (अगली सुबह)
2 प्रस्तावित समाधान, वास्तव में काम करते हैं, अपने आप में करते हैं और वे काम के रूप में मैं उन्हें बहुत उम्मीद है।
हालांकि मेरे विशेष मामले में, वे काम नहीं करते हैं।
मैं अपने सुपर सरल दृश्य इंजन के साथ नैन्सीएफएक्स का उपयोग कर रहा हूं, और मैं "वेब घटक" लिखने के लिए नॉकआउटजेएस का उपयोग कर रहा हूं, इसलिए मैं अपने टुकड़ों को फिर से उपयोग करने योग्य रख सकता हूं।
यदि मैं अपना "मास्टर टेम्पलेट" संपादित करता हूं, और divs को सीधे मार्कअप में डालें, #sidebar कॉलम से नीचे घोंसला मुझे वांछित आकार के 4 divs प्राप्त करें।
हालांकि, क्या वास्तव में ऐसा करने की जरूरत है वह इस प्रकार है, मेरे टेम्पलेट के रूप में निम्नानुसार है:
<div class="wrapper">
<div id="topRow">
@Section['topbarContent']
</div>
<div id="centralRow">
<div id="sidebarColumn">
@Section['sidebarContent']
</div>
<div id="contentColumn">
@Section['bodyContent']
</div>
</div>
<div id="bottomRow">
@Section['bottombarContent']
</div>
</div>
अगर मैं "@Section [ 'sidebarContent']" को हटाने और divs सीधे डाल में वे काम करते हैं।
अगर मैं अपने "पृष्ठ" के रूप में इस टेम्पलेट का उपयोग करता है में सीधे divs डाल:
@Master['shared/ppt_layout.html']
@Section['topbarContent']
<toptoolbar></toptoolbar>
@EndSection
@Section['sidebarContent']
<div>aaa</div>
<div>aaa</div>
<div>aaa</div>
<div>aaa</div>
@EndSection
@Section['bodyContent']
<h1>Body Content</h1>
<p class="lead">I am the test page that uses a wide sidebar component</p>
<p>If you notice however, I also have a top toolbar with title added to me, and a footer bar.</p>
<p>We all use the same template however....</p>
@EndSection
@Section['bottombarContent']
<footerbar></footerbar>
@EndSection
@Section['customScripts']
@EndSection
भी काम करता है यही कारण है, लेकिन मैं एक नॉकआउट घटक में मार्कअप, यहां तक कि बस के रूप में सीधे divs जगह पृष्ठ में काम करता है, तो मुझे मूल रूप से देखा गया प्रभाव मिलता है।
तो किसी कारण से, सामग्री जोड़ने, नॉकआउट घटकों का उपयोग करना बहुत ही चीज है जो समस्या पैदा कर रही है।
यहां तक कि यदि मैं घटक के अंदर एक नया फ्लेक्स लेआउट बनाने की कोशिश करता हूं, तो सभी कार्यों पर लंबवत कुछ नहीं, क्षैतिज रूप से हालांकि सब कुछ पूरी तरह से काम करता है।
उदाहरण के लिए पाद लेख बार बिना किसी समस्या के बाएं और दाएं खंडों में बांटा गया है, लेकिन ऊर्ध्वाधर संरेखण बस रद्द हो जाता है।
ठीक है, तो अपने प्रस्तावित समाधान स्टैंडअलोन काम करता है मैं भी उम्मीद बस के रूप में, लेकिन यह मेरी परियोजना में काम नहीं करता, मैं फिर भी क्यों अब इस सवाल का जवाब नहीं है। – shawty
यह देखने के लिए खुशी हुई कि आपने इसे समझ लिया है, अन्यथा यह देखने के लिए हर किसी के लिए यह बहुत कठिन हो सकता है कि वहां क्या हो रहा था। – Stickers
हाँ यह एक चुनौती थी, मुझे स्वीकार करना है ... – shawty