即使隐藏侧边栏，也让div孩子占据div父对象的100％

Question

如何定义子div占父div的100％？

我想使用侧边栏进行布局，并且我想通过从侧边栏获取宽度来设置我的主体以占据剩余部分的100％

.bodySection {
  height: 100%;
  width: 100%;
  overflow: auto; 
}

.sidenav { 
  top: 0;
  bottom: 0;
  left: 0;

  position: absolute;
  overflow: hidden;
  z-index: 5;
  background: rgb(250, 250, 250);
  width: 230px;
  padding-top: 55px;
  box-shadow: 1px 1px 1px 1px rgba(0.2, 0.2, 0.2, 0.2);
}

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 15px;
  color: #636363;
  display: block;
  background: rgb(247, 247, 247);
  
}

.sidenav a:hover {
    background: rgb(241, 241, 241);
}

.main {
  margin-left: 230px;
  background: rgb(187, 187, 187);
  /* Same as the width of the sidenav */
  padding: 0px;

<section class="bodySection">

  <div class="sidenav">

    <a href="#about">About</a>
    <a href="#services">Services</a>
    <a href="#clients">Clients</a>
    <a href="#contact">Contact</a>

  </div>

  <div class="main">
    Hello
  </div>

</section>

这个想法是带有Hello的div占据了屏幕的100％，即使我在js中使用一个函数来隐藏侧边栏，它也会继续以100％的比例显示 还有必要将高度保持在100％

Answer 1

css calc函数可很好地实现此目的。添加

.main{
width: calc(100% - 230px);
}