CODEWITHSUNDEEP
csshtml
avirk
avirk

Reputation: 3086

Overflow-y is not working for html5

I'm trying to create a partial view for my home work and I have approximately done that, but there is one issue that is annoying me: Overflow-Y is not working in any case. I tried to set the height of my DIV tag in % and also in PX but in both cases it doesn't work.

I want to add the scroll option when content overflows the height of the nested DIV tag. 

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

But this is not working at all, I even tried to set the height in PX. The height of DIV increase as content is added to the body.

Upvotes: 1

Views: 80

Answers (1)

maowtm
maowtm

Reputation: 2012

table-cell don't seems to support overflow, so you need to add a child and set its height ( and set its 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>

Upvotes: 4

Related Questions