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