是否有可能在不進行水平滾動的情況下讓子元素超過父元素的寬度達到瀏覽器的整個范圍？我已經嘗試過這里發布的解決方案有沒有辦法使用 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 關注
- 191 瀏覽
添加回答
舉報
0/150
提交
取消