在瘦小的视区上，HTML标记停止为全宽 [英] html tag stops being full width on skinny viewports
本文介绍了在瘦小的视区上，HTML标记停止为全宽的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的<html>标记在瘦小的视区上停止占据全宽(即使应用的绿色背景色似乎覆盖了全宽)。这会导致我的1行1列的css网格在水平方向上不居中。在此屏幕截图中，我将鼠标悬停在<html>标记上，而视区很薄：
一旦设备变宽，<html>就会占据整个宽度，内容水平居中。
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;
}
应该可以了。
这篇关于在瘦小的视区上，HTML标记停止为全宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
