当前位置：网站首页>After the element uses align items center and overflow auto, some contents are not fully displayed

After the element uses align items center and overflow auto, some contents are not fully displayed

2022-06-30 00:39:00 【Zheng One Dream】

When we use to center the content align-items center After the attributes , Because the small screen will block part of the content

We'll add... To the box overflow-y auto This attribute

But when we zoom out , Will find , The top half of the content will not be displayed 

<style>
  .box {
    height: 100vh;
    display: flex;
    align-items: center;
    overflow-y: auto;
  }

  .content {
    height: 600px;
  }
</style>
<body>
  <div class="box">
    <div class="content"></div>
  </div>
</body>

  This is because the element is centered on the side axis . If the height of the element on the side axis is higher than its container , Then the overflow distance is the same in both directions

Reference documents ：

align-items - CSS（ Cascading style sheets ） | MDN

Here are two solutions ：

1. Nested box 

<style>
  .container {
    height: 100vh;
    display: flex;
    align-items: center;
    overflow-y: auto;
  }
  .box {
    height: 100%;
  }

  .content {
    height: 600px;
  }
</style>
<body>
  <div class="container">
    <div class="box">
      <div class="content"></div>
    </div>
  </div>
</body>

2. take display flex Change it to display grid

<style>
  .box {
    height: 100vh;
    display: grid;
    align-items: center;
    overflow-y: auto;
  }

  .content {
    height: 600px;
  }
</style>
<body>
  <div class="box">
    <div class="content"></div>
  </div>
</body>

====================== Here's some bullshit , Don't look

because csdn Pretend you know the quality of the article

What you write less is poor quality , It won't push you up , It's funny

csdn New quality inspection function , Really? 6,“ yyds ”

I believe that this problem , My answer can solve 100% The problem of , You said my article was not good enough ？

Do you want me to write a lot of nonsense in the article ？

原网站

版权声明
本文为[Zheng One Dream]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/181/202206300030095343.html

边栏推荐

猜你喜欢

随机推荐