是否有可能使子元素在不进行水平滚动的情况下超过父元素的宽度达到浏览器的整个范围?
我已经尝试过这里发布的解决方案Is there are way to make a child DIV's width wider than the parent DIV using CSS?
但是对于这种特殊的HTML(请参阅下文),只有一种可以工作并且可以创建水平滚动条(在代码段中看到的多余宽度和下面的图像导致滚动条出现)
*我总是可以在overflow-x: hidden;
中添加一个<body>
,但我不想这样做
<div class="main">
<div class="container">
<div class="fit">
something 1
</div>
<div class="parent">
<header class="full full5">
child full5
</header>
</div>
<div class="fit">
something 2
</div>
</div>
</div>
body: {
margin: 0px;
}
.main {
display: flex;
flex-direction: column;
align-items: center;
background: #e8e8e8;
border: 1px solid #000;
margin: 0px;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
max-width: 300px;
width: 100%;
}
.parent {
display: flex;
/* flex-direction: column; */
width: 100%;
background-color: #e9cccc;
box-sizing: border-box;
position: sticky;
top: 0;
}
.fit {
height: 50px;
}
.full {
background-color: #d1ccd8a6;
border: 1px solid #666;
border-radius: 3px;
height: 50px;
padding: 0px;
box-sizing: border-box;
}
.full5 {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
body: {
margin: 0px;
}
.main {
display: flex;
flex-direction: column;
align-items: center;
background: #e8e8e8;
border: 1px solid #000;
margin: 0px;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
max-width: 300px;
width: 100%;
}
.parent {
display: flex;
/* flex-direction: column; */
width: 100%;
background-color: #e9cccc;
box-sizing: border-box;
position: sticky;
top: 0;
}
.fit {
height: 50px;
}
.full {
background-color: #d1ccd8a6;
border: 1px solid #666;
border-radius: 3px;
height: 50px;
padding: 0px;
box-sizing: border-box;
}
.full1 {
position: absolute;
width: 100%;
left: 0px;
top: 0px;
}
.full2 {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
}
.full3 {
position: relative;
width: 200%;
left: -50%;
}
.full4 {
margin-left: calc(-50vw + 50%);
width: 100vw;
}
.full5 {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.full6 {
margin-left: calc(-50vw + 50%);
width: 100vw;
}
.hide {
display: none;
}
<div class="main">
<div class="container">
<div class="fit">
something 1
</div>
<div class="parent">
<header class="full full1 hide">
child full1
</header>
<header class="full full2 hide ">
child full2
</header>
<header class="full full3 hide">
child full3
</header>
<header class="full full4 hide">
child full4
</header>
<header class="full full5">
child full5
</header>
<header class="full full6 hide">
child full6
</header>
</div>
<div class="fit">
something 2
</div>
</div>
</div>
您可以在CSS代码中使用z-index来取代父级并填充颜色以推送背景
这是您想要的吗?
我刚刚更改了.main
,.parent
和.full-5
的CSS]
body: { margin: 0px; } .main { display: flex; flex-direction: column; align-items: center; background: #e8e8e8; border: 1px solid #000; margin: 0px; box-sizing: border-box; position: relative; } .container { display: flex; flex-direction: column; max-width: 300px; width: 100%; } .parent { display: flex; /* flex-direction: column; */ width: 100%; background-color: #e9cccc; box-sizing: border-box; top: 0; height: 50px; } .fit { height: 50px; } .full { background-color: #d1ccd8a6; border: 1px solid #666; border-radius: 3px; height: 50px; padding: 0px; box-sizing: border-box; } .full1 { position: absolute; width: 100%; left: 0px; top: 0px; } .full2 { width: 100vw; position: relative; left: calc(-50vw + 50%); } .full3 { position: relative; width: 200%; left: -50%; } .full4 { margin-left: calc(-50vw + 50%); width: 100vw; } .full5 { position: absolute; left: 0; right: 0; } .full6 { margin-left: calc(-50vw + 50%); width: 100vw; } .hide { display: none; }
<div class="main"> <div class="container"> <div class="fit"> something 1 </div> <div class="parent"> <header class="full full1 hide"> child full1 </header> <header class="full full2 hide "> child full2 </header> <header class="full full3 hide"> child full3 </header> <header class="full full4 hide"> child full4 </header> <header class="full full5"> child full5 </header> <header class="full full6 hide"> child full6 </header> </div> <div class="fit"> something 2 </div> </div> </div>
您在这里(全屏查看以进行可视化):