How to stop a fixed sidebar from occluding content when zooming in?

user_19548881 0
Viewed 48

I am trying to implement a fixed sidebar for a table of contents (TOC) on a website (i.e. one that stays in the same place as the user scrolls up/down).

I'm doing so using the following code in HTML:

enter image description here

and in CSS:

enter image description here

My attempt was inspired by the following tutorial: https://www.w3schools.com/howto/howto_js_dropdown_sidenav.asp

While it looks fine on 100% zoom in Chrome, when I zoom in, the sidebar begins to occlude/hide/overlap some of the content adjacent to it, as illustrated below: enter image description here

Anyone know how I can fix/resolve this such that the table of content behaves properly when zooming?

css html
3 Answers

You probably want to use percentage width here. Example:

div.toc {
  position: fixed;
  height: 100%;
  width: 15%;
  ...
}

Zooming in modifies px, em and rem values, but percentages are always the same.

user_195622580

Handle max-width

Try setting a max-width for your sidebar using vw (viewport width).

This unit is not affected by the zoom variation. (as %, vh, vmin, vmax, and others)

This way, you can keep setting your Sidebar width in px or whatever CSS unit you need, but limiting the max value, based on the absolute screen width.

For example

width: 100px;        // Your default width
max-width: 25vw;     // Max absolute width (not affected by zoom)

// The zoom changes the element width
//  but will never be larger than the 25% of your screen width (25vw)

Of course, you can also specify different max-width values for different screen sizes using some media queries.
If instead you prefer that the width of your Sidebar is of a constant width (in screen percentage), you can use vw directly in your width (without the need for a max-width).

Generally

Keep in mind which CSS units are affected by the zoom when you choose one.

user_131816430

A fixed position element does not affect the position of other elements:

The element is removed from the normal document flow, and no space is created for the element in the page layout.

-- https://developer.mozilla.org/en-US/docs/Web/CSS/position#fixed

To overcome this behavior you simply need to set the div.contents's padding-left equal to whatever value is set for the width of div.toc. It looks like you are familiar with CSS variables, and I suggest using one in this case.

body {
  --toc-width: 30vw;
  --toc-background: red;
}

div.contents {
  /* offset contents by toc width */
  padding-left: var(--toc-width);
}

div.toc {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--toc-width);
  background-color: var(--toc-background);
}
<div class="contents">
  <div class="toc"></div>
  <h1>not toc</h1>
</div>

user_61273930
Related