Question

我有一个非常简单的问题，但我无法解决它。

另一个div里面有一个div。内部div完全位于外部div之外（左：100％）。此外，外部div应垂直滚动。但是，我找不到如何不水平滚动以及如何使内部div在外部div之外可见，同时。

代码如下：

HTML：

<div id="out">
   <div id="in">
   </div>
</div>

CSS：

#out{
  height:100px;
  width:100px;
  background-color: green;
  position: relative;
  overflow-y: scroll;
  overflow-x: visible;
}

#in{
  position: absolute;
  left: 100%;
  height:50px;
  width:50px;
  background-color: red;
}

提前致谢！

Answer 1

修复了滚动并移除了overflow-x:hidden;

================最新变化======================

如果这是必需的，请查看最新的更改，但在标记方面稍作调整。

＆＃13;

#outer-div {
  overflow-y: scroll;
  width: 165px;    
}
#out{
  height:100px;
  width:100px;
  background-color: green;
  position: relative;
}

#in{
  position: absolute;
  left: 100%;
  height:50px;
  width:50px;
  background-color: red;
}

＆＃13;

<div id="outer-div">
  <div id="out">
   <div id="in">
   </div>
  </div>
</div>

＆＃13;

Answer 2

＆＃13;

.main_outer{
  overflow-y:scroll;
  border:thin black solid;
overflow-x:hidden;
}

#out{
  height:100px;
  width:100px;
  background-color: green;
  position: relative;
}

#in{
  position: absolute;
  left:100%;
  width:70px;
  height:auto;
  background-color: red;
  right:0;
}

＆＃13;

<div class="main_outer">
<div id="out">
<div id="in">
   Your Inner Contents
   Your Inner Contents
   Your Inner Contents
 
   </div>
   </div>
</div>

＆＃13;

这是JSFiddle

PS：更改红色div大小以适合您的内容。

希望这有帮助。

不需要的水平滚动

2 个答案: