Make div child occupy 100% of div parent even when hiding their sidebar

Question

how is it possible to define a child div occupy 100 % of the parent div?

I want to do a layout with a sidebar and I want to set my main to occupy 100% of what is left over by taking width from the sidebar

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

The idea is that the div with Hello occupies 100% of the screen, and even though I use a function in js to hide the sidebar it continues with 100% also it is necessary to leave the height 100%

Does the sidenav width change in an dynamic and unpredictable way? If this doesn't happen, then you can update `margin-left` in `.main` when the sidenav is closed — Christian Vincenzo Traina, Aug 04 '18 at 21:59

score 0 · Answer 1 · answered Aug 04 '18 at 21:53

0

The css calc function works great for this purpose. Add this

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

answered Aug 04 '18 at 21:53

JFugger_jr

313
1
4
13

I want it to stay 100% with respect to its width and heigth – Emiry Mirella Aug 04 '18 at 21:55

Make div child occupy 100% of div parent even when hiding their sidebar

1 Answers1