html中实现特殊布局需求
在网页布局中，有时会遇到一些奇葩的需求。例如，现在有人要求实现如下效果：
需求：
<box-1> 容器中，<box-2> 的高度等于<box-1> 的高度，<box-2>的宽度要超出<box-1> 并占满整个窗口（<body>）。
立即学习“前端免费学习笔记（深入）”；
不改变 html 结构的前提下，如何实现？
解法：
一种实现方法如下：
<body>
<div class="box-1 container py-5">
<div class="box-2"></div>
<div class="box-3">
111 <br>
111 <br>
111 <br>
111 <br>
111 <br>
</div>
</div>
</body>body {
margin: 0;
}
.container {
position: relative;
}
.box-2 {
width: 100vw;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
}解释：
补充：
如果已定义了.container 的最大宽度，则需要对 css 进行相应调整：
.container {
max-width: 1000px;
padding: 0 5em;
margin: 0 auto;
}
... 其他 CSS 规则保持不变 ...以上就是HTML中如何实现子容器高度等于父容器高度，且宽度超出父容器并占满整个窗口？的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
726
收藏
