是否有可能在不进行水平滚动的情况下让子元素超过父元素的宽度达到浏览器的整个范围？我已经尝试过这里发布的解决方案有没有办法使用 CSS 使子 DIV 的宽度比父 DIV 更宽？但是对于这个特定的 HTML（见下文），只有一个可以工作并创建水平滚动条（代码片段和下面的图像中看到的额外宽度导致滚动条出现）*我总是可以添加一个overflow-x: hidden;，<body>但我不想这样做编辑：有一些 css 属性，即使在示例中没有意义，它们也应该保留在解决方案中（如果有） <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:0发布的解决方案有效，除非有垂直滚动条（什么时候没有？）
3 回答
慕码人2483693
TA贡献1860条经验 获得超9个赞
在这里（全屏查看以进行可视化）：
body {
margin: 0;
}
.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>
SMILET
TA贡献1796条经验 获得超4个赞
这是你想要的吗？
我刚刚更改了您的 CSS .main，.parent并且.full-5
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>
- 3 回答
- 0 关注
- 113 浏览
添加回答
举报
0/150
提交
取消