第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

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

如何在 HTML/CSS 中實現(xiàn)可選的分屏布局？

如何在 HTML/CSS 中實現(xiàn)可選的分屏布局？

繁星點點滴滴 2023-11-02 22:38:42
我有一個充滿圖塊的面板，可以是任意長度，包括滾動超出視口的下限，因此當前正在使用垂直滾動。我想要的是一個可選的下部面板，可以根據(jù)用戶的要求顯示或隱藏，該面板始終占據(jù)屏幕下部的 25%。然后，上面的圖塊應(yīng)收縮到上方的滾動窗格，以便您可以獨立滾動圖塊，而無需更改下部面板的位置。所以我需要一個始終為屏幕高度 100% 且不滾動的外部容器。其中，我想要一個可滾動內(nèi)容的面板。如果這是唯一可見的面板，那么它應(yīng)該占據(jù)外部容器的 100% 高度，給人一種主屏幕正在滾動的錯覺。當下部面板可見時，可滾動內(nèi)容應(yīng)僅占據(jù)屏幕高度的前 75%，并且滾動條僅占高度的 75% 以反映這一點。下面的 25% 是應(yīng)該修復(fù)的新面板。下部面板也應(yīng)該可以獨立滾動。所以你最終會得到兩個相互堆疊的獨立滾動面板我嘗試過使用 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條經(jīng)驗 獲得超9個贊

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


我假設(shè)你想要這樣的東西：


* {

  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. 您將高度設(shè)置.app-container為 100%，但是是什么。你需要設(shè)置一個參考，所以在body/html上設(shè)置高度是必要的。

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

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

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


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

TA貢獻1851條經(jīng)驗 獲得超3個贊

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


這是一個帶有復(fù)選框的演示，用于切換第二個容器的隱藏/顯示，并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


查看完整回答
反對 回復(fù) 2023-11-02
  • 2 回答
  • 0 關(guān)注
  • 231 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號