高度计算不正常

Question

我有一个div，我给这个div的风格是

我的问题是

＆＃13;

＆＃13;

.scrollgrid
{
   
overflow:scroll;
overflow-x:hidden; 

height:calc(69% - (40px + 40PX));

    
}

＆＃13;

<div class="scrollgrid">12345678901223567890012345678901234578900
   123456789012235678900123456789012345789001234567890122356789001234567890123457890012345678901223567890012345678901234578900123456789012235678900123456789012345789001234567890122356789001234567890123457890012345678901223567890012345678901234578900123456789012235678900123456789012345789001234567890122356789001234567890123457890012345678901223567890012345678901234578900123456789012235678900123456789012345789001234567890122356789001234567890123457890012345678901223567890012345678901234578900123456789012235678900123456789012345789001234567890122356789001234567890123457890012123456789012235678900123456789012345789003456789012235678900123456789012345789001234567890122356789001234567890123457890012345678901223567890012345678901234578900123456789012235678900123456789012345789001234567890122356789001234567890123457890012345678901223567890012345678901234578900 </div>

＆＃13;

＆＃13;

＆＃13;

当我调整页面大小时，此div不会调整大小。 我的要求是 1.当我调整页面大小时，滚动条的末尾应该是可见的

Answer 1

你的x和你的y回到了前面。

.scrollgrid
{   
 overflow-y:hidden;
 overflow-x:scroll; 
}

Answer 2

如果body没有高度，则无法计算body的69％。{p} 加上这个：

body, html {
  height: 100%;
  padding: 0;
  margin: 0;
}

＆＃13;

＆＃13;

body,
html {
  height: 100%;
  padding: 0;
  margin: 0;
}

.scrollgrid {
  overflow: scroll;
  overflow-x: hidden;
  height: calc(69% - (40px + 40PX));
}

＆＃13;

<div class="scrollgrid">12345678901223567890012345678901234578900 123456789012235678900123456789012345789001234567890122356789001234567890123457890012345678901223567890012345678901234578900123456789012235678900123456789012345789001234567890122356789001234567890123457890012345678901223567890012345678901234578900123456789012235678900123456789012345789001234567890122356789001234567890123457890012345678901223567890012345678901234578900123456789012235678900123456789012345789001234567890122356789001234567890123457890012345678901223567890012345678901234578900123456789012235678900123456789012345789001234567890122356789001234567890123457890012123456789012235678900123456789012345789003456789012235678900123456789012345789001234567890122356789001234567890123457890012345678901223567890012345678901234578900123456789012235678900123456789012345789001234567890122356789001234567890123457890012345678901223567890012345678901234578900</div>

＆＃13;

＆＃13;

＆＃13;