React 中 Div 未到达网页边缘

Question

我的索引页

export default function Home()
{
    return(
        <div className = {stylesMain.bodyDiv}> 
            <div>home</div>
        </div>
    )
}

它调用的CSS

.bodyDiv{   
    background-color: green;
    height:500px;
    width: 100%;
    position: 'fixed';
    display: 'flex';
    justify-content: 'center';
    align-items: 'center'; 
    margin: 0;
    padding: 0;       
}

如图所示，div 没有到达页面边缘

我首先尝试在网上寻找解决方案，但没有一个解决方案适合我。特别是多次弹出一个解决方案，即制作 a 并将其边距和填充设置为 0，但每当我尝试使用 body 标签时

export default function Home()
{
    return(

        <body>
        <div className = {stylesMain.bodyDiv}> 
            <div>home</div>
        </div>
        </body>
            
    )
}

它抛出这个错误：错误：水合失败，因为初始 UI 与服务器上呈现的内容不匹配。警告：期望服务器 HTML 包含 .

中的匹配项

Answer 1

这似乎是一个

CSS

问题。您只需为样式中的所有元素添加

边距即可。尝试在您的

style.css

文件中添加以下内容，应该可以解决问题。希望有帮助。

* {
    margin: 0;
    box-sizing: border-box;
    padding: 0;
 }

margin

属性将默认删除所有边距，除非您专门为元素设置边距。

padding

将对元素的填充执行相同的操作，

box-sizing

允许将内边距和边框包含在元素的总宽度和高度中。如果在元素上设置

box-sizing: border-box;

，则内边距和边框将包含在宽度和高度中。

React 中 Div 未到达网页边缘

问题描述投票：0回答：1

1个回答

最新问题

React 中 Div 未到达网页边缘

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1