手擼兩端固定,中間隨內容自動撐高的H5代碼,達到一定高度中間內容出現滾動條

工作上遇到的,感覺比較實用,記錄一下

沒超過最大高度不會有滾動條
在這裏插入圖片描述

內容超過出現滾動條
在這裏插入圖片描述

	 /* css代碼 */
	    .box{
        display: flex;
        flex-direction: column;
        width:400px;
        min-height:30vh; /* 保證最小高度 */
        max-height:50vh; /* 保證最大高度,超過該高度中間出現滾動條 */
        border:1px solid red;
    }

        
  .fix{
      display: flex;
      flex-grow: 0;
      border:1px solid blue
  }
  .scroll{
      display: flex;
      overflow: auto;
  }
    <div class='box' >
            <div class="fix">上面這個是固定的</div>
            <div class='scroll'>前幾年,高鐵運力不足的時候,某些路局爲了緩解客流壓力,冒着列車超員報警壓死彈簧的安全隱患和列車服務設施過量損耗的風險選擇發售無座票讓人們能早點回家。但是沒人理解鐵路人的良苦用心,隨之引發的就是社會輿論“強烈要求無座票半價”“黑心鐵路有座無座一個票價”以及出現無座票旅客霸佔有座票旅客座位的現象、無座票旅客霸佔一等座、商務座的現象。鐵總這下就怒了,幹嘛要做這種吃力不討好的事,加上運力在這幾年越來越充足,一紙下文各個路局禁止發售高鐵無座票。________各路局情況不一樣,有些路局還是會發售少.前幾年,高鐵運力不足的時候,某些路局爲了緩解客流壓力,冒着列車超員報警壓死彈簧的安全隱患和列車服務設施過量損耗的風險選擇發售無座票讓人們能早點回家。但是沒人理解鐵路人的良苦用心,隨之引發的就是社會輿論“強烈要求無座票半價”“黑心鐵路有座無座一個票價”以及出現無座票旅客霸佔有座票旅客座位的現象、無座票旅客霸佔一等座、商務座的現象。鐵總這下就怒了,幹嘛要做這種吃力不討好的事,加上運力在這幾年越來越充足,一紙下文各個路局禁止發售高鐵無座票。________各路局情況不一樣,有些路局還是會發售少</div>
            <div class='fix'>下面這個也是固定的</div>
    </div>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章