我的 css 弄乱了滚动工作正常

Question

I have this setup https://codepen.io/saraLance/pen/LYGevXW and I have a couple of problems.我有这个设置https://codepen.io/saraLance/pen/LYGevXW我有几个问题。

the header covers more than the parent width. header覆盖超过父宽度。
Scroll works weird, it seems to stop after the button play , and then I have to scroll again.滚动工作很奇怪，它似乎在按钮play后停止，然后我必须再次滚动。

I have tried to fix the scroll problem making the header fixed position: fixed; width: 100%我试图修复滚动问题，使header固定position: fixed; width: 100% position: fixed; width: 100% but the header covers more than the parent div. position: fixed; width: 100% ，但header覆盖的范围超过了父 div。

I also have no idea why screen height it's not the same that it's parent screens .我也不知道为什么screen高度与父screens不同。

Ideally sit-container should be after header and header should be fixed.理想情况下sit-container应该在header之后，并且header应该是固定的。

 div { width: auto; }.screens { background: green; height: 100vh; display: flex; overflow-x: hidden; overflow-y: auto; }.screen { background: red; }.header { border: solid 1px black; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; padding: 12px; background: white; }.sit-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 1rem; overflow: auto; }.strip { width: 100vw; }.view { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; min-height: 300px; min-width: 300px; animation-delay: 0.2s; overflow-y: scroll; flex-direction: column; }.view-1 { height: 300px; width: 300px; flex: 0 0 auto; margin: 0 auto; margin-top: 1rem; border: solid 1px black; }.button-section { display: flex; flex-direction: column; text-align: center; margin-top: 1rem; width: 100%; }.play-button { height: 1.25rem; display: flex; justify-content: center; align-items: center; color: black; border: 1px solid black; text-decoration: none; padding: 1rem 1.25rem; line-height: 1rem; border-radius: 0.375rem; font-size: 1rem; font-style: normal; font-weight: normal; text-align: center; text-transform: uppercase; margin: 1rem; }.quit-button { color: black; text-decoration: none; font-size: 1.2rem; margin-top: 1.5rem; margin-bottom: 1.5rem; border: 1px solid black; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale="> <title></title> </head> <body> <div class="screens"> <div class="screen"> <div class="header"> <div class="div-1">Div-1</div> <div class="div-1">Div-2</div> </div> <div class="sit-container"> <div class="strip"> <div class="view"> <div class="view-1">View-1</div> <div class="view-1">View-2</div> <div class="view-1">View-3</div> <div class="view-1">View-4</div> </div> </div> <div class="button-section"> <a class="play-button">Play</a> <a class="quit-button">Quit</a> </div> </div> </div> </div> </body> </html>

Answer 1

screens class should be width: auto and overflow-x:hidden should be on button-section screens class 应该是width: auto和overflow-x:hidden应该在button-section
See output in full screen全屏见output

 div { width: auto; } @media (min-width: 768px) { width:35%; margin:auto; }.screens { background: green; height:"auto"; display: flex; }.screen { background: red; }.header { border: solid 1px black; display: flex; flex-direction: row; align-items: center; justify-content: space-evenly; padding: 12px; background: white; }.sit-container { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 1rem; overflow: auto; }.strip { width: 100vw; @media (min-width: 768px) { width: 35vw; } }.view { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; min-height: 300px; min-width: 300px; animation-delay: 0.2s; overflow-y: scroll; flex-direction: column; }.view-1{ height: 300px; width: 300px; flex: 0 0 auto; margin: 0 auto; margin-top: 1rem; border: solid 1px black; }.button-section{ display: flex; flex-direction: column; text-align: center; margin-top: 1rem; width: 100%; overflow-x:hidden; }.play-button { height: 1.25rem; display: flex; justify-content: center; align-items: center; color: black; border: 1px solid black; text-decoration: none; padding: 1rem 1.25rem; line-height: 1rem; border-radius: 0.375rem; font-size: 1rem; font-style: normal; font-weight: normal; text-align: center; text-transform: uppercase; margin: 1rem; }.quit-button { color: black; text-decoration: none; font-size: 1.2rem; margin-top: 1.5rem; margin-bottom: 1.5rem; border: 1px solid black; }

 <div class="screens"> <div class="screen"> <div class="header"> <div class="div-1">Div-1</div> <div class="div-1">Div-2</div> </div> <div class="sit-container"> <div class="strip"> <div class="view"> <div class="view-1">View-1</div> <div class="view-1">View-2</div> <div class="view-1">View-3</div> <div class="view-1">View-4</div> </div> </div> <div class="button-section"> <a class="play-button">Play</a> <a class="quit-button">Quit</a> </div> </div> </div> </div>

我的 css 弄乱了滚动工作正常

问题描述

1 个解决方案

解决方案1
0 2020-07-04 04:47:08

我的 css 弄乱了滚动工作正常

问题描述

1 个解决方案

解决方案1 0 2020-07-04 04:47:08

解决方案1
0 2020-07-04 04:47:08