Issue
I want to have two columns, a left sidebar, and the main content.
I want the sidebar to be fixed (and for it to scroll if need be)
<div class="is-widescreen">
<div class="columns">
<aside id="main_sidebar" class="column">
<h1>test</h1>
</aside>
<div class="column is-four-fifths">
<div id="editorjs" class="content">
<!-- see the demo for the effect-->
</div>
<button id='save'>save article</button>
</div>
</div>
</div>
The editorjs would contain lots of content and so I want the sidebar content not to be affected by the scrolling on the main section.
Solution
position: sticky along with display: inline-block can help you achieve that.
Also, set max-height to the full height of the page and overflow-y: auto for the scroll functionality. I've also set the top and bottom properties to 0 in order to stretch the sidebar along its y axis.
.menu {
position: sticky;
display: inline-block;
vertical-align: top;
max-height: 100vh;
overflow-y: auto;
width: 200px;
top: 0;
bottom: 0;
padding: 30px;
}
.content {
display: inline-block;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>JS Bin</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.0/css/bulma.min.css" />
</head>
<body>
<div class="is-widescreen">
<div class="columns">
<aside class="menu">
<p class="menu-label">
General
</p>
<ul class="menu-list">
<li><a>Dashboard</a></li>
<li><a>Customers</a></li>
</ul>
<p class="menu-label">
Administration
</p>
<ul class="menu-list">
<li><a>Team Settings</a></li>
<li>
<a class="is-active">Manage Team</a>
<ul>
<li><a>Members</a></li>
<li><a>Plugins</a></li>
<li><a>Add a member</a></li>
<li><a>Members</a></li>
<li><a>Plugins</a></li>
<li><a>Add a member</a></li>
<li><a>Members</a></li>
<li><a>Plugins</a></li>
<li><a>Add a member</a></li>
<li><a>Members</a></li>
<li><a>Plugins</a></li>
<li><a>Add a member</a></li>
<li><a>Members</a></li>
<li><a>Plugins</a></li>
<li><a>Add a member</a></li>
</ul>
</li>
<li><a>Invitations</a></li>
<li><a>Cloud Storage Environment Settings</a></li>
<li><a>Authentication</a></li>
</ul>
<p class="menu-label">
Transactions
</p>
<ul class="menu-list">
<li><a>Payments</a></li>
<li><a>Transfers</a></li>
<li><a>Balance</a></li>
</ul>
</aside>
<div class="column content">
<div id="editorjs">
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
</div>
<button id="save">save article</button>
</div>
</div>
</div>
</body>
</html>or check out my JS Bin.
Answered By - aldi Answer Checked By - Senaida (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.