Html 在截面内定位，高度：100%，宽度：100%

如何正确定位“公文包”部分，使其不在“联系人”部分之后，并根据屏幕大小（就像照片背景一样）进行拉伸和收缩？？？是否可以仅使用CSS和Percanties来完成此操作？？？我尝试了许多不同的组合，但没有成功

每个部分的高度始终为100%。宽度也是如此

家
这里有一些文字

这里是一个粗略的想法：

要取消隐藏投资组合部分，请在其周围放置一个div环绕。不需要包装的CSS

对于缩放，您需要删除库宽度。也许放一个最小宽度

.gallery {
    min-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

对于公文包悬停，您还可以给它们一个百分比和最小宽度

.project {
    display: inline;
    float: left;
    height: auto;
    position: relative;
    width: 20%;
    min-width: 120px;
    margin-top: 40px;
    margin-left: 40px;
    margin-right: 20px;
}

---

这很粗糙，但是基本的想法。

我将.gallery类的宽度更改为100%，现在随着屏幕大小的减小，项目彼此重叠

我还更改了contact div的位置和底部，以便它可以位于底部

添加/更改CSS：

.gallery {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#contact{
    position: relative;
    top: 1000px;
}

---

非常感谢。当涉及到扩展时，这是一个进步，但我的投资组合部分仍然落后于联系人部分。这让我发疯：（您可能希望减小公文包项目的大小。可能会给它们一个最小和最大宽度。我看到您添加了最小和最大宽度，这大大改善了这一点。是否可以为#pagetwo height and width添加一个百分比值？灰色框架可以比公文包部分的白色容器小。只要灰色框架当我加上#pagetwo{height:50%；}时，e粘在公文包的白色部分属性我完全失去了灰色容器！？是的，添加高度：100%和显示：内联块；到#Page2谢谢你参与进来。我检查了你的小提琴，但现在公文包部分太大了，当我拉伸或收缩它时，它不符合浏览器大小（例如，与主页一样：(

.gallery {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

#contact{
    position: relative;
    top: 1000px;
}