Use Full Width Excluding Overflow Scrollbar with "Position: Absolute"

Use full width excluding overflow scrollbar with position: absolute

Seems like this isn't possible with pure CSS, so here's a JavaScript (jQuery) hack:

$(function() {
  var $container = $("<div>").css({ height: 1, overflow: "scroll" }).appendTo("body");
  var $child = $("<div>").css({ height: 2 }).appendTo($container);
  window.SCROLLBAR_WIDTH = $container.width() - $child.width();
  $container.remove();
});

then:

$("div.red-banner").css({
  right: SCROLLBAR_WIDTH
});

Width: 100% Without Scrollbars

Because you're using position: absolute, instead of using:

width: 100%; margin-right: 10px; margin-left: 10px

you should use:

left: 10px; right: 10px

That will make your element take the full width available, with 10px space on the left and right.

divs full width center aligned without scroll

Seems to work as described. Fun challenge. I use container to center content on the page. Add absolute position to content to allow overflow top and display it as flex with vertical direction.

body {
    margin: 0;
    overflow: hidden;
  }

.container{
    position: relative;
    display: grid;
    place-items: center;
    height: 100vh;
}
.content{
    position: absolute;
    display: flex;
    flex-direction: column;
}
.pink{
    height: 20vw;
    width: 100vw;
    background-color: rgb(255, 129, 150);
}
.blue{
    height: 40vw;
    width: 100vw;
    background-color: blue;
}

        <div class="container">
            <div class="content">
                <div class="pink"></div>
                <div class="blue"></div>
                <div class="pink"></div>
            </div>
        </div>

How to prevent an absolutely positioned element to affect the scrollbar?

This seems a bit of a janky approach and has a small caveat, but it's pure CSS/ no HTML structure modifications.

Essentially, I make the .container the main parent instead of trying to work from a lower level (.autosuggest). Step by step:

• Move position: relative up to .container
• Make the .autosuggest positioned absolutely (top / left default to 0px).
  
  
  • Give it a higher z-index so it's always on top
• make .content positioned absolutely all four sides 0px so it's same size as .container
• Move the overflow scrollbar to the .content div
• (here's the caveat) Set the top padding of .content to the height of .input + the actually desired padding. Otherwise the .content is behind the input element.

And you end up with this:

    .container {      height: 100px;      width: 300px;      margin-top: 50px;      border: 1px solid black;      position: relative;    }    .autosuggest {      width: 250px;      position: absolute;      z-index: 50;    }    .input {      font-size: 16px;      width: 230px;      padding: 5px 10px;      border: 0;      background-color: #FFEBBF;    }    .autosuggest .input:focus ~ .suggestions{      display: block;    }    .suggestions {      display: none;      list-style-type: none;      margin: 0;      padding: 5px 10px;      width: 230px;      background-color: #85DDFF;    }    .content {      overflow-y: auto;      position: absolute;      top: 0;      left: 0;      right: 0;      bottom: 0;      padding: 28px 10px 5px;    }

<div class="container">  <div class="autosuggest">    <input class="input" type="text" value="input">    <ul class="suggestions">      <li>suggestion 1</li>      <li>suggestion 2</li>      <li>suggestion 3</li>      <li>suggestion 4</li>      <li>suggestion 5</li>      <li>suggestion 6</li>      <li>suggestion 7</li>      <li>suggestion 8</li>      <li>suggestion 9</li>    </ul>  </div>  <div class="content">    content content<br >content content content content content<br ><br ><br ><br ><br ><br >content content content  </div></div>

CSS 100% width but avoid scrollbar

Use overflow: scroll instead of overflow: auto - that'll force a scrollbar to always appear.

Prevent scroll-bar from adding-up to the Width of page on Chrome

You can get the scrollbar size and then apply a margin to the container.

Something like this:

var checkScrollBars = function(){
    var b = $('body');
    var normalw = 0;
    var scrollw = 0;
    if(b.prop('scrollHeight')>b.height()){
        normalw = window.innerWidth;
        scrollw = normalw - b.width();
        $('#container').css({marginRight:'-'+scrollw+'px'});
    }
}

CSS for remove the h-scrollbar:

body{
    overflow-x:hidden;
}

Try to take a look at this:
http://jsfiddle.net/NQAzt/

---

Related Topics