登录
首页 >  文章 >  前端

HTML中如何实现子容器高度等于父容器高度，且宽度超出父容器并占满整个窗口？

时间：2024-11-28 16:27:59 415浏览 收藏

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《HTML中如何实现子容器高度等于父容器高度，且宽度超出父容器并占满整个窗口？》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

HTML中如何实现子容器高度等于父容器高度，且宽度超出父容器并占满整个窗口？

html中实现特殊布局需求

在网页布局中，有时会遇到一些奇葩的需求。例如，现在有人要求实现如下效果：

需求：

<box-1> 容器中，<box-2> 的高度等于<box-1> 的高度，<box-2>的宽度要超出<box-1> 并占满整个窗口（<body>）。

不改变 html 结构的前提下，如何实现？

解法：

一种实现方法如下：

&lt;body&gt;
  &lt;div class="box-1 container py-5"&gt;
    &lt;div class="box-2"&gt;&lt;/div&gt;
    &lt;div class="box-3"&gt;
      111 &lt;br&gt;
      111 &lt;br&gt;
      111 &lt;br&gt;
      111 &lt;br&gt;
      111 &lt;br&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/body&gt;
body {
  margin: 0;
}

.container {
  position: relative;
}

.box-2 {
  width: 100vw;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
}

解释：

  • 将<box- 1> 设置为position: relative，这样<box-2> 可以绝对定位在其内部。
  • 将 <box-2> 设置为 width: 100vw 和 height: 100% 以使其占满整个窗口。
  • 使用 position: absolute 将 <box-2> 定位在 <box-1> 的左上角，并使用 transform: translatex(-50%) 将其居中。

补充：

如果已定义了.container 的最大宽度，则需要对 css 进行相应调整：

.container {
  max-width: 1000px;
  padding: 0 5em;
  margin: 0 auto;
}

... 其他 CSS 规则保持不变 ...

终于介绍完啦！小伙伴们，这篇关于《HTML中如何实现子容器高度等于父容器高度，且宽度超出父容器并占满整个窗口？》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>