I have the following HTML with Bulma:
<body class="has-navbar-fixed-top">
<nav class="navbar is-fixed-top"><!-- My nav bar --></nav>
<div class="columns">
<div class="column"><!-- Header I'd like to be fixed --></div>
</div>
<div class="columns">
<div class="column"><!-- Sidebar I'd like to be fixed --></div>
<div class="column"><!-- Main content that should be scrollable --></div>
</div>
</body>
I already use a fixed navbar, it's working fine. But I'd like to have another fixed header just below it. Then below that header, to have the left side fixed as well (side menu), and finally to have the main content scrollable.
Any idea how I could achieve this?
Related
I've looked at the similar questions that came up from this title, but they're not quite the same issue I'm having.
https://jsfiddle.net/kx4q1ut8/1/
<div style="display:flex;flex-direction:column;height:100vh;background:gray;">
<div style="background:red; width:100vw;min-height:80px;">Header</div> <!-- Header -->
<div style="background:green;width:100vw;flex-grow:1;display:flex;flex-direction:row"> <!-- outer body container -->
<div style="background:blue; width:140px;height:100%;"></div> <!-- side bar -->
<div style="background:yellow;height:100%;flex-grow:1;display:flex;flex-direction:column"> <!-- inner body container -->
<div style="background:gray;width:100%;height:200px;"> <!-- filter panel -->
</div>
<div style="background:cyan;width:100%;flex-grow:1;overflow:scroll"> <!-- table panel -->
want this content scrollable if beyond bottom of page
</div>
</div>
</div>
</div>
All the areas are fixed sizes except for the cyan area. I need that area expandable to match the rest of the window height. What I also need is for that area to have scrollable content but can't seem to work that part out completely. If you fill the area with enough text it'll get a scrollbar but I think that container is expanding beyond the bottom of the page because I can't fully scroll to see the end of the off-screen content. The layout is for a web application.
Im building a react website and am using Bootstrap 4. On one of my page in the content body I have a two column layout. The left side is a sidebar and on the right is a long column of content. When scrolling I want to keep the left sidebar on top.
Here is a picture for illustration:
My current code works, however when scrolling down the sidebar gets fixed/positioned at the center instead of the top. It looks like it's being aligned as if the header is still above it. Here is my current code:
<div className="header-wrap">
//Header Here
</div>
<div className="container">
<div className="row">
<div className="col-3 position-fixed" id="sticky-sidebar">
//Sidebar here
</div>
<div className="col offset-3" id="main">
//body here
</div>
</div>
</div>
<div className="footer-wrap">
//Footer Here
</div>
My goal is as you scroll, the header leaves the screen (which it already does) the sidebar gets positioned to the top.
for example
try the code
#sticky-sidebar{ position: sticky; top: 0;}
I'm leaving a few resources
https://www.w3schools.com/howto/howto_js_navbar_sticky.asp
https://www.w3schools.com/howto/howto_css_image_sticky.asp
I need to make a inner div horizontally scrolleable, but using the browser scrollbar and not that particular div's scrollbar.
One option would be making every other div's position as static and overflowing the wrapper div, but since I'm modiyfing a premade template, I would prefer to be able to do this without changing the layout. In that sense, a JavaScript/jQuery plugin would be nice, but totally not a must.
Here is the code:
<title>This is a test</title>
<body>
<header>
This is the header.
</header>
<div id="wrapper">
<div id="left-sidebar">
This is the left sidebar.
</div>
<div id="test">
<div id="content">
This is the main content.
<div id="flex">
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
<div id="rectangle"></div>
</div>
</div>
</div>
</div>
<footer>
This is the footer.
</footer>
</body>
Here is the jsFiddle: https://jsfiddle.net/k6e3sv6v/
Thanks bra
I think you cannot focus BROWSER scrollbar into some div it appears if the whole page is wider than 100% width.
But I think it can be done by putting all other elements around that div as fixed position which won't move over the screen even if the scroll was moved left-right...
I have a webpage which has a sidebar-nav along the left and a navbar-fixed-top along the top. The sidebar is collapsible by clicking a button which is on the top navbar. The top nav bar starts where the sidebar ends.
That part all works correctly. What is not working is that I can't get the top navbar to take up the full width available to it (excluding the sidebar). In other words when the sidebar is expanded, the top navbar needs to take up all of the remaining width. When the side bar is collapsed, it needs to take up the whole width. This is what I have:
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<!--side bar menu items here-->
</ul>
</div>
<div class="navbar-fixed-top" style="position:relative;">
<div class="navbar" style="position:fixed;">
<!--top navbar items here-->
<!--button to collapse/hide sidebar also here-->
</div>
</div>
<div class="container-fluid" id="page-content-wrapper">
<div class="col-lg-12">
<!--general page content here-->
</div>
</div>
</div>
I have tried adding width:80% to the navbar which works correctly when the sidebar is expanded, but then when you collapse the side bar it still only takes up 80% of the full width. It should expand to 100% when that happens.
I work with Bootstrap 2.3.1! now I have this code:
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
</div>
<div class="span10">
<!--Body content-->
</div>
</div>
</div>
I need to fixed span2 for put fixed sidebar when browser scrolled. How to work Bootstrap for fixed span?!
NOTE: I need to have normal and responsive view layout also.
If you check bootstrap then there is present affix class for position fixed.
IN bootstrap.css file
.affix { position: fixed;}