反应页眉和页脚宽度不相同会产生滚动X-如何删除斧头X滚动并固定页脚的宽度？

如何解决反应页眉和页脚宽度不相同会产生滚动X-如何删除斧头X滚动并固定页脚的宽度？

我有一个基本的登录页面，其中包含Header，Content和Footer，但是Header小于Footer（其宽度），因此页面在X轴上具有Scroll键。

代码在这里

https://9mjhi.csb.app/

App.js

import React from 'react';
import './styles.css';
import Header from './components/Header';
import Footer from './components/Footer';

const App = () => {
  return (
    <>
      <Header />     
      <Footer>
        <span>&copy;</span> Some Footer goes here
      </Footer>
    </>
  );
}

export default App;

脚：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  style: {
    backgroundColor: "#484848",color: "white",borderTop: "1px solid #E7E7E7",textAlign: "center",padding: "20px",position: "fixed",left: "0",bottom: "0",height: "60px",width: "100vw"
  },phantom: {
    display: "block",width: "100vw"
  }
}));

function Footer({ children }) {
  const classes = useStyles();
  return (
    <div>
      <div className={classes.phantom} />
      <div className={classes.style}>{children}</div>
    </div>
  );
}

export default Footer;

标题：

import React,{ useState } from "react";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles((theme) => ({
  textField: {
    marginLeft: theme.spacing(1),marginRight: theme.spacing(1)
  },container: {
    display: "flex",width: "100vw",justifyContent: "space-evenly",alignItems: "flex-start",backgroundColor: "lightblue"
  },formControl: {
    margin: theme.spacing(1),minWidth: 120
  },root: {
    width: "100%"
    // maxWidth: 500,},col: {
    flexDirection: "column",justifyContent: "center",color: "#fff",height: "150px"
  },error: {
    color: "red",fontSize: "12px"
  }
}));

const Header = () => {
  const classes = useStyles();

  return (
    <>
      <div className={classes.container}>
        <div className={classes.col}>.... Something goes here</div>
      </div>
    </>
  );
};

export default Header;

如何固定X轴上的滚动条和页脚的宽度（使其与页眉匹配）？

解决方法

尝试使用CSS属性溢出！

https://www.w3schools.com/cssref/pr_pos_overflow.asp

https://www.w3schools.com/cssref/css3_pr_overflow-x.asp

https://www.w3schools.com/cssref/css3_pr_overflow-y.asp

.body {
overflow-x:hidden
}

编辑：此CSS道具必须包裹整个页面

,

• makeStyles-style-7 具有固定的位置，并且左侧为零，但是您的身体有8px的空白，这就是 makeStyles-container-2 的原因 还剩下8px的边距。
• makeStyles-phantom-8 由于填充而溢出。 检查box-sizing

尝试一下：

.body {
  margin: 0px;
}
.makeStyles-phantom-8 {    
  box-sizing: border-box;
}