我只想滾動 1 個 div 元素，但 css 溢出：自動不起作用
[英]I want to scroll only 1 div element, but css overflow: auto doesn't work
問題描述
* {margin: 0; padding: 0; border: 0;} ul {list-style: none;}.work_page { display: flex; width: 100vw; height: 100vh; }.btn_text { display: flex; width: 50vw; height: 100vh; font-size: 5vw; font-weight: bold; background-color: grey; }.work { margin-top: 50px; margin-left: 50px; }.btn_text ul { margin-top: 50px; margin-left: 50px; }.personal { margin-top: 30px; }.team_work { display: flex; flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; justify-content: space-evenly; width: 50vw; height: 200vh; background-color: blue; }.team_work div { text-align: center; line-height: 40vh; width: 15vw; height: 40vh; margin: 10vh 1vw; background-color: rgba(0, 0, 0, 0.9); }
<div class="work_page"> <div class="btn_text"> <div class="work">work</div> <ul> <li class="team">team</li> <li class="personal">personal</li> </ul> </div> <div class="team_work"> <div data-aos="fade-up" data-aos-easing="linear" data-aos-duration="2000">work1</div> <div data-aos="fade-up" data-aos-easing="linear" data-aos-duration="2000">work2</div> <div data-aos="fade-up" data-aos-easing="linear" data-aos-duration="2000">work3</div> <div data-aos="fade-up" data-aos-easing="linear" data-aos-duration="2000">work4</div> <div data-aos="fade-up" data-aos-easing="linear" data-aos-duration="2000">work5</div> <div data-aos="fade-up" data-aos-easing="linear" data-aos-duration="2000">work6</div> </div>
大家好.. 這是我的代碼，請告訴我為什么它不起作用我只想滾動藍色背景 div，但它會一起移動......所以谷歌搜索的結果說在你想要滾動的 div 上添加溢出-y：自動。 然后我在.team_work div 上添加了屬性，但它不起作用......我花了 2 個小時來修復它！！！ 幫我！
1 個解決方案
解決方案1
1 2021-04-02 16:48:04
我已將 team_work 設置為 100vh 而不是 200vh。
* {margin: 0; padding: 0; border: 0;} ul {list-style: none;}.work_page { display: flex; width: 100vw; height: 100vh; }.btn_text { display: flex; width: 50vw; height: 100vh; font-size: 5vw; font-weight: bold; background-color: grey; }.work { margin-top: 50px; margin-left: 50px; }.btn_text ul { margin-top: 50px; margin-left: 50px; }.personal { margin-top: 30px; }.team_work { display: flex; flex-wrap: wrap; overflow-x: hidden; overflow-y: auto; justify-content: space-evenly; width: 50vw; height: 100vh; background-color: blue; }.team_work div { text-align: center; line-height: 40vh; width: 15vw; height: 40vh; margin: 10vh 1vw; background-color: rgba(0, 0, 0, 0.9); }
<body> <div class="work_page"> <div class="btn_text"> <div class="work">work</div> <ul> <li class="team">team</li> <li class="personal">personal</li> </ul> </div> <div class="team_work"> <div data-aos="fade-up" data-aos-easing="linear" data-aos-duration="2000">work1</div> <div data-aos="fade-up" data-aos-easing="linear" data-aos-duration="2000">work2</div> <div data-aos="fade-up" data-aos-easing="linear" data-aos-duration="2000">work3</div> <div data-aos="fade-up" data-aos-easing="linear" data-aos-duration="2000">work4</div> <div data-aos="fade-up" data-aos-easing="linear" data-aos-duration="2000">work5</div> <div data-aos="fade-up" data-aos-easing="linear" data-aos-duration="2000">work6</div> </div> </div> </body>
我可以擴展div，以便overflow-y：auto滾動條不會剪輯div內容嗎？
[英]Can I expand a div so the overflow-y:auto scrollbar doesn't clip the div content?
CSS：當我使用 append 新的 div 元素時，z-index 無法正常工作
[英]CSS: z-index doesn't work prperly when i append the new div element
Div溢出，滾動僅在此處工作，直到div被移除並觸發該溢出的偏移量offsetheight div
[英]Div Overflow, Scroll only work there, till div is removed and trigger a offset of that overflow offsetheight div
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.