html - 使用固定在屏幕两侧的 div 开发 HTML 网站

Question

您好，我正在尝试使用此布局开发网站:

我的主要目标是使这个网站不可滚动并根据屏幕尺寸缩放div，因此如果我在电脑上全屏运行它并在电视上全屏运行我不希望它不成比例。

我不知道如何将这些 div 的剪辑固定到底部/顶部/侧面，但对于每个屏幕尺寸，该 div 的中间尺寸仍然相同。

这 4 个夹在侧面和底部/顶部的 div 的宽度和高度应以百分比表示，但应位于中间的这个 div 的宽度/高度应为 800x600px。

Answer 1

您可以使用 position:absolute 或 position:fixed 将这些 div 裁剪到屏幕两侧，并只给它们百分比宽度/高度。

.left {
  position: absolute;
  top: 10%;
  left: 0;
  width: 20%;
  height: 80%;
}

.right {
  position: absolute;
  top: 10%;
  right: 0;
  width: 20%;
  height: 80%;
}

.top {
  position: absolute;
  top: 0;
  left: 33%;
  width: 33%;
  height: 10%;
}

.bottom {
  position: absolute;
  bottom: 0;
  left: 24%;
  width: 50%;
  height: 20%;
}

.center {
  position: absolute;
  width: 800px;
  height: 600px;
  margin-top: -300px;
  mergin-left: -400px
}

注意:我只是对所使用的百分比值进行估计，但对于中心 div，其上边距和左边距应分别为其高度和宽度值的一半为负数。