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

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

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

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

我有一個(gè)充滿圖塊的面板，可以是任意長(zhǎng)度，包括滾動(dòng)超出視口的下限，因此當(dāng)前正在使用垂直滾動(dòng)。我想要的是一個(gè)可選的下部面板，可以根據(jù)用戶的要求顯示或隱藏，該面板始終占據(jù)屏幕下部的 25%。然后，上面的圖塊應(yīng)收縮到上方的滾動(dòng)窗格，以便您可以獨(dú)立滾動(dòng)圖塊，而無(wú)需更改下部面板的位置。所以我需要一個(gè)始終為屏幕高度 100% 且不滾動(dòng)的外部容器。其中，我想要一個(gè)可滾動(dòng)內(nèi)容的面板。如果這是唯一可見(jiàn)的面板，那么它應(yīng)該占據(jù)外部容器的 100% 高度，給人一種主屏幕正在滾動(dòng)的錯(cuò)覺(jué)。當(dāng)下部面板可見(jiàn)時(shí)，可滾動(dòng)內(nèi)容應(yīng)僅占據(jù)屏幕高度的前 75%，并且滾動(dòng)條僅占高度的 75% 以反映這一點(diǎn)。下面的 25% 是應(yīng)該修復(fù)的新面板。下部面板也應(yīng)該可以獨(dú)立滾動(dòng)。所以你最終會(huì)得到兩個(gè)相互堆疊的獨(dú)立滾動(dòng)面板我嘗試過(guò)使用 Flexbox 來(lái)做到這一點(diǎn)，但沒(méi)有任何運(yùn)氣。誰(shuí)能告訴我我做錯(cuò)了什么？下面撥弄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貢獻(xiàn)1873條經(jīng)驗(yàn) 獲得超9個(gè)贊

 skobaljic 的評(píng)論是一種更簡(jiǎn)單的方法。我保留這個(gè)答案，因?yàn)樗匀挥行А?/p>


我假設(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>

幾個(gè)問(wèn)題：

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

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

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

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


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

TA貢獻(xiàn)1851條經(jīng)驗(yàn) 獲得超3個(gè)贊

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


這是一個(gè)帶有復(fù)選框的演示，用于切換第二個(gè)容器的隱藏/顯示，并box-sizing注意padding計(jì)算.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


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

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

 幫助反饋 APP下載

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

 公眾號(hào)

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