Html 网页与屏幕大小不符

我一直在制作一个网页（），在我的一个屏幕上，看起来我想要它。屏幕大小为1920 X 1080。然而，在较小的屏幕上，它看起来不同。如何调整我的网页，使其在所有屏幕大小上看起来和感觉都一样

我在互联网上四处寻找，发现一些地方说这不太可能，而其他人只是说这需要很多才能做到。我想得到一些帮助和什么工作的意见

---

谢谢你

首先，你的页面在所有分辨率下都很好。你需要学习如何制作响应性布局，这些布局将根据屏幕的每个分辨率进行调整

尝试使用百分比和

display:table

，除非

display:block

（最好在图像中使用block）

你的文字：

10月15日星期三下午7:00开始，下午6:00供应辣椒

正在破坏布局，因为它超过了mainContent Div的高度，如果将mainContent Div的高度更改为50%，并向其中添加

display:table

，则布局将不再破坏

对于分辨率为1366x768或更小的屏幕，您的图像太大，请尝试使用百分比定义图像的高度，这将使您的图像始终以理想的尺寸显示，以便加载屏幕

您有三个主分区：

header

、

mainContent

和

footer

，并且您希望在不显示滚动条的情况下显示整个站点。好的，如果您有三个主分区，并且它们是站点，请设置分区的高度，以便它们是互补的，并且不超过站点的限制，例如：

header: height: 10%
mainContent: height: 60%
header: height: 30%

---

这不是拯救你生命的代码，而是网站布局新愿景的开始。：）

我试过一些；然而，我的身高百分比有问题。通常，当我试图将我的身高设置为百分比时，它们不起作用，或者不可见。想知道为什么吗？你可以试着把你的三个div放在另一个div中，并将这个div设置为主div：尝试定义

显示：table

，宽度：100%和

高度：100%

，试一试！等待我会和Chrome inspector一起尝试。我会在我能回到笔记本电脑的时候尝试，如果你能用Chrome inspector想出什么好主意的话。谢谢