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 ~

Iview

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;
}

Previous: How to use the vee-validate numerical range of the form validation plug-in?

Next: How do I make all floating child elements equal to the longest child elements after clearing floats?

Iview uses render to render RadioGroup in table and its rendered components cannot be selected?
the Radio component rendered by rander rendering RadioGroup in the table component of iview cannot be selected render: (h, params) => { return h( RadioGroup , { props: { value: this.resData.method1, type: &quo...

Render iview

Feb.26,2021
Ask how to write slot in the render function of iview.
version: "version ": "1.1.4 ", problem description: in the table header, if you want to add the Tooltip component, if the Tooltip component does not use the slot slot, it will display normally, but when the content to be displayed is too much, using ...

Vue.js iview

Feb.26,2021
The problem of using the menu bar of iview frame in vue
as shown in the figure, I used the menu bar component of ivew in vue figure 1. I selected the content on the right side of the login log to display the contents of the login log, which is normal . then I set up a @ click route on the account profile d...

Iview vue.js

Feb.26,2021
Ref cannot be registered through the render function in iview
...

Iview render

Feb.26,2021
How can the render function implement Modal, add parameters to it? For example, add style to Modal.
The Modal of iView uses the render function to display Modal. Here you can have the parameters of the sub-block Input : methods: { handleRender () { this.$Modal.confirm({ render: (h) => { ...

Vue.js iview

Feb.27,2021
How does the Submenu option in the navigation menu component of iview bind events that click on the title?
as shown in figure 1, the on-select event of iview s navigation menu is useful only if the drop-down suboption is selected. but what I need now is to trigger my custom click event when I click on the title "my assets ", such as @ click= "capital " ...

Iview vue.js

Feb.28,2021
How do I bind a click event to an item in a row using the iview table component in vue?
-sharp columns render Vue Render render h rowcolumn index as shown in the figure, I used the table component of iview in the vue project. Now the requirement is to click on the details of each row in the table to trigger the business logic ex...

Vue.js iview javascript

Feb.28,2021
For the `Select'of iView, how to set which one is selected by default?
when using iView s Select selector , there is no default choice. How to solve this problem? ...

Iview

Feb.28,2021
After the version of iview is updated to 2.9.0, the submenu of the navigation menu cannot add click events.
after the iview version is updated to 2.9.0, the submenu of the navigation menu cannot add click events ...

Iview

Feb.28,2021
Date-picker problem of iview
have you ever used the date-picker element of iview that can be displayed, but when you click to select a date, you report an error and the date does not come out? this is why ...

Iview vue.js

Feb.28,2021
Iview this.$Message.info reported an error
Click on a button rendered with render in the < H2 > table, and the button pops up a text prompt bubble (Poptip-- confirm), clicks OK and reports an error < H2 > The code is as follows render: (h, params) => { return h( div , [ ...

Render iview

Feb.28,2021
The table component in iview, how to make the number with a median value of 0 in the grid displayed in green
the table component in iview, how to make the numbers with a median value of 0 in the grid display in green and the rest in red ...

Vue.js iview

Feb.28,2021
Data Circulation problem of drop-down Selector in iview component
...

Iview vue.js

Feb.28,2021
in iview?">How to get both label and value from < CheckboxGroup v value model = "" > in iview?
< CheckboxGroup VMI model = "model1 " > . checkbox is different from tree, there is only one label value. The value obtained by model1 after two-way binding is only the value displayed by checkbox. If you want to get value, you can only bind label = ...

Vue.js iview

Feb.28,2021
How to cancel the default cursor by vue-quill-editor
was originally intended to use a tabs, with two options to put the editor in the second tabpane however, because of the content set for the content part of the editor, the tab is offset, and the two options show half of each visual observation becaus...

Html css javascript iview

Feb.28,2021
Iview upload file problem
there was a problem uploading the file. Setting: with-credentials= "true " is invalid. Check the data that header did not bring into cookie in the submitted url, which caused the submission to report an error <style lang="less"> @i...

Upload-file iview

Mar.01,2021
How to use table of iview to dynamically show and hide tr?
how to show hide rows without push,splice the bound data of table? Do you use v-show or v-if or do you implement it directly in render? ...

Iview vue.js

Mar.01,2021
Using the iview component library, font icons are not displayed
I use the iview component library (2.11.0) and follow the instructions on the official website https: www.iviewui.com docs . to use the date component, but in the local project, the font icon is not loaded, as shown in figure this is how I introduc...

Iview vue.js

Mar.01,2021
Iview table render presentation problem
1. To make an editable table, I want to be able to use the render method of the table in the AotoComplete, in the editing state, but when displaying, I find that there is a problem with the calculation of the drop-down part of the AotoComplete, sometime...

Front-end javascript vue.js iview

Mar.02,2021
How iview poptip defines content content Custom Wrap
content content of poptip needs to be set to wrap or insert html code into content ...

Iview

Mar.02,2021