CODEWITHSUNDEEP
cssangularsemantic-ui
MikeS
MikeS

Reputation: 1078

How to make full height sidebar with dynamic main content?

I have an angular2 app with left a sidebar and dynamic main content.

HTML:

<body>
<div class="full_height">
  <div class="sidebar">Some content</div>
  <div class="main">Some dynamic content</div>
</div>
</body>

CSS:

body{
  width:          100%;
  height:         100%;
  margin:         0;
}
.full_height{
    display:        flex;
    flex-direction: row;
    align-items:    stretch;
}
.sidebar{
  background: black;
  color: white;
  width: 150px;
  flex: 0 0 auto;
}
.main{
  flex: 1 1 auto;
}

I need the sidebar grow to 100% height of the browser body if no information in the main block. And I need the sidebar and the main block have equal height when a big amount of information have been loaded to the main block via AJAX.

How to make the first part work?

JSFiddle

Upvotes: 2

Views: 8192

Answers (3)

Rahul
Rahul

Reputation: 2071

If you want to make full height sidebar then sidebar will be fixed position and rest of the content will be relative position. Please check the below Snippet.

html{
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
*,
*:after,
*:before{
  box-sizing: inherit;
}
body{
  margin: 0;
  padding: 0;
}
.full_height{
  background-color: white;
  display: flex;
  flex-direction: column;
}
@media (min-width: 992px){
  .full_height{
    padding-left: 330px;
  }
}
.sidebar{
  background-color: #5c5c5c;
  color: white;
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  padding: 20px;
  width: 100%;
}
@media (min-width: 992px){
  .sidebar{
    height: 100%;
    left: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    top: 0;
    width: 310px;
    z-index: 1030;
  }
}
.main{
  background-color: #009688;
  color: white;
  font-size: 20px;
  margin-bottom: 30px;
  padding: 20px;
  width: 100%;
}
<div class="full_height">
  <div class="sidebar">Some content</div>
  <div class="main">Some dynamic content</div>
</div>

Snippet two This relative content

html{
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
*,
*:after,
*:before{
  box-sizing: inherit;
}
body{
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
.full_height{
  background-color: black;
  display: flex;
  flex-direction: column;
  padding: 20px;
}
@media (min-width: 992px){
  .full_height{
    align-items: stretch;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 100%;
    width: 100%;
  }
}
.sidebar{
  background-color: #f5f5f5;
  color: #009688;
  flex-basis: 100%;
  flex-grow: 0;
  flex-shrink: 0;
  max-width: 100%;
  padding: 20px;
}
@media (min-width: 992px){
  .sidebar{
    flex-basis: 310px;
    max-width: 310px;
  }
}
.main{
  background-color: white;
  color: black;
  padding: 20px;
  width: 100%;
}
@media (min-width: 992px){
  .main{
    padding-left: 40px;
  }
}
<div class="full_height">
  <div class="sidebar">Sidebar content</div>
  <div class="main">Main Content</div>
</div>

Check the Snippet in full width view. All snippet is responsive.

Upvotes: 2

3Dos
3Dos

Reputation: 3487

I think you just forgot to assign a 100% height to the HTML element. Is this what you tried to do ?

html, body{
  width:          100%;
  height:         100%;
  margin:         0;
}
.full_height{
  display:        flex;
  flex-direction: row;
  align-items:    stretch;
  height: 100%;
}
.sidebar{
  background: black;
  color: white;
  width: 150px;
  flex: 0 0 auto;
}
.main{
  flex: 1 1 auto;
}
<body>
<div class="full_height">
  <div class="sidebar">Some content</div>
  <div class="main">Some dynamic content</div>
</div>
</body>

Upvotes: 4

Vedran Jaic
Vedran Jaic

Reputation: 136

If you want both the .sidebar and .main to fill the entire screen, just add the 100vh height.

.sidebar,
.main {
    height: 100vh;
}

Upvotes: 0

Related Questions