身体没有覆盖整个屏幕

huangapple go评论61阅读模式
英文:

Body isn't taking cover of the whole screen

问题

在我的CSS中:

body {
    background-color: black;
    color: white;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    /* animation: scroll 5s; */
}

在这段代码之后,浏览器中的body仍然没有占满整个屏幕,检查元素时显示其具有1536417的尺寸,即使我的屏幕尺寸是19201080。

我尝试使用100vh的高度,但这样做会使相对定位的元素出现问题。

英文:

In my css:

body {
    background-color: black;
    color: white;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    padding: 0;
    /* animation: scroll 5s; */
}

After this code in the body tag, the body is still not taking up the whole screen in browser, in inspect it shows that it has 1536 * 417 dimension, even when my screen size is 1920*1080

I tried using 100vh height, but made it worse by messing up the posotion relative elements.

答案1

得分: 0

你的网站中是否导入了任何UI框架或其他CSS,可能会对其产生一些奇怪的影响?

在不知道你的最终目标是什么以及为什么要覆盖整个屏幕时,body { height: 100vh; } 或者这段代码应该可以工作:

html {
  height: 100%;
}
body {
  min-height: 100%;
}

还要确保你的浏览器窗口已经缩放到了100%。在Windows上可以使用 CTRL+0 快捷键。

英文:

Do you have any UI frameworks or other CSS imported into your site that might be doing some funny stuff to it?

Without knowing what your end goal is and why you want to cover the whole screen body { height: 100vh; } or this should work:

html {
  height: 100%;
}
body {
  min-height: 100%;
}

Also make sure you have zoomed your browser window too 100%. CTRL+0 on Windows.

答案2

得分: 0

如果您正在导入其他CSS文件,请在您的CSS文件中添加以下代码:

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

检查这个答案,然后评论您的问题是否已解决。

英文:

If you are importing any other CSS files. Then add these lines in your CSS file

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

Check this answer then comment whether your problem solved or not

huangapple
  • 本文由 发表于 2023年7月17日 18:07:06
  • 转载请务必保留本文链接:https://go.coder-hub.com/76703396.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定