как отрегулировать в сторону высоту?

I just want aside can reach to the footer, and I set the height of as 100%, but it seems nothing happened.
мой css:

aside {
  width: 30%;
  float: right;
  background-color: #eee;
  padding: 1%;
  height: 100%;
}

моя страница похожа:

Введите описание изображения здесь

Итак, как позволить серой стороне дойти до нижнего колонтитула?

1 ответ

  1. Для оформления страницы можно использовать макет flex.
    Все на странице может быть внутри контейнера flex <div id="flex-outer">

    Этот контейнер содержит содержимое в виде 3 столбцов (верхний, нижний и Нижний колонтитулы)с помощью flex-direction: column;свойства. С height: 100vh;помощью we make the page fill the screen.

    <div id="container">Это еще один контейнер flex, который содержит содержимое и боковую панель.
    Этот контейнер должен заполнить вертикальное пространство страницы (flex-grow: 1;), чтобы нижний колонтитул оставался внизу, а боковая панель имела 100% высоту. Вы также, вероятно, хотите, чтобы боковая панель сохраняла свою ширину (flex-shrink: 0;), а содержимое заполняло остальную часть ширины (flex-grow: 1;).

    body {
      margin: 0;
    }
    
    #flex-outer {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    
    header {
      height: 150px;
      background-color: #E6E6E6;
    }
    
    #container {
      display: flex;
      background-color: pink;
      flex-grow: 1;
    }
    
    .content {
      flex-grow: 1;
    }
    
    aside {
      background-color: grey;
      width: 300px;
      flex-shrink: 0;
    }
    
    footer {
      background-color: cyan;
      height: 50px;
    }
    		
    <div id="flex-outer">
    
    	<header>This is the header</header>
    
    	<div id="container"> 
    
    		<div class="content">
    		  <p>This is the content</p>
    		</div>
    
    		<aside>
    		  <ul>
    		    <li>Categories</li>
    		    <li>Links</li>
    		    <li>etc...</li>
    		  </ul>
    		</aside>
    
    	</div>
    
    	<footer>This is the footer</footer>
    
    </div>