Scroll bar below fixed header with Vuetify + Electron

Question

I am using Vuetify and Electron to make an app to help me with certain tasks at my job. I have disable the browserWindow frame and made my header the draggable area with a button to close the window. I am using the electron vuetify template

vue init vuetifyjs/electron

My problem is the scrollbar reaches all the way to the top but I would like it below my fixed header.

I have tried playing with overflow properties on the html, body, app div, and content div tags but i have not been successful.

How would I accomplish this?

Answer 1

This is purely a CSS question really as you can see this behaviour in the browser too with similar layouts. The easiest way to fix this is using a flex layout:

HTML:

<div class="container">
  <div class="titlebar"></div>
  <div class="content">
    <h1>So much content we scroll</h1>
    <h1>So much content we scroll</h1>
    <!-- etc -->
  </div>
</div>

CSS:

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.titlebar {
  background-color: blue;
  height: 35px;
  flex-shrink: 0;
}

.content {
  flex-grow: 1;
  overflow-x: auto;
}

Check out this out in this CodePen

Answer 2

I'd like to offer a Vuetify specific answer for this question, this should apply whether or not Electron is involved.

Vuetify's default styles make this a bit more difficult than a simple CSS solution can give you, especially when the layout gets more complex.

For this example I'm using the complex layout from Vuetify's pre-defined themes here

Vuetify ships with an overflow-y: scroll on the html element so the first step is adding an override for this.

html {
  overflow: hidden;
}

This will get rid of the bar on the right side that spans the whole height of the app.

Next you will want to set your v-content area as the scrollable area. There are a few gotchas to watch out for when you're setting this area:

• Display flex is already declared
• Vuetify sets padding in the style attribute so you'll need to override depending on your case
• You'll need a margin the height of your header(only matters if you're changing header height from 64px)
• You'll need to remove the header height from the height of the content container using calc(Same as above)
• If you have a nav drawer on the right side you'll need to bind a class to take care of this.

My CSS for v-content looks like this, you will need an important to override the padding since it is set by Vuetify through style binding:

main.v-content {
  width: 100vw;
  height: calc(100vh - 64px);
  flex-direction: column;
  overflow: scroll;
  margin-top: 64px;
  padding-top: 0 !important;
}

I also have a class bound to the state of the temporary right drawer on the v-content tag in the template, this makes sure that the scroll bar doesn't disappear underneath the right nav drawer when it's open:

<v-content :class="{ draweropen: drawerRight }">

And the CSS for that bound class, once again you'll need an important to remove the default right padding Vuetify puts on v-content when the drawer is open:

.draweropen {
  width: calc(100vw - 300px) !important;
  padding-right: 0 !important;
}

You can optionally set the flex-direction to column-reverse if your content is bottom loaded like a chat which is what I'm doing in this CodePen Example