时间戳

首页 > 解决方案 > 最小窗口网页设计

html - 最小窗口网页设计

问题描述

我正在通过仅使用 HTML 和 CSS 来做这个迷你项目，问题是当我处于窗口的最大尺寸时，网页设计将是正确的，但是当我将窗口屏幕最小化时，会出现巨大的空白右侧。即使我使用宽度=100vh 和高度=100vw。

标签： htmlcss

解决方案

您真的到处都在使用 100vw吗？一个较大的元素可能导致它：

<body>
  <div style="width: 150vw; background-color: yellow; height: 50px;"></div>
  <p style="background-color: blue;">This element has the normal window width. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>

或者如果你没有设置它可能会导致填充box-sizing: border-box;

<body>
  <div style="width: 100vw; background-color: yellow; height: 50px; padding-right: 150px"></div>
  <p style="background-color: blue;">This element has the normal window width. Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>

否则，我们需要了解更多细节，如 Nour-Allah Hussein 所说，最好是代码片段。

推荐阅读