मेरे पास निम्न कोड है:

.container {
  display: grid;
  height: 300px;
  max-height: 300px;
  grid-template-columns: 1fr auto;
}

.clientArea {
  background: lightcoral;
  height: 100%;
  max-height: 100%;
}

.sidebar {
  width: 200px;
  height: 100%;
}

.top,
.bottom {
  max-height: 50%;
  overflow-y: auto;
}
<div class="container">
  <div class="clientArea"></div>
  <div class="sidebar">
    <div class="top" style="background: seagreen">
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
    </div>
    <div class="bottom" style="background: red">
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
    </div>
  </div>
</div>

आप इसे यहां आजमा सकते हैं: https://jsfiddle.net/mekgpd0u/5/

कंटेनर div के आकार पर ध्यान नहीं दिया जाता है। साइडबार बढ़ता है और ग्राहक क्षेत्र भी बढ़ता है। ऐसा क्यों है? मैं चाहता हूं कि पूरी चीज बाहरी div से अधिक न हो। साइडबार के ऊपर और नीचे के हिस्से में से प्रत्येक को बाहरी डिव द्वारा प्रदान की गई ऊंचाई का केवल 50% तक ही लेना चाहिए।

संपादित करें: धन्यवाद @Temani Afif आपके सुझाव ने मेरे न्यूनतम उदाहरण के लिए काम किया लेकिन मेरी वास्तविक समस्या निम्न की तरह दिखती है:

.outerContainer {
  background: gold;
  display: grid;
  grid-template-rows: 100vh;
}
.innerContainer {
  display: grid;
  grid-template-columns: 1fr auto;
}
.viewer {
  background: lightcoral;
}
.sidebar {
  width: 200px;
  height: 100%;
  display: grid;
}
.top,
.bottom {
  overflow-y: auto;
}

<div class="outerContainer">
  <div>
    <h4>Test</h4>
    <h4>Test</h4>
    <h4>Test</h4>
    <h4>Test</h4>
    <h4>Test</h4>
    <h4>Test</h4>
    <h4>Test</h4>
    <h4>Test</h4>

    <div class="innerContainer">
      <div class="viewer"></div>
      <div class="sidebar">
        <div class="top" style="background: seagreen">
          <h4>Test</h4>
          <h4>Test</h4>
          <h4>Test</h4>
          <h4>Test</h4>
          <h4>Test</h4>
          <h4>Test</h4>
          <h4>Test</h4>
          <h4>Test</h4>
        </div>
        <div class="bottom" style="background: red">
          <h4>Test</h4>
          <h4>Test</h4>
          <h4>Test</h4>
        </div>
      </div>
    </div>
  </div>
</div>

मैं चाहता हूं कि पूरी चीज ऊंचाई में 100vh हो। जब पीले वाले को अधिक स्थान की आवश्यकता हो तो भीतरी कंटेनर की ऊंचाई कम होनी चाहिए और हरे और लाल वाले कंटेनर कभी भी दर्शक से अधिक नहीं होने चाहिए और प्रत्येक को दर्शकों की ऊंचाई का 50% से अधिक नहीं लेना चाहिए। आंतरिक कंटेनर को सभी उपलब्ध ऊंचाई लेनी चाहिए जो पीले div द्वारा कब्जा नहीं की जाती है। मैं यह नहीं समझ सकता कि यह कैसे करें :(

1
Neralem 26 जिंदा 2022, 16:35

2 जवाब

ऊंचाई निर्धारित करने के बजाय एक पंक्ति के आकार को परिभाषित करें:

.container {
  display: grid;
  grid-template-rows: 300px;
  grid-template-columns: 1fr auto;
}

.clientArea {
  background: lightcoral;
  max-height: 100%;
}

.sidebar {
  width: 200px;
  height: 100%;
}

.top,
.bottom {
  max-height: 50%;
  overflow-y: auto;
}
<div class="container">
  <div class="clientArea"></div>
  <div class="sidebar">
    <div class="top" style="background: seagreen">
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
    </div>
    <div class="bottom" style="background: red">
      <h4>Test</h4>
      <h4>Test</h4>
      <h4>Test</h4>
    </div>
  </div>
</div>
0
Temani Afif 26 जिंदा 2022, 16:47

कंटेनर div के आकार को नजरअंदाज नहीं किया जाता है, यह केवल इसका अतिप्रवाह दिखाता है। अपनी समस्या को ठीक करने के लिए इसकी शैलियों में overflow: hidden; या overflow: scroll; जोड़ें।

0
mo3n 26 जिंदा 2022, 17:04
हरे और लाल divs में y-overflow स्वतः पर सेट है
 – 
Neralem
26 जिंदा 2022, 18:28