Geek Answers Handbook

Absolute position div with inner width div with scroll bar

For the last two days I have read most of the questions here and much more about “filling the remaining width” and “overflow shielding: hidden”, but I can’t solve my problem. At the moment, I seriously doubt that this is possible at all.

I have a scrollable box with full body width. In addition, I have an absolute positioned title, which I need to make the same width as the scroll. I intend to make the header 0px or (if necessary) 1px in height and allow the content to overflow.

Here is the fiddle .

There is a scroll bar (always visible) in the scroll, but there is clearly no title. To compensate for this, I float the fake scroll bar to the right inside the header container, and to the left of it a <div> fills the remaining width (just like the inner scroll width).

HTML

 //THE SCROLLBOX <div id="scrollbox"> <div id="center2"> content<br>content<br>... </div> </div> // THE HEADER <div id="header_box"> <!--- FAKE SCROLLBAR --> <div id="scroller"> <div></div> </div> // REMAINING WIDTH <div id="container"> <div id="FIRST"> <div id="FIRST_banner"></div> </div> </div> <div id="SECOND"> <div id="SECOND_banner"></div> </div> </div> </div>

CSS

 #header_box { background: yellow; position: absolute; left: 0; top: 0; right: 0; height: 25px; width: 100%; overflow: visible; } #scroller { float: right; overflow-x: hidden; overflow-y: scroll; height: 50px; width: auto; /* visibility: hidden; */ } #scroller>div { width: 0px; height: 101%; } #container { display: inline; width: auto; height: 50px; overflow: visible; } #FIRST { position: relative; overflow: hidden; height: 25px; background: pink; } #FIRST_banner { position: absolute; top: 0; left: 50%; height: 220px; width: 30px; background: crimson; } #SECOND { background: darkcyan; position: relative; height: 5px; } #SECOND_banner { position: absolute; top: 0; left: 50%; height: 220px; width: 30px; background: blue; }

The problem is the div ( #FIRST ) with the remaining width . Of all the solutions that I read only with

  position: relative; overflow: hidden;

works for me. It gives an exact width, aligning the center of the title and scroll well. But I can not escape from overflow: hidden , so it cuts off the content.

So, my second thought: wrap #FIRST in #container and let the child determine the width of the parent. After that, I can put another div ( #SECOND ) with the width of the parent in the container. It works partially. #container has the specified width, and the #SECOND div #SECOND very full, but accepts the #header_box width, since the width of the width itself is not set for the parent itself.

So my questions are:

  • Is it possible to somehow escape from overflow: hidden from a FIRST div? (In this case, the container and the second div can be removed).
  • Is there a way to allow the SECOND div to obey the width of its parent.
  • Some completely different solutions.

Unfortunately, there’s a trick for all of this:

  • Css only
  • no javascript
  • no flexbox

Thanks for any stuff.

0
source share
1 answer

In the end, it was the good old <table> that saved the day, much easier than me. There is still a fake scrollbar there, but the absolute title is now perfectly aligned with the contents of the scrollable div behind it, and it remains fluid.

See the fiddle here

HTML:

  <!--- HEADER --> <div id="THIRD"> <div id="THIRD_A"> <div id="THIRD_B"></div> <div id="THIRD_C"></div> <div id="THIRD_D"></div> </div> </div> <!--- FAKE SCROLLBAR --> <div id="scroller"> <div></div> </div> </div>

CSS

 /* The container for the header */ #header_box{ position: absolute; left: 0; top: 0; right: 0; height: 0px; width: 100%; overflow: visible; display: table; } /* Takes on the width of its child: the fake scrollbar */ #scroller { display: table-cell; float: right; overflow-x: hidden; overflow-y: scroll; height: 0px; width: auto; } /* This triggers a scrollbar to be shown */ #scroller>div { width: 0px; height: 101%; } /* The 'remaining width' container (= screenwidth - scrollbar, equals innerwidth of scrollbox) */ #THIRD{ display: table-cell; width: 100%; height: 0px; } /* Needed to give the children a 'width' reference */ #THIRD_A{ position: relative; width: 100%; height: 0px; } /* The actual header items */ #THIRD_B { position: absolute; top: 0; left: 50%; width: 25px; height: 220px; background: black; } #THIRD_C { position: absolute; top: 0; left: 10%; width: 125px; height: 120px; background: black; } #THIRD_D { position: absolute; top: 0; right: 0%; width: 25px; height: 220px; background: black; }

Note: In most portable browsers, this is disabled by 1px. Webkit-based browsers seem to display a spreadsheet with a width of 0 pixels wide by 1px (see this question) . The solution is to wrap the table in another div using css:

 position absolute; left: 0; right: -1px

and set #scroller>div to 1px wide.

NOTE 2: This is also a solution for a fixed div inside a scrollable div. Check out this script

0
source

More articles:


All Articles