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>

溢出-y不适用于html5

1 个答案: