The height of iview cannot be full after it is introduced into sider.

sider height in iview

layout component is introduced into iview for layout, and top-side layout

is selected.
<template>
  <div class="layout">
    <layout>
      <Header>
        <liwei-header></liwei-header>
      </Header>
      <layout>
        <Sider>
          <liwei-sider></liwei-sider>
        </Sider>
        <Layout>
          <Content>
            Content
          </Content>
        </Layout>
      </layout>
    </layout>
  </div>
</template>

results
the left column can not fill the screen. I found a link on the Internet to describe , but the whole left column is missing except after that, because he uses absolute positioning.

Please help me to see how to deal with this problem gracefully. Thank you ~

Mar.28,2021

sets the minimum height of content to fill the screen.


find a link description can be solved, thank you ~


easy, can define the height as 100vh in the parent container, for example

-sharpapp {
  ......
  height: 100vh;
}
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3eae1-2c45e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3eae1-2c45e.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?