在瘦小的视区上，HTML标记停止为全宽

2022-04-03 00:00:00 html css css-grid

我的<html>标记在瘦小的视区上停止占据全宽(即使应用的绿色背景色似乎覆盖了全宽)。这会导致我的1行1列的css网格在水平方向上不居中。在此屏幕截图中，我将鼠标悬停在<html>标记上，而视区很薄：

一旦设备变宽，<html>就会占据整个宽度，内容水平居中。

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

html,
body {
  background-color: #46d689;
  align-content: space-evenly;
  display: grid;
  justify-items: center;
  align-content: space-evenly;
  grid-template-columns: auto;
  grid-template-rows: 1fr;
}

.subtitle {
  text-align: center;
}

.container {
  display: grid;
  justify-items: center;
  align-content: space-evenly;
  grid-template-columns: repeat(1, minmax(240px, 1fr));
  grid-template-rows: 1fr;
}

<section className="container">
        <img
          alt="logo"
          style={{
            height: "250px",
            objectFit: "contain",
          }}
          src={require("./img/logo_web.png")}
        />
        <h4 style={{ color: "#FFF" }}>The Vegan Repository</h4>
        <h4
          style={{
            color: "#FFF",
            fontWeight: "400",
            marginBottom: "0",
          }}
        >
          Find Vegan Products in your Local Community
        </h4>

        <span
          style={{
            color: "#FFF",
            marginBottom: "20px",
            display: "inline-block",
          }}
        >
          Coming Soon to iOS
        </span>
        <br />
        <div>
          {/* <a href="https://itunes.apple.com/nz/app/surfboard-volcalc/id1223913734?mt=8"> */}
          <i className={"fa fa-apple fa-5x"} style={{ color: "#FFF" }}></i>
          {/* </a> */}
        </div>

        <p style={{ color: "#FFF !important" }}>
          If you have any issues, questions or suggestions, contact me directly
          at{" "}
          <span>
            <a href="mailto:bt.farquhar@gmail.com">bt.farquhar@gmail.com</a>
          </span>
        </p>
      </section>

为什么<html>标记在瘦小的视区上停止占据全宽，导致我的内容变得不居中？

解决方案

只需使用：

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

应该可以了。

相关文章