CSS問題子層突破父層寬度

css

onyoe1120 2021-08-27 12:23:35 ‧ 2737 瀏覽

分享至

小弟想請問一下
最近在切板時碰到一個問題
就是我已經再父層限制寬度是1000px了
但我裡面的內容有一塊的背景想做滿版(超過1000px)的話
CSS應該怎麼下比較好?

https://codepen.io/lai777/pen/abwOYZm

紅色區域想要突破黑色區域的寬度限制

這問題感覺有點基礎但突然卡住了還請各位指點一下

希望呈現的樣子

窮嘶發發發 iT邦高手 1 級 ‧ 2021-08-27 13:43:13 檢舉

.content{
width:1000px;
height:500px;
background:#000;
margin:0 auto;
position: relative;
}

.box1{
width:100%;
height:100px;
}

.box2{
width:1920px;
height:100px;
background:red;
position: absolute;
left:-50%;
}
給樓主參考，效果圖放樓下一樓一號沙發

onyoe1120 iT邦新手 5 級 ‧ 2021-08-27 13:50:33 檢舉

已成功感謝各位

窮嘶發發發 iT邦高手 1 級 ‧ 2021-08-27 14:25:44 檢舉

box2 必須指定寬度喔
二樓的答案用的單位不錯，一般要滿版最好用 VW 單位，用螢幕寬度最好
還有你要讓子物件超出父物件，而不撐爆父物件，就兩種方法，一種就是拉出來，一種讓他透明化，大概就是這兩種而已

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

4 個回答

通靈亡

iT邦高手 1 級 ‧ 2021-08-27 13:48:40

最佳解答

不用定位的方式：使用 margin-left: 50% + transform: translateX(-50%);

.box2{
  width: 100vw;
  
  margin-left: 50%;
  transform: translateX(-50%);
  
  height:100px;
  background:red;
}

https://codepen.io/ted59438/pen/MWowVLe

回應 1
分享
檢舉

onyoe1120 iT邦新手 5 級 ‧ 2021-08-27 13:59:28 檢舉

感謝您用這個方法達到我要的效果了

登入發表回應

janlin002

iT邦好手 1 級 ‧ 2021-08-27 13:30:04

把width:100%關掉(註解部分)，換成其他數字(但需要超過1000px)

回應 1
分享
檢舉

窮嘶發發發 iT邦高手 1 級 ‧ 2021-08-27 13:46:22 檢舉

這種效果 ?

登入發表回應

froce

iT邦大師 1 級 ‧ 2021-08-27 14:40:29

.box2{
  width:100vw;
  height:100px;
  background:red;
  left: 0;
  position: absolute
}

回應
分享
檢舉

登入發表回應

miku3920

iT邦新手 2 級 ‧ 2021-08-27 15:26:05

.box2 {
/*   width: 100%; */
  margin: 0px -50px;
  max-width:1920px;
  height:100px;
  background:red;
}

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1064 組

團體組數

40 組

累計文章數

22121 篇

完賽人數

594 人

15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙