网页在移动设备上没有填满整个屏幕

Question

[![enter image description here][1]][1]当我在手机上查看html文件时，网页只占我屏幕的四分之一左右。其余的只是空白。我一直在尝试在整个网络上查找内容，以了解如何解决此问题，但未能解决。有谁知道发生了什么以及我该如何解决这个问题？

    
*{
  padding:0;
  margin:0;
  
  --red-accent-color:rgb(204, 0, 0);
  --blue-accent-color:rgb(26, 117, 255);
  --dark-blue-accent-color:rgb(36, 36, 143);
  --white-accent-color:rgb(242, 242, 242);
  --default-font-family: calibri;
}
body{
  height:100%;
  width:100%;
}
nav{
  color:var(--white-accent-color);
  background-color:var(--dark-blue-accent-color);
  display: flex;
  flex-direction:row;
  justify-content:left;
  padding: 10px 0px 10px 0px; 
  animation:fade-in 0.5s forwards;
}



#nav-content-list li{
  margin:0px 0px 0px 50px;
  cursor:pointer;
}

#nav-content-list li a{
  color:var(--white-accent-color);

main{
  color:var(--white-accent-color);
  background-image:url("https://capitalplus.com/wp-content/uploads/2019/07/Interior-Design.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size:cover;
  font-family:var(--default-font-family);
  position:relative;
  height:650px;
  z-index:1;
}


main::before{ 
  background-color:var(--blue-accent-color);
  opacity:0.5;
  content: '';
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index:-1;
  filter:blur(10px);

}

footer{
  background-color:gray;
}

[1]：https://i.stack.imgur.com/chPZg.jpg

Answer 1

html 和 body 元素的高度完全由它们的内容决定。

所以，正如你所注意到的，

body{
  height:100%;
  width:100%;
}

不会填满整个屏幕。

要覆盖它，添加

min-height: 100vh;

到 body 样式。 要验证这是否有效，只需将 body 的 background-color 设置为与白色可区分的颜色。

---

但这并不能保证填充页面的实际内容。为此，您可能需要考虑使用 display: flex; 或 display: grid;。

您可以使用 flex 来使 main 填充 body 的其余空间，但未被 nav 和 footer 占据。

这是一个最小的例子：

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

:root {
    --blue-accent-color: rgb(26, 117, 255);
}

html {
  width: 100%,
  height: 100%;
}

body {
  width: 100%,
  height: 100%;
  min-height: 100vh;

    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

/* --- */

nav {
    width: 100%;
    height: auto;
    
    background-color: var(--blue-accent-color);
}

main {
    width: 100%;
    height: auto;
    
    flex-basis: 100%;
    flex-grow: 1;
    flex-shrink: 0;
}

footer {
    width: 100%;
    height: auto;
    
    background-color: gray;
}

<nav>
  <p>NAV</p>
</nav>
<main>
  <p>MAIN</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</main>
<footer>
  <p>FOOTER</p>
</footer>