Как растянуть элемент от хэдера до футера? (html css)

Question

Необходимо сделать так, чтобы aside элемент, который имеет свойство float: left все время был расстянут от хэдера до футера. Вне зависимости от количества контента справа от aside.

Если попробовать это осуществить с помощью сalc(100vh - ..px), то все будет нормально:

но лишь до того момента как пролистать страницу вниз:

Как можно это осуществить на примере моего кода?

<!doctype html>

<html>
  <head>
    <title> 123 </title>
      <style>
      html, body {
          height: 100%;
          margin: 0;
          padding: 0;

      }
        header {
          background-color: rgb(40,40,40);
          width: 100%;
          height: 30px
        }
        footer {
          background-color: rgb(40,40,40);
          width: 100%;
          height: 30px
        }
        #content {
          min-height: calc(100vh - 90px)
        }
        aside {
          float: left;
          height: calc(100vh - 30px);
          background-color: rgb(200,200,200);
          width: 300px;

        }
      </style>
    <meta charset='utf-8'>

  </head>


  <body>
    <header> 123</header>
    <aside> Плавающий элемент</aside>
    <div id='content'>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
      <p> ...какой-то контент...</p>
    </div>
    <footer> 456</footer>
  </body>


</html>

Answer 1

Не знаю зачем именно вы использовали float и что именно под плавающим элементом подразумевали. Но именно растянуть сайдбар можно так

<!doctype html>

<html>
  <head>
    <title> 123 </title>
      <style>
      html, body {
          height: 100%;
          margin: 0;
          padding: 0;

      }
        header {
          background-color: rgb(40,40,40);
          width: 100%;
          height: 30px
        }
        footer {
          background-color: rgb(40,40,40);
          width: 100%;
          height: 30px
        }
        #content {
          min-height: calc(100vh - 90px);
          width: 100%;
        }
        aside {
          /* float: left; 
          height: calc(100vh - 30px); */
          height: auto;
          background-color: rgb(200,200,200);
          width: 300px;
 
        }

        .container {
            display: flex;
            justify-content: space-between;
        }
      </style>
    <meta charset='utf-8'>

  </head>


  <body>
    <header> 123</header>
    <div class="container">
        <aside> Плавающий элемент</aside>
        <div id='content'>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
          <p> ...какой-то контент...</p>
        </div>
    </div>

    <footer> 456</footer>
  </body>


</html>
```

БЛОГ НА HUSL

Как растянуть элемент от хэдера до футера? (html css)

Ответы (1 шт):