Question

我有一个包含其他几个div的DIV。我需要div才能垂直向外窥视，而不是水平。

我认为使用overflow-x和overflow-y会解决这个小问题，但我只能显示x和y，或者让它们都隐藏起来。

我的CSS和HTML：

.game {
  position:absolute;
  width:400px; height:300px;
  top:100px; left:100px;
  background-color:#cccccc;

  overflow-x:hidden;
  overflow-y:visible;
}

.block1 {
  position:absolute;
  width:100px; height:100px;
  top:-50px; left:150px;
  background-color:#ffcccc;
}

.block2 {
  position:absolute;
  width:100px; height:100px;
  top:150px; left:-50px;
  background-color:#ccffcc;
}

<div class="game">
  <div class="block1"></div>
  <div class="block2"></div>
</div>

See this JSFiddle:两个子div都被截断，即使overflow-y设置为可见。

Answer 1

需要进行结构改变

如果它起作用，这就得到你想要的东西（我不知道html / css的变化是否影响你游戏的其他方面）。它通过分层“游戏”来解决它，使其垂直方向填满整个屏幕，然后你的“窗口”（灰色区域）由一个子div设置。这允许overflow: hidden水平，但不能垂直。

See fiddle.

<强> HTML

<div class="game">
    <div>
    <div class="block1"></div>
    <div class="block2"></div>
    </div>
</div>

<强> CSS

html, body { height: 100%; margin: 0;}
.game {
    position:absolute;
    width:400px; 
    height:100%;
    top: 0; 
    left:100px;
    overflow:hidden;
}
.game > div {
    position: absolute;
    top: 100px;
    height: 300px;
    width: 100%;
    background-color:#cccccc;
}

.block1 {
    position:absolute;
    width:100px; height:100px;
    top:-50px; left:150px;
    background-color:#ffcccc;
}

.block2 {
    position:absolute;
    width:100px; height:100px;
    top:150px; left:-50px;
    background-color:#ccffcc;
}

Answer 2

尝试将游戏类更改为

.game {
     width:400px; height:300px;
    top:100px; left:100px;
    background-color:#cccccc;
    overflow-x:hidden;
    overflow-y:auto;
}

谢谢， DHIRAJ

当overflow-x被隐藏时溢出-y不起作用？

2 个答案:

需要进行结构改变

See fiddle.