How to create a sidebar and content area using flexbox?

前端未结

关注

 1  1098

鱼传尺愫 2020-12-20 07:46

I would like to use flexbox to create a sidebar and a main content area. The height of the sidebar should be at least that of the window. However, if the content height is l

1条回答

一向 (楼主)

2020-12-20 08:28

You just need to use min-height instead of height

html, body {
    margin: 0;
    height: 100%;
}

body {
  height: 100%;
}

.flex-container {
    display: -webkit-flex;
    display: flex;
    background-color: red;
    min-height: 100%;
}

html,
body {
  margin: 0;
  height: 100%;
}
body {
  height: 100%;
}
.flex-container {
  display: -webkit-flex;
  display: flex;
  background-color: red;
  min-height: 100%;
}
.sidenav {
  background-color: lightgray;
  -webkit-flex: 1;
  flex: 1;
}
.content {
  background-color: lightblue;
  padding: 10px;
  -webkit-flex: 5;
  flex: 5;
  height: 2000px;
}


  
    
      
        Item 1
      
    
    
      lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem
      ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
      lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

0 讨论(0)