背景未填满

Question

class Landing extends Component {
  state = {
    box: {
      width: "300px",
      height: "100px",
      margin: "0 auto",
      border: "1px solid blue",
      textAlign: "center",
      verticalAlign: "middle",
      lineHeight: "90px",
      backgroundColor: "white",
    },

    body: {
      backgroundColor: "red",
    },
  };

  render() {
    return (
      <div style={this.state.body}>
        <div style={this.state.box}>Hello</div>
      </div>
    );
  }
}

我想要的是 body 的背景是红色的，中间有一个框，框是白色背景，里面有文字。

发生的情况是页面的背景没有填满，而只是其中的一部分。背景只有在框的那一行是红色的。

请帮忙

Answer 1

您希望 box 居中在屏幕的中间。

因此您需要 body 来填充屏幕并使其子项居中（例如 flex）。

const parentStyle = {
  backgroundColor: `red`,
  height: `100vh`,
  width: `100vw`,
  display: `flex`,
  alignItems: `center`,
  justifyItems: `center`,
};

Answer 2

要使红框填满整个屏幕，您必须放置一些 css 以确保红框周围元素的高度为 100%：

html,
body,
#root {
  height: 100%;
  margin: 0;
}

边缘是为了让红色框周围没有小的白色区域

背景未填满

Background not filling up

css

background-color

reactjs