The true height is never fully accurate when a vertical scrollbar is visible

Having an issue that needs solving.

I've created a simple layout, but I'm struggling with getting the sidebar and wrapper to adjust their height properly.

This is how the layout looks:

<div class="sidebar collapse">
  <div class="sidebar-header">
    <div class="user"></div>
  </div>
  <hr>
  <div class="sidebar-menu">
    <h5>Menu</h5>
    <a href="#" class="icon-conten">Content</a>
    <div class="submenu">
      <a href="#">Menu</a>
      <a href="#">Sidebar</a>
      <a href="#">Footer</a>
    </div>
    <a href="#" class="icon-config">Configuration</a>
  </div>
</div>

<div class="wrapper">
    <a href="#" class="box page-toggle"><i class="fas fa-ellipsis-v"></i></a>
    <div class="page-title box">
      Title
    </div>
  <div class="page-content box">
      Content
  </div>
</div>

Here's a snippet of the CSS code:

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%; }
.sidebar {
  z-index: 5;
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 100%;
  background: #FFF;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); }
  @media (min-width: 800px) {
    .sidebar {
      left: 0 !important; } }

@media (max-width: 800px) {
  .collapse {
    left: -250px; } }

.wrapper {
  background: #EEE;
  position: absolute;
  width: calc(100% - 250px);
  height: 100%;
  top: 0;
  right: 0;
  padding: 20px; }
  @media (max-width: 800px) {
    .wrapper {
      width: 100%; } }
  .wrapper .box {
    background: #fff;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2); }

I've put together a CodePen to illustrate the issue better... :)

Check out the CodePen here!

htmlcss

Answer №1

Consider using flexbox for your design layout instead of relying on absolute positioning for your div elements. Check out the example I created on CodePen:

https://codepen.io/user/pen/example123

<body>
<div class="container">
<div class="sidebar collapse">
  <div class="sidebar-header">
    <img src="http://via.placeholder.com/300x300" alt="...">
    <div class="user">User</div>
  </div>
  <hr>
  <div class="sidebar-menu">
    <h5>Menu</h5>
    <a href="#" class="icon-content">Content</a>
    <div class="submenu">

      <a href="#">Menu Item 1</a>
      <a href="#">Sidebar</a>
      <a href="#">Footer</a>

    </div>
    <a href="#" class="icon-config">Configuration</a>
  </div>
</div>

<div class="wrapper">
    <a href="#" class="box page-toggle"><i class="fas fa-ellipsis-v"></i></a>
    <div class="page-title box">
      Title
    </div>
  <div class="page-content box">

    <h1>Lorem Ipsum</h1><br /><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, <em>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</em> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br /><br />
<h2>Lorem Ipsum</h2><br /><br />
<p><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</strong> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><ul><li>Lorem ipsum dolor sit amet</li><li>consectetur adipiscing elit</li></ul><h3>Lorem Ipsum</h3><ol><li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li><li>Ut enim ad minim veniam</li></ol><h4>Lorem Ipsum</h4><br /><br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br />


  </div>
</div>
  </div>
</body>
</html>

CSS Styles

$sidebar-width: 250px;
$padding: 20px;

// colors
$primary: #ff9800;
$primary-l1: #ffad33;
$primary-l2: #ffc266;
$primary-l3: #ffd699;
$primary-l4: #ffebcc;
$primary-l5: #fff9f0;
$primary-d1: #e68a00;
$primary-d2: #cc7a00;
$primary-d3: #b36b00;
$primary-d4: #995c00;
$primary-d5: #804d00;

// backgrounds
$bg-dark: #333;
$bg-light: #FFF;
$bg-wrapper: #EEE;

// text colors
$text-on-dark: $primary-l5;
$text-on-light: $primary-d5;

// breakpoints
$breakpoint: 800px;

@mixin box-shadow {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*{
    transition: all 0.2s ease-out;
}

html,body{
    margin: 0;
    padding:0;
    width:100%;
    height:100%;
}

body{
    font-family: "Ubuntu", Arial, sans-serif;
    font-size:16px;
}
.container {
  display: flex;
}
h1, h2, h3, h4, h5, h6{
    margin:0;
    margin-bottom: $padding;
    padding:0;
}
h1{ font-size: 30px }
h2{ font-size: 26px }
h3{ font-size: 24px }
h4{ font-size: 22px }
h5{ font-size: 20px }
h6{ font-size: 18px }

hr{
    padding:0;
    margin:$padding 0;
    border:0;
    border-bottom:1px solid #666;
    opacity: 0.2;
}

.sidebar{
    width:$sidebar-width;
    height:100%;
    background: $bg-light;
    @include box-shadow;
}
.collapse{
    @media (max-width:$breakpoint){
        left:- $sidebar-width;
    }

}
.wrapper{
    background:$bg-wrapper;
    width: calc(100% - #{$sidebar-width});
    height: 100%;
    padding:$padding;
    @media (max-width:$breakpoint){
        width:100%;
    }
    .box{
        background:#fff;
        padding:$padding;
        margin-bottom:$padding;
        @include box-shadow;
    }
}
.page-title{
    font-size:1.2em;
    font-weight:500;
    &:first-letter{
        color:$primary;
    }
}

.page-toggle{
    display:none;
    font-size:1.2em;
    color:$primary;
    &:hover{
        color:#000;
        background:$primary;
    }
}

@media (max-width:$breakpoint){
    .page-title{
        display:block;
        margin-left:50px + $padding;
    }
    .page-toggle{
        width:50px;
        text-align:center;
        float:left;
        display:inline-block;
    }
}

.sidebar-header{
    padding:$padding 0;
    text-align: center;
    img{
        margin:auto;
        width:50px;
        height:auto;
        border:0;
        border-radius:50%;
        display:block;
    }
    .user{
        letter-spacing:2px;
        font-variant:small-caps;
        text-transform: capitalize;
        font-size:1.2em;
        font-weight:700;
        &:first-letter{
            color:$primary;
        }
    }
}
.sidebar-menu{
    h5{
        padding:0 $padding;
    }
    a{
        padding:10px $padding;
        display:block;
        color:#000;
        text-decoration: none;
        font-weight: 500;
        &:hover{
            background:$primary;
            &:before{
                color:#000;
            }
        }
        &:before{
            font-family:"Font Awesome 5 Free";
            font-weight:900;
            padding-right:10px;
            color:$primary;

        }
    }
    >.link-active{
        background: $primary;
        font-size:1.1em;
        &:before{
            color:#000 !important;
        }
    }
}
.submenu{
    display:none;
    font-size:0.9em;
    background:$primary-l4;
    a{
        padding:3px $padding;
        &:hover{
            background:$primary-l1;
        }
        &:before{
            content:"\f105";
            margin-left:3px;
            padding-right:13px;
        }
    }
}

.icon-content::before{   content:"\f15c"; }
.icon-config::before{   content:"\f013"; }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring the concept of overflow and minmax behavior in CSS grid

Summary: Example of overflow in nested grid layout on Codepen, and attempts to fix it using CSS grid-template-columns: repeat(16, minmax(0,1fr)); Within the element called container, there are two main elements - summary-wrapper and stats-wrapper The gri ...

htmlcsscss-grid

Create a Bootstrap 5 app with a two-column layout, featuring a fullscreen display and scrolling

I am currently experimenting with Bootstrap 5 to design a full-screen webpage with two columns, consisting of a header and a footer. Each column will hold content that exceeds the available space, necessitating individual scrollbars. One of the columns als ...

htmltwitter-bootstrapbootstrap-5

Utilizing display: flex for creating table padding

Hey there! I'm currently working on a webpage layout that includes a logo and a table. To achieve this, I've used display flex for the wrapper element. However, I've noticed that when viewing the page on mobile devices, the padding of the ta ...

htmlcssflexboxpadding

Indent the text within a span element that is displayed as an inline block

I am in search of a solution using only CSS for the following issue. Take into account the HTML below: <p> <span>Some text</span> <span>Some text</span> </p> Both <span> elements are set as inline-block. ...

css

Exploring the Live Search Functionality on an HTML Webpage

I am attempting to create a live search on dive elements within an HTML document. var val; $(document).ready(function() { $('#search').keyup(function() { var value = document.getElementById('search').value; val = $.trim(val ...

javascriptjqueryhtml

Is it possible to detect when a user reaches the end of a div without using a scroll event?

Seeking a JavaScript solution that can identify when a user reaches the bottom of a div with overflow: auto. While there are numerous solutions on Stack Overflow utilizing the onscroll event, I am curious if this can be accomplished using newer technology ...

javascripthtmlscroll

Having trouble setting the focus on a text box following a custom popup

Presenting a stylish message box and attempting to focus on a textbox afterward, however, it's not functioning as expected. Below is the HTML code: <a class="fancyTrigger" href="#TheFancybox"></a> <hr> <div id="TheFancybox">& ...

javascriptjqueryhtmlfancybox

Javascript enables the magnetization of cursor movements

Can a web page be designed so that when users open it and hover their mouse over a specific area outside of an image, the mouse is attracted to the image as if by a magnet? Is this idea feasible? Any suggestions would be appreciated. ...

javascriptjqueryhtmlcss

Mix div borders with varying border radius for child elements

I'm currently working on a project that involves creating border lines between divs to achieve a design similar to the one shown in this design jpeg. However, I've only managed to reach an output jpeg where the merging is not quite right. The C ...

cssreactjsresponsive-designstyled-componentsborder-radius

Tips for positioning tables on a page

I have 4 tables and a submit button. How can I make them more compact? Maybe like this: </img> This is my HTML code: <body> <form action="/cgi-bin/form.py" id="myform"> <table class="table-fill"> ... ...

htmlcss

Challenges faced when integrating Angular with Bootstrap elements

I am currently in the process of developing a website using Angular 12, and although it may not be relevant, I am also incorporating SCSS into my project. One issue that I have encountered pertains to the bootstrap module, specifically with components such ...

htmlangularbootstrap-5

Exploring the use of the map function for iterating in a stepper component of

I've been attempting to integrate Redux Form into my stepper component. However, I'm facing an issue where adding form fields results in them being displayed in all three sections. To address this, I started reviewing the code for the stepper. I ...

javascriptcssreactjsreduxmaterial-ui

Ways to ensure the menu remains fixed on a fluid website

Is there a way to prevent the main-menu from moving to a second line when resizing the page down, while still maintaining fluidity? Thank you, Ken ...

css

How to style the first column of the first row in a table using CSS without affecting nested tables

Having some challenges with CSS selectors, I'm hoping to find some assistance here. Presented with HTML code that resembles the following: <table class=myTable> <tr> <td>this is the td of interest</td> </tr> ...

css

Is it possible to combine Bootstrap 2.3.1 with newer versions such as 4.0 or 3.x.x?

My current website is built using Bootstrap 2.3.1, but now I am looking to update to a new version of Bootstrap. However, when I tried updating, the entire UI changed drastically and the website started to look clumsy. Instead of completely replacing the ...

csstwitter-bootstraptwitter-bootstrap-3bootstrap-modalbootstrap-4

How can I preloaded self-hosted fonts in Next.js without receiving a console warning for not using the resource within a few seconds?

I am working on a project in Next.js and I want to preload my self-hosted fonts. In my code, I have the following setup: Inside my _app.js file: <Head> <link rel="preload" href="/fonts/leira/Leira-Lite.t ...

htmlcssfontsnext.jspreload

Converting from CAPS lock to using the capitalize property in CSS

Is there a way to transform a sentence that is all in CAPs lock without changing it? This sentence is part of a paragraph, and I am looking for a CSS solution (maybe with a little Jquery) that works reliably across most devices! I have come across similar ...

htmlsentencecss

Fixing the issue: "Tricky situation with JavaScript not working within Bootstrap 4's div tag while JS functions properly elsewhere"

Currently, I'm working on implementing a hide/show function for comments using JavaScript. Fortunately, I was able to find a helpful solution here (thanks to "PiggyPlex" for providing the solution on How can I hide/show a div when a button is clicked? ...

javascripthtmlcssbootstrap-4

I desire to place a picture atop a carousel within a bootstrap framework

I'd like half of my display picture to overlap the carousel image at the top and be centered. The carousel should serve as a cover page similar to Facebook. .dp-container{ width: 200px; height: 200px; border: 2px solid black ...

htmlcssbootstrap-4

In Angular, encountering difficulty accessing object members within an array when using custom pipes

Here is a custom pipe that I have created, but I am facing an issue accessing the members of the customfilter array, which is of type Item. import { Pipe, PipeTransform } from '@angular/core'; import {Bus} from '/home/pavan/Desktop/Pavan ...

htmlangulartypescript