html - 只有主 div 带有 overflow hidden

Question

我是 CSS 的新手，目前我正在尝试了解更多有关它的信息。我的想法是创建其中一个“一页”网站。我创建了一个带有 overflow hidden 的主容器。但是，我想在主容器内创建更多可以滚动的 div。在底部，我将给出我编写的代码的运行示例。

如果有人可以帮助我或至少给我一些解决此问题的建议，我将非常感激。

提前谢谢你。

var PageOne = $(".PageOne").offset().top;
var PageTwo = $(".PageTwo").offset().top;

$(".Link1").click(function() {
    $('.Container').animate({
        scrollTop: PageOne},
        'slow');
});

$(".Link2").click(function() {
    $('.Container').animate({
        scrollTop: PageTwo},
        'slow');
});

body{
  margin:0;
  padding:0;
}

.Nav{
  position:relative;
  width:10%;
  height:100vh;
  background-color:red;
  float:left;
}

.Link1, .Link2{
  position:relative;
  margin-bottom:2vw;
  color:#FFF;
  font-size:3vw;
  text-align:center;
}

.Container{
  position:relative;
  width:90%;
  height:100vh;
  overflow:hidden;
  background-color:green;
  float:left;
}

.PageOne{
  position:relative;
  width:100%;
  height:100vh;
  background-color:gold;
}

.PageTwo{
  position:relative;
  width:100%;
  min-height:100vh;
  background-color:purple;
  overflow:scroll;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Nav">
  <div class="Link1">
    Page 1
  </div>
  <div class="Link2">
    Page 2
  </div>
</div>

<div class="Container">
  <div class="PageOne">
    Page One
  </div>
  <div class="PageTwo">
    Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>Page Two<br>
  </div>
</div>

Answer 1

我明白你想在这里做什么。我使用 html、css 和 javascript 做了类似的事情，但是我没有使用容器，而是使用下面的代码简单地制作了一个 Accordion 。

 <link rel="stylesheet" href="/resources/demos/style.css">
 <script>
$(function() {
$( "#accordion" ).accordion({
  collapsible: true,
  active: false,
  heightStyle: "content"
  });
});
</script>

<div id="accordion"> 
  <h2>Heading atop accordion</h2>  
  <div>
     <p>page info inside of div</p>
  </div>
</div>

这给出了非常相似的效果。但是，如果您计划使容器内的页面可滚动，请尝试调整第二页的 div 尺寸。您可以通过扩展 div 的高度来做到这一点。通常这可以在 html 中完成 <div style="height:500px;"></div> .此外，您还可以在 CSS 中设置页面高度的格式。

还有一些方法可以使您的页面在本网站上显示为可滚动的here