Is there any way to set a max-height of an element equal to the size of the window, with pure CSS?

Navigation
5

I have a sidebar, which can contain n items in a listing.

My sidebar looks something like this:

In my source code, I set the following css to work: 

.sidebar {
    max-height: 400px;
    overflow-y: auto;
}

Now my question is: I want the size of max-height to vary according to the size of the screen. That is, if the user resizes or depending on the size of the user's monitor, I want my sidebar to have max-height according to screen size.

I tried to use max-height: 100% , but it did not work.

Is there any way to define this with pure Css?

If not, what is the simplest way to solve this problem?

    
asked by anonymous 09.08.2016 / 22:40

1 answer

5

With position: relative; and position: absolute;

You can simply use positition: absolute on .sidebar and positition: relative on the parent object (name .main ), note that html and body must have height: 100%; and .main must be% child right from the body and have min-height: 100%

I've also added margin-left: 300px; so that .content is not below .sidebar .

This effect works well for all modern browsers like IE8, Chrome, Firefox, Safari. However it does not work well in IE with quircks-mode , example: 

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}
.main {
   position: relative;
   min-height: 100%;
}

.sidebar {
   top: 0;
   left: 0;
   position: absolute;
   width: 300px;
   height: 100%;
   overflow: auto;
   background: #fc0;
}

.content {
    margin-left: 310px;
}
<div class="main">
    <div class="sidebar">
      foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
      foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
      foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
      foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
      foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
      foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
      foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
    </div>

    <div class="content">
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
    </div>
</div>

With position: fixed;

You may also want an effect that the sidebar accompany the screen, I mean stay fixed on it, you can use position: fixed; , the only difficulty with it will be to adjust according to the margins (if you need to) 

html, body {
   margin: 0;
   padding: 0;
}

.sidebar {
   top: 0;
   left: 0;
   position: fixed;
   width: 300px;
   height: 100%;
   overflow: auto;
   background: #fc0;
}

.content {
    margin-left: 310px;
}
<div class="main">
    <div class="sidebar">
      foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
      foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
      foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
      foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
      foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
      foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
      foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
    </div>

    <div class="content">
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
      baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
    </div>
</div>

With display: flex;

Being an app-chrome it supports flex which can make it easier, so use display: flex; on the parent object (in the example I created a .main ), and flex: 1; on child objects, this is basically the "equal height columns" (or same height columns).

Using flex (in this example height: 100%; is expendable, I only added because otherwise it could be inconspicuous as the content varies): 

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.main {
    display: flex;
}
.sidebar {
    flex: 1;
    max-width: 300px;
    overflow: auto;
    background: #fc0;
}
.content {
    flex: 1;
}
<div class="main">
<div class="sidebar">
  foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
  foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
  foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
  foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
  foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
  foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
  foo <br> foo <br> foo <br> foo <br> foo <br> foo <br>
</div>

<div class="content">
  baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
  baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
  baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
  baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
  baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
  baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
  baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
  baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
  baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
  baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
  baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
  baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
  baz <br> baz <br> baz <br> baz <br> baz <br> baz <br> 
</div>
</div>
    
09.08.2016 / 22:53
ORA-00980: synonym translation is no longer valid Gulp Tasks with Command Line Parameters