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

Asked

Viewed 399 times

5

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

My sidebar’s kind of like this:

inserir a descrição da imagem aqui

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

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

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

I tried to use max-height: 100%, but it didn’t work out.

Is there any way to define this with pure Css?

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

javascript css

  • tried height: 100vh ?

  • @Caiofelipepereira If it works on Google Chrome server. The problem is someone looking for my question, wanting a crossbrowser solution

  • max-height: 100% works, but will depend on how the html and css of the parent elements are mounted'.

  • 2

    According to http://caniuse.com/#search=vh, the support is reasonable, until. People will only stop using IE when we stop doing things for IE.. Anyway, you can follow the @Givanildor.deOliveira approach, or go to a solution flex-box, which is much more elegant

1 answer

5


With position: relative; and position: absolute;

You can just use one positition: absolute in the .sidebar and positition: relative in the parent object (name of .main), note that html and body need to have height: 100%; and the .main has to be the direct child of the body and have min-height: 100%

I also added margin-left: 300px; why the .content do not get below the .sidebar.

This effect works well for all modern browsers like IE8, Chrome, Firefox, Safari. However it doesn’t 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 accompanies 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)

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 facilitate, so use display: flex; in the parent object (in the example I created a .main), and flex: 1; in children objects, this is basically the system of "Equal height Columns" (or same height Columns).

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

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>

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.