Overlaying a floating full width sidebar on HTML pages
Question
I am developing a feature for an existing site, which is a floating full height sidebar that can pop in from the left side.
Is it possible to develop this without changing the markup and CSS of the original pages? Ideally I want it as a plugin that can just be added to an existing page.
I don't need the JavaScript for making it slide in from the side, I'm just trying to establish the best solution for the CSS to ensure it's full height. Within the sidebar itself, the content should be scrollable.
This sample code should show what I'm trying to achieve:
body { background: #CCC; /* Ignore */ } .bspec { z-index: 9999; position: absolute; top: 0; left: 0; width: 400px; } .bspec-content { display: table-cell; padding: 10px; overflow-y: scroll; max-height: 500px; background: #FFF; color: #666; } .bspec-toggle { display: table-cell; background: #F00; width: 20px; cursor: pointer; }
<html> <body> <div class="content"> <!-- Existing page markup, ideally left alone --> </div> <!-- Add sidebar to the page --> <div class="bspec"> <div class="bspec-content"> <p>Lorem ipsum dolor sit amet, ne doming probatus prodesset vel, ius no solet everti scaevola. Te quo dictas accumsan. Augue libris legendos duo te, pro ea postea intellegat. Mutat oporteat reformidans ea sit.</p> <p>Vel eius molestie necessitatibus ei. Veniam commune pertinacia ei cum, ex est graece laoreet adipisci. Qui esse argumentum ut, vix cu patrioque pertinacia. In vis unum evertitur intellegat, pro postea complectitur ad, eu sit mucius audiam scripserit. Alterum consulatu cu mei, nibh apeirian temporibus vix cu.</p> <p>Vel nisl causae aperiam cu, aeterno ponderum insolens ea cum, cum ei autem inani regione. Sea quodsi consequat ex. Ne wisi cotidieque vim, idque senserit ad qui. Choro noster civibus eu vix.</p> <p>No mel scripta equidem, sed ut senserit signiferumque. Eu vix volumus mediocrem molestiae, eu sensibus conclusionemque vis. Est unum laoreet et, nibh sadipscing mediocritatem mei an. Autem mollis at pro, qui et dolorum postulant. Veniam expetenda disputationi pro in, id eum exerci accusata. Vis ad nobis dicunt fabellas, te usu congue impedit vituperata. Ipsum possim assueverit et vel.</p> <p>Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.Quo et amet omittantur. An eripuit perpetua vix, mel te omnes dicunt scriptorem. Has quot graecis ea, cum primis detraxit liberavisse ut. Ut verterem quaestio vis. Et duo qualisque laboramus dissentias, vis ut case minimum scribentur.</p> </div> <div class="bspec-toggle"> <!-- Clickable right edge of the pane, to bring the sidebar in --> </div> </div> </body> </html>
Notes
Sidebar should be overlayed on the left side of the screen.
Sidebar should fill height of screen.
Excess sidebar content should be scrolling.
Sidebar toggle should also run full height along the right side of the sidebar content.
1 answers
solution1
0 ACCPTED 2015-06-18 17:55:00
For the sidebar, you can use the vh CSS unit as a max-height. For example:
.Sidebar{
max-height: 100vh;
position: absolute;
top: 0;
left: 0;
overflow-y: scroll;
width: /* your width here */;
}
You can also swap max-height with height to force it to be screen height, and the same thing can be applied to the toggle button.
This is assuming that you're handling hiding and showing this.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.