亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何在 HTML/CSS 中實現可選的分屏布局？

如何在 HTML/CSS 中實現可選的分屏布局？

繁星點點滴滴 2023-11-02 22:38:42
我有一個充滿圖塊的面板，可以是任意長度，包括滾動超出視口的下限，因此當前正在使用垂直滾動。我想要的是一個可選的下部面板，可以根據用戶的要求顯示或隱藏，該面板始終占據屏幕下部的 25%。然后，上面的圖塊應收縮到上方的滾動窗格，以便您可以獨立滾動圖塊，而無需更改下部面板的位置。所以我需要一個始終為屏幕高度 100% 且不滾動的外部容器。其中，我想要一個可滾動內容的面板。如果這是唯一可見的面板，那么它應該占據外部容器的 100% 高度，給人一種主屏幕正在滾動的錯覺。當下部面板可見時，可滾動內容應僅占據屏幕高度的前 75%，并且滾動條僅占高度的 75% 以反映這一點。下面的 25% 是應該修復的新面板。下部面板也應該可以獨立滾動。所以你最終會得到兩個相互堆疊的獨立滾動面板我嘗試過使用 Flexbox 來做到這一點，但沒有任何運氣。誰能告訴我我做錯了什么？下面撥弄https://jsfiddle.net/cdg6815s/2/.app-container {  height: 100%;  padding: 10px;  background-color: blue;  overflow: hidden;  display: flex;  flex-direction: column;}.container {  height: 80%;  background-color: green;  padding: 10px;  flex: 0.8;  overflow-y: scroll;}.logtailContainer {  height: 20%;  background-color: red;  padding: 10px;  flex: 0.2;  overflow-y: scroll;}
查看完整描述

2 回答

?
眼眸繁星

TA貢獻1873條經驗 獲得超9個贊

 skobaljic 的評論是一種更簡單的方法。我保留這個答案，因為它仍然有效。


我假設你想要這樣的東西：


* {

  box-sizing: border-box;

}


.b {

  height: 100vh;

  margin: 0;

  padding: 0;

}


.app-container {

  height: 100vh;

  padding: 10px;

  background-color: blue;

  overflow: hidden;

  display: flex;

  flex-direction: column;

}


.contentpanel {

  max-height: 75vh;

  background-color: green;

  padding: 10px;

  flex: 0 1 75vh;

  overflow-y: scroll;

}


.lowerpanel {

  max-height: 25vh;

  background-color: red;

  padding: 10px;

  flex: 0 1 25vh;

  overflow-y: scroll;

}

<body class="b">


  <div class="app-container">

    <div class="contentpanel">

      App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App

      tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br />

    </div>

    <div class="lowerpanel">

      Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br

      /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br />

    </div>

  </div>

</body>

幾個問題：

  1. 您將高度設置.app-container為 100%，但是是什么。你需要設置一個參考，所以在body/html上設置高度是必要的。

  2. flex屬性是簡寫 - 所以你設置了 flex Growth （你可能知道），但這就是它將增長的比率。將 flex-basis 屬性設置為高度可能是更好的方法。

  3. 我將高度值更改為vh單位以使用視口高度作為參考。

  4. 設置max-height元素而不是高度，允許它們縮小/增長，但停止在特定的高度值。


查看完整回答
反對 回復 2023-11-02
?
皈依舞

TA貢獻1851條經驗 獲得超3個贊

如果使用flex，則可以在主容器上使用flex:1;或flex-grow:1來代替設置固定，并且僅在可以隱藏的第二個容器上height設置height/ 。min-height為了填充窗口，height:100vh 和 body 的邊距重置在這里也很有效。如果涉及border和，還要注意型號，將它們包含在您的尺碼中。paddingbox-sizing


這是一個帶有復選框的演示，用于切換第二個容器的隱藏/顯示，并box-sizing注意padding計算.app-container100vh 高度。


body {

  margin: 0;

}


.app-container {

  height: 100vh;

  padding: 10px;

  background-color: blue;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  box-sizing: border-box;

}


.contentpanel {

  background-color: green;

  padding: 10px;

  flex: 1;

  overflow-y: scroll;

}


.lowerpanel {

  height: 20%;

  background-color: red;

  padding: 10px;

  min-height: 4em;

  overflow-y: scroll;

}



/* demo purpose CSS to use input/label to toggle display of lowerpanel */

#hide {

  position: absolute;

  right: 100vw;

}


[for="hide"] {

  cursor: pointer;

  background: #bee;

  border: 1px solid;

  border-radius: 5px;

  padding: 0.25em;

  display: block;

  width: max-content;

  margin: auto;

}


#hide:checked~.lowerpanel {

  display: none;

}

<div class="app-container">


  <input type="checkbox" id="hide"><!-- input for demo purpose -->

  

  <div class="contentpanel">


    <label for="hide">toggle red container</label><!-- label for demo purpose -->


    App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles

    <br /><br /> App tiles<br /><br /> App tiles<br /><br /> App tiles<br /><br />

  </div>

  <div class="lowerpanel">

    Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br

    /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br /> Logtail stuff<br /><br />

  </div>

  </div


查看完整回答
反對 回復 2023-11-02
  • 2 回答
  • 0 關注
  • 216 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號