css 我的React应用程序底部的白色

nfg76nw0  于 2023-04-01  发布在  React
关注(0)|答案(6)|浏览(163)

你好,我有一个问题,在我的网站底部白色。我检查了stackoverflow和技巧,如body { padding: 20px } or body { border: 1px solid black}不工作。
背景css(它覆盖了整个页面/它应该覆盖整个页面,但底部有一个白色)我还检查了我的网站中是否有任何组件有填充,但只有按钮有填充,它没有解决问题。

.Background {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgb(248, 245, 245);
    min-height: 100vh;
    width: 100%;
    background-image: url('../../../images/Storm.jpg');
    object-fit: cover;
    object-fit: fill;
}


@media  screen and  (max-width: 35em)  { 
    .Background {
      height: auto;
        
    }
}

@media  screen and  (max-width: 65em)  { 
    .Background {
       height: auto;
        
    }
}

index.css

html {
  height: 100%;
  width: 100%;
  font-size: 62.5%;
  box-sizing: border-box;
  margin-bottom: 0;
}

* {
  margin: 0;
  padding: 0;
}

*, 
*::after
*::before {
  box-sizing: inherit;
}

body {
  height: 100%;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  overflow-y: hidden;
  
}

@media  screen and  (max-width: 35em)  { 
  body {
    overflow-y: scroll;
      
  }
}

@media  screen and  (max-width: 62.5em)  { 
  body {
    overflow-y: scroll;
      
  }
}

#root {
  height: 100%;
  width: 100%;
  margin-bottom: 0;
  
  
}


code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}
2exbekwf

2exbekwf1#

一个简单的解决办法是增加:

html, body {
    height: 100%;
    width: 100%;
}
igsr9ssn

igsr9ssn2#

确保您的视口如下

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no, viewport-fit=cover">
hvvq6cgz

hvvq6cgz3#

你应该添加这个代码:

html, body {
    height: 100vh;
    width: 100vw;
}

或者你也可以这样做:

html, body {
    height: 100%;
    width: 100%;
}
b1zrtrql

b1zrtrql4#

最佳修复方法为:

html, body {
height: 100vh;
width: 100vw;
}
jucafojl

jucafojl5#

我不知道为什么它工作,但我添加了 Package 到背景高度:10%,白色空间消失。

cwxwcias

cwxwcias6#

必须是一个组件在您的屏幕与底部填充和限制的顶部,所以Web应用程序调整他的heigth添加白色,以实现底部填充:)。

相关问题