子div比父div寬，並且在不進行正文水平滾動的情況下將其重疊，父級寬度= 100％

Question

經過數小時的搜索和嘗試，我無法弄清楚如何實現它。

我需要文檔主體沒有水平或垂直滾動​​。 因此，以下CSS行可以解決問題：

body
{
height:100%;
width:100%;
}

body標簽的標記為：

<div id="content">
    <div id="left_container"></div>
    <div id="center_container"></div>
    <div id="right_container"></div>    
</div>
<div id="footer">
    <a href="javascript:void(0);">
         move to left
    </a>
    <a href="javascript:void(0);" >
         move to right
    </a>
</div>

額外細節：

• div#footer height + div#content height = 100％。 所以我正在使用：

 #content { height: calc( 100% - 60px); } #footer { height: 60px; } 

• div#left_container寬度+ div#center_container寬度= 100％ AND div#center_container寬度+ div#right_container div#center_container寬度= 100％：

 #left_container { width:300px; height:100%; float:left; } #right_container { width:300px; height:100%; float:left; } #center_container { width: calc(100% - 300px); height:100%; float:left; } 

我需要的是div#content為100% + 300px而不創建整個頁面的水平滾動，重疊（物理上但不眼睛）身體空間，並使用jQuery.animate()水平“滑動” jQuery.animate()以便它允許只顯示left_container和center_container OR center_container和right_container在給定時刻。 頁腳中的錨點負責觸發兩種情況之間的動畫。

我希望下圖說明了我的目標：

感謝您平時的時間和幫助。

Answer 1

正如@Paulie_D所說的，您可以使用隱藏的溢出

html {
  box-sizing: border-box;
  height:100vh;
  width:100vw;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body
{
  height:100%;
  width:100%;
  margin: 0;
  overflow:hidden
}

這是一個演示懸停在id #content上的演示，可以在操作中看到它

 html { box-sizing: border-box; height:100vh; width:100vw; } *, *:before, *:after { box-sizing: inherit; } body { height:100%; width:100%; margin: 0; overflow:hidden } html { box-sizing: border-box; height:100vh; width:100vw; } *, *:before, *:after { box-sizing: inherit; } body { height:100%; width:100%; overflow:hidden } #left_container{ background: #8DF5F5 } #center_container { width: calc(100vw - 300px); background: #99D9EA } #right_container { background: #7092BE; } #content { position:relative; width: calc(100% + 300px); height: calc( 100% - 60px); transition: transform 1s } #content:hover{ transform:translateX(-300px) } #left_container,#right_container { width:300px; } #left_container,#right_container,#center_container { height:100%; float:left; } #footer { height: 60px; } 

 <div id="content"> <div id="left_container"></div> <div id="center_container"></div> <div id="right_container"></div> </div> <div id="footer"> <a href="javascript:void(0);"> move to left </a> <a href="javascript:void(0);" > move to right </a> </div> 

這是另一個使用classList的演示

 var content, slideLeft, slideRight; function addClassToContent(){ content.classList.add("activated") } function removeClassToContent(){ content.classList.remove("activated") } content = document.querySelector("#content"); slideLeft = document.querySelector(".slideLeft"); slideRight = document.querySelector(".slideRight"); slideLeft.addEventListener("click", addClassToContent,false); slideRight.addEventListener("click", removeClassToContent,false) 

 html { box-sizing: border-box; height:100vh; width:100vw; } *, *:before, *:after { box-sizing: inherit; } body { height:100%; width:100%; margin: 0; overflow:hidden } html { box-sizing: border-box; height:100vh; width:100vw; } *, *:before, *:after { box-sizing: inherit; } body { height:100%; width:100%; overflow:hidden } #left_container{ background: #8DF5F5 } #center_container { width: calc(100vw - 300px); background: #99D9EA } #right_container { background: #7092BE; } #content { position:relative; width: calc(100% + 300px); height: calc( 100% - 60px); transition: transform 1s } #content.activated{ transform:translateX(-300px) } #left_container,#right_container { width:300px; } #left_container,#right_container,#center_container { height:100%; float:left; } #footer { height: 60px; } 

 <div id=content> <div id=left_container></div> <div id=center_container></div> <div id=right_container></div> </div> <div id=footer> <a class=slideLeft> move to left </a> <a class=slideRight > move to right </a> </div> 

Answer 2

如果你想滑，

設置#content { width: calc(100% + 300px)}

和body {overflow: hidden}

然后使用jQuery制作動畫