隠されているメインのdivのみがオーバーフローします

Question

私はCSSを初めて使用しています。その時点で私は詳細を知ろうとしています。私の考えは、これらの「1ページ」のウェブサイトの1つを作成することでした。私は隠されたオーバーフローのメインコンテナを作成しました。しかし、メインコンテナの内部にスクロール可能な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を使用して同様のことをしましたが、コンテナを使用する代わりに、以下のコードを使用してアコーディオンを作成しました。

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

これは非常に似た効果をもたらします。ただし、コンテナ内のページをスクロール可能にする予定がある場合は、2ページ目のdivのディメンションを調整してみてください。 divの高さを伸ばすことでこれを行うことができます。通常これはhtmlの<div style="height:500px;"></div>で行うことができます。また、CSSでページの高さを2つにフォーマットすることもできます。

はまた、あなたのページは、このウェブサイトを正確にあなたが抱えている問題は何here