溢出y不適用於html5

Question

我想爲我的家庭作品創建一個局部視圖，並且我已經大致完成了該操作，但有一個問題令我煩惱：Overflow-Y在任何情況下都不起作用。我試圖設置我的DIV標籤的高度爲%和PX，但在兩種情況下都不起作用。

我想在內容溢出嵌套的DIV標記的高度時添加滾動選項。

<div id="MainDIV" style="height:100%;width:100%;"> 
    <div id="Header" style="width:100%;height:30px;text-align:center;background-color:#0094ff;padding:20px 0;font-size:25px">Welcome To my web site</div> 

    <div id="SideMenu" style="width:20%;background-color:#4cfbf6;display:table-cell;overflow-y:auto">Side Menu</div> 
    <div id="Content" style="width:80%;height:70%;background-color:orange;display:table-cell;padding:5px 10px;font-size:18px;overflow-y:auto">@RenderBody()</div>  

    <div id="Footer" style="width:100%;height:20px;background-color:#4cff00;text-align:center; padding:5px 0 ">Copyright © Someone Who developed it</div> 
</div> 

但是這根本不起作用，我甚至試圖在PX中設置高度。隨着內容被添加到身體，DIV的高度增加。

Answer 1

table-cell似乎不支持overflow，所以你需要添加一個孩子並設置其高度（並設置它的高度爲overflow-y）。

<div id="MainDIV" style="height:100%;width:100%;"> 
 
    <div id="Header" style="width:100%;height:30px;text-align:center;background-color:#0094ff;padding:20px 0;font-size:25px">Welcome To my web site</div> 
 
    <div id="SideMenu" style="width:20%;background-color:#4cfbf6;display:table-cell;overflow-y:auto">Side Menu</div> 
 
    <div id="Content" style="width:80%;background-color:orange;display:table-cell;padding:5px 10px;font-size:18px;"> 
 
    <div style="height:200px;overflow-y:auto;">@RenderBody() -> "xxxxxxxxxxxxxxxxxxxxxxxxxxxx 
 
     <br>xxxxxxxxxxxxxxxxxxxxxx 
 
     <br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
 
     <br>xxxxxxxxxxxxxxxxxxxxxx 
 
     <br>xxxxxxxxxxxxxx 
 
     <br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
 
     <br>xxxxxxxxxxxxxxxxxxxx 
 
     <br>xxxxxxxxxxxxxxx 
 
     <br>xxxxxxxxxxxxxxxxxxx 
 
     <br>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
 
     <br>xxxxxxxxx"</div> 
 
    </div> 
 
    <div id="Footer" style="width:100%;height:20px;background-color:#4cff00;text-align:center; padding:5px 0 ">Copyright © Someone Who developed it</div> 
 
</div>