子div比父div宽，并且没有体水平滚动重叠，父宽= 100％

Question

我无法弄清楚如何在经过数小时的搜索和尝试后实现它。

我需要文档正文没有卷轴，既不是水平也不是真实。所以下面的CSS行可以解决这个问题：

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

其他详情：

• div#content身高+ #content { height: calc( 100% - 60px); } #footer { height: 60px; } 身高= 100％。所以我正在使用：

div#left_container

• div#center_container宽度+ div#center_container宽度= 100％ AND div#right_container宽度+ #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; } 宽度= 100％：

div#content

我需要的是100% + 300px为jQuery.animate()而不创建整个页面的水平滚动，与身体空间重叠（物理但不是眼睛）并且是＆＃ 34;可滑动＆＃34;水平使用left_container，以便在特定时刻仅显示center_container和center_container OR right_container和{{1}}。页脚中的锚点负责在两种情况之间触发动画。

我希望下图能说明我的目标：

感谢您平常的时间和帮助。

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悬停在其中的示例，以便将其视为实际操作

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这是使用classList

的另一个演示

＆＃13;

＆＃13;

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)

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果你想要幻灯片，

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

和body {overflow: hidden}

然后使用jquery

进行动画处理