CSS Div带有固定位置的CSS DIV在Safari上没有显示

发布于 2025-01-17 21:13:04 字数 899 浏览 2 评论 0原文

我有一个固定位置的Navbar，但是在某些iOS设备中，我没有显示出来，我搜索了它，我认为这是固定位置的问题。因此，我更改为绝对，但是Navbar转到页面底部。有人知道我可以通过哪个CSS Proprierty将其集中在页面顶部？我已经在使用“ top：0”

这是代码：

<Header>
       <NewNavbar />
  </Header>

标题样式的组件：

  export const Header = styled.header`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  display: flex;
  justify-content: space-between;
  align-items: center;

  // padding: 0 20px;
  min-height: 52px;
`;

我不知道这是否可能是Safari没有显示Navbar组件的另一个原因，但是Newnavbar组件也有一些Divs在移动尺寸中显示

  {mobileSidebar ? (
          <Grid xs={6} item className={classes.mobile}>
            <Button onClick={toggleDrawerMobile(true)}>
              <MenuIcon />
            </Button>
          </Grid>
        ) : null}

更新时显示！！！！谢谢大家！我可以通过给父亲为100VH的身高来解决！！！

原文

I have a navbar with position fixed, but in some ios devices it does not show, I googled it and I think it's an issue with the fixed position. So, I changed to absolute, but the navbar goes to the bottom of the page. Does someone know which css proprierty can I pass to centralized it on the top of the page?
I'm already using "top:0"

here's the code:

<Header>
       <NewNavbar />
  </Header>

header styled component:

  export const Header = styled.header`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;

  display: flex;
  justify-content: space-between;
  align-items: center;

  // padding: 0 20px;
  min-height: 52px;
`;

I don't know if this could be another reason of why safari is not showing the navbar component, but the NewNavbar component also has some divs that only is displayed when it's in a mobile size

  {mobileSidebar ? (
          <Grid xs={6} item className={classes.mobile}>
            <Button onClick={toggleDrawerMobile(true)}>
              <MenuIcon />
            </Button>
          </Grid>
        ) : null}

UPDATE !!!! Thanks everyone! I could solve it by giving to the father div the height 100vh !!!

分享到QQ

分享到微博