I've a sidebar which is positioned sticky but in some cases larger than the height of the screen.
If the sidebar is in fact larger as the screen height, I don't want it to stick on the top. It should scroll down with the content of the page.
I'm using Bootstraps sticky-top class for that.
It has the following attributes:
.sticky-top {
position: sticky;
top: 0;
z-index: 1020;
}
I changed the top: 0 to top: 50px in my case because I need the space above.
Here's some example code: https://codepen.io/cray_code/pen/ZEaOXwo
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="toc sticky-top">
<nav class="list-group">
Links (see example)
</nav>
</div>
</div>
<div class="col-lg-9">
Content (see example)
</div>
</div>
</div>
I tried the solution from here and added the following code to my class:
.toc {
overflow-y: auto;
max-height: 100vh;
}
But that doesn't help.
Is there a pure CSS solution for that or do I need to use JavaScript?
Not sure if this is what you want, but maybe using the calc() in your css could help you.
.toc{
overflow-y: auto;
max-height: calc(100vh - 50px);
}
Hope this pen helps
Some explanations:
in js we use .offsetHeight&.clientHeight to get height we check weather this height(493px) + 50px offset is more than screen height or not.
When screen size is small we set position to static
Also we set margin-top: 50px instead of top: 50px
because top works only for sticky and margin-top works for static
For aside blocks that higher then window height you can use smartSticky script
Just add "data-smartsticky" atribute to your aside block
https://www.npmjs.com/package/smartsticker
Parent block of sticky block must be height 100%, or for flex - flex-grow:1
Related
I want my footer to be a sticky footer and tried following the css tricks negative margin trick, but did not work. I tried to impersonate my angular2 app in the below plunker code. I want the sticker not be fixed but sticky and go to the bottom when there are more content available in the main section. Note the footer is displayed above the data in the main section.
http://plnkr.co/edit/WSUC4xLMWH6fY77UyFqI?p=preview&open=app%2Fapp.component.ts
app.component:
<nav-bar></nav-bar>
<section class="main">
<div class="main-container">
Display my router-outlet here
<ul>
<li *ngFor="let hero of heroes">
{{ hero }}
</li>
</ul>
</div>
</section>
<footer-component></footer-component>
Any help to fix and move the footer down is appreciated.
You can still follow this example mentioned by
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
Simply add this code to styles.scss
html,
body {
height: 100%;
}
In your app.component.scss
:host {
display: flex;
min-height: 100%; // used percent instead of vh due to safari bug.
flex-direction: column;
}
.Site-content {
flex: 1;
}
In your app.component.html
<header>...</header>
<main class="Site-content">..</main>
<footer>...</footer>
There are several ways to achieve this. I'm assuming you've tried one of these: CSS-tricks - Sticky footer, five ways.
For that to work, you would need to:
Remove absolute positioning of both the footer and the content.
Remove default top and bottom margins from body.
If you are not going with the flexbox or grid option, then place all content except for the footer inside of one element (so you can make sure the total height of that element plus the footer is at least the height of the viewport).
Here is an implementation of your Angular2 app with a sticky footer.
The sticky footer is achieved by wrapping all of the main content in a single div and using calc() to set it's minimum height to 100vh minus the footer's height.
I think it's not a good idea to make position:absolute for your .main block. Absolute positioning for your footer will be enough.
Try something like this
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
}
.main {
min-height: 100%;
padding-bottom: 55px;
}
#footer {
position: absolute;
bottom: 0;
}
Also remove margins and padding-top from .main block styles
You just have to edit 2 files:
index.html:
<!-- Full height body -->
<body class="pt-3 h-100">
<!-- Full height app container, and also use flexbox columns -->
<app-root class="d-flex flex-column h-100"></app-root>
</body>
app.component.html:
<router-outlet></router-outlet>
<!-- Footer top margin must be set on auto -->
<app-footer class="mt-auto"></app-footer>
I am using bootstrap i have requirement where user is asking to make layout 100% height and width that should cover all the space on the page. I tried bootstrap class .container-fluid but its not working. Any idea what i am doing wrong in below code ?
index.html
<div id="main-content" style="padding-bottom: 3rem;" ng-if="user">
<div class="container-fluid">
<breadcrumbs></breadcrumbs>
<div ui-view></div>
</div>
</div>
aftab Have a look at this Fiddle.
You can make a class and use vh and vw (height/width).
You will see the block class takes 50px away from the overall view port height for the height of the navbar.
.block {
height: calc(100vh - 50px); /* less 50px for the height of the Navbar */
width: 100vw;
background-color: darkorange;
}
Notice this fills the whole screen with no scroll bars.
See if this helps you here.
Just have a read of this for browser support.
To start off I'm relatively new to CSS, Bootstrap and HTML. I want to position a responsive element at the bottom of the screen.
So I have this code which makes it behave responsively:
<div class="col-sm-12">
test
</div>
But how do I get it to stick to the bottom of the page? I already tried ID/ Class selectors with an absolute position. It moved the element to the bottom, but it wasn't responsive anymore.
One solution might be to wrap the desired element in another div, then target the wrapper element to fix it to the bottom of your screen. Your markup could look like:
<div class="fixed-container">
<div class="col-sm-12"><!--your content here--></div>
</div><!--end .fixed-container-->
And you styles could look like:
.fixed-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
This would affix the .fixed-container element to the bottom left of the viewport, and would set the width to 100% of the viewport. The layout-specific rules applied to .col-sm-12 would remain intact.
<div id="my-element" class="col-sm-12">
test
</div>
#my-element {
position: fixed;
bottom: 0;
}
Here is a simple solution to your problem.
Make sure your elements are in a wrapping div. Since you are using Bootstrap, use:
<div class="container-fluid">
Inside this container place your elements/sections including your footer:
<footer class="col-md-12">
Your footer should have the following CSS.
footer {
position: absolute;
bottom: 0;
height: 100px /* Height of your footer */
width: 100%;
}
Here is a fiddle. You can see the footer is at the bottom of the container which has a black border.
http://jsfiddle.net/gward90/ehf2wm83/
So here's the link to my site. I wanted the right container to scroll in place. How can I do this? I tried adding position: fixed to the right column but then that destroys the layout. Right now the overflow always scrolls all the way to the top.. Basically I wanted insta-shop-grid to scroll inside that container itself.
I edited it as inline style
see if it works. add them to a class.
<div class="directory-container container" style="
max-height: 400px;
z-index: 1111111;
overflow: scroll;width: 100%;
margin-top: 361px;
">
and add <body style="overflow:none">
But website really needs some responsive designing. i used 400px and 360 for margin as padding was already there. :) still I hope this will work
Adding z-index: -1 to the main content, prevents it from scrolling above the banner.
See simplified JSFiddle.
Update:
Stealing from #Anobik, I modified my example, removed the z-index and added a fixed wrapper around the main content
HTML:
<div class="banner">Banner</div>
<div class="nav">Navigation</div>
<div class="container">
<div class="content">Main content</div>
</div>
CSS:
.container {
position: fixed;
top: 60px;
left: 125px;
width: 75%;
height: 400px;
overflow: scroll;
}
JSFiddle
I have a problem with setting the height of the div:
I have 3 divs and svg element one in each other in such way:
<body>
<div id="1">
<div id="2">
<div id="3">
<svg></svg>
</div>
</div>
</div>
</body>
(There are also other elements in div 1 and 2)
Assume that svg is very big (i.e. 2048x2048), I need that size of div3 (and this also would mean div2 and div1) to have size 100% of browser window (minus other elements and margins in uppers divs) - when a browser resize div also should. As the scg is bigger than div3 there should be a scrollbars in div3 (scrollbars should be in div3 not in whole browser window to scroll only content of div3 (the svg element) not of the whole browser content!).
I've already manage to make it works this way in width, but not in height,
when I set height of all elements except svg (also for body) to 100% as I found somewhere (also tried with min-height), then all divs are of height of svg and scrollbars apears on browser window, scrolling the whole page.
Try adding:
overflow:scroll;
To your CSS for div3.
JSFiddle
For any one interested in similiar case I managed to done this. I've resigined of using div3 (after all it wasnt needed) so the layout of page is smiliar to this:
<div id="1">
something
<div id="2">
<svg width='2048' height='2048' ></svg>
</div>
<div id="footer">something</div>
</div>
and css is:
body, html, {
padding : 0px;
margin : 0px;
width : 100%;
height : 100%;
}
#nr2{
overflow: scroll;
position: absolute;
top: 10px; /* must be the height of everything above div */
left: 0px;
right: 0px;
bottom: 10px; /* must be the height of footer */
}
#footer{
height: 10px;
position: fixed;
bottom: 0px;
}