So I have a bottom div which needs to be fixed in all screen size, and the remaining upper contents just get scrolled when the screen size gets sufficiently small.
.mainContainer {
display: flex;
flex-direction: column;
overflow-y: scroll;
text-align: center;
position: fixed;
top: 0;
bottom: 70px;
width: 100%;
}
.fixedBottom {
display: flex;
flex-direction: row;
padding: 10px 10px;
justify-content: space-around;
bottom: 0;
position: fixed;
width: 100%;
}
I've put bottom: 70px for the meantime to see lowers contents, when otherwise 0 the page wouldn't be able to scroll through the whole page as the bottom div is fixed hence hindering it. Well, this setup actually works on well on chrome, moz and opera but not on safari, my bottom div is whitened lol but the element is there.
Update: (temporary solution) since bottom div is fixed and it's going to be in the bottom of the page no matter what, put fixedBottom outside mainContainer. mainContainer becomes a sibling element to fixedBottom and wrap these elements into a div. However, I would still prefer mainContainer becoming a parent element.
Related
I'm trying to make a sticky navbar. So i'm adding the position: fixed; and width: 100%. It's working but scrollbar looks bad. This is the code;
.navbar {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: row;
padding: 14px 24px;
position: fixed;
top: 0;
When i'm adding width: 100% and position: fixed; scrollbar section is breaks up like this;
Look like this
Should look like this
How can i solve this?
That's really simple. The answer is: it's the padding. as you might know by now, padding is some pixels that get added to an element after its normal dimensions and before the border. For example:
So when you set width to 100% the padding overflows your page. You need to set your width to 100% - (padding * 2). Padding is *2 because there is one in the left and one in the right. This can be acheived with the calc() function of CSS.
.yournavbar{
/*Style here*/
padding: 8px; /*Set this to anything*/
width: calc(100% - calc(8px * 2)); /*You have to set 8 px to your padding*/
}
Example image:
Did this solve your error? Do you want more information (for margin and border)? Comment me.
Its looks like your padding is pushing your content way after the 100% size. Try using box-sizing: border-box; and check out this documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Simple fiddle : https://jsfiddle.net/75zwpy3b/2/
The navbar is styled as
#navbar {
background-color: #333;
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
/* width: 100%; */
position: fixed;
}
As you can see the width has not been applied but position:fixed is applied, the navbar contracts to fit its content, but if i comment out position:fixed then suddenly the navbar goes all the way from left to right.
Why does position:fixed requires width:100% to go with it ?
Since it´s fixed it doesn't know of its parent elements or siblings so it just fits the width to its contents. One solution is to go width: 100% or left: 0; right: 0;
Since you are setting a fixed position it needs a height and width property since there are no other defined elements to go off of. If you want the nav to scale across the screen then use width: 100% but if you wanted a specific fixed nav size you could do width: 800px.
How can I get all elements to fit in a container element that is fixed to the size of the window?
I have a container element that is fixed position and flexbox, it does not stay within window. The menu is 50px and I want the main element to fill the remainder of the window height.
I have a container my-app and inside it, 2 vertically stacked elements (flex-direction = column). It works as expected in Chrome but not Edge or Firefox.
my-app {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
app-menu {
border-bottom: 2px solid black;
width: 100%;
height: 50px;
background: lightcoral;
box-sizing: border-box;
}
app-my-view {
display: flex;
flex: 1;
width: 100%;
background: lightgreen;
}
https://stackblitz.com/edit/2-column-scroll-v2
I've got it working by using a fixed position menu sticking to the top and using padding to offset menu height in the main content area. However I thought it would be better to use approach with 2 stacked elements without using fixed menu .
See here: https://stackblitz.com/edit/2-column-scroll-v1
I am currently working on customising my Big Cartel website and I've ran into the issue of the header image that scrolls with the page when using the Parade theme.
This is okay for my main shop page but for my Lookbook page, it is covering my content too much and I wish for it to either be hidden or stop scrolling.
Does anybody have a solution to this?
Thank you so much!
.header {
background-color: transparent;
padding: 50px;
position: fixed;
top: 0;
width: 100%;
z-index: 97;
}
#media screen and (max-width: 767px) {
.header {
padding: 20px;
}
}
.header.overlay-header {
position: relative;
}
.header .primary-header {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-ms-flex-pack: justify;
-webkit-justify-content: space-between;
justify-content: space-between;
margin-bottom: 15px;
}
.header .secondary-header {
margin: 0 auto;
text-align: center;
}
.header .header-center {
text-align: center;
}
Your header is fixed so it'll be in a fixed position relative to the viewport. Just make it relative or remove the position all together to make it static.
.header {
background-color: transparent;
padding: 50px;
position: relative;
top: 0;
width: 100%;
z-index: 97;
}
It'd be very beneficial to you to understand the position property going forward, so here's a small overview.
There are 5 different position values you need to know;
Static (default)
An element with position: static; is not positioned in any special
way; it is always positioned according to the normal flow of the page. This is the definition of position if you don't explicitly set one in your CSS.
Relative
An element with position: relative; is positioned relative to its
normal position where it falls in the hierarchy.
Setting the top, right, bottom, and left properties of a
relatively-positioned element will cause it to be adjusted away from
its normal position. Other content will not be adjusted to fit into
any gap left by the element.
Fixed
An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled. The top, right, bottom, and left properties are used
to position the element. If you set a navbar to fixed at the top, it'll always be at the top of the view. If you set a footer to fixed at the bottom, it'll always be at the bottom of the view and remain there when scrolling.
Absolute
An element with position: absolute; is positioned relative to the
nearest positioned ancestor (instead of positioned relative to the
viewport, like fixed).
However; if an absolute positioned element has no positioned
ancestors, it uses the document body, and moves along with page
scrolling.
Personally I recommend being a bit cautious with absolute
positioning and really only use it for overlays and layering as an
element positioned absolute will ignore the flow of the document.
In CSS, position: sticky enables an element to display with a position: static behaviour (ie. it adopts its default position within the document flow) until it reaches a certain scroll position, after which it adopts position: fixed behaviour.
So... does that mean we cannot use position: sticky on an element which requires a normal behaviour of position: absolute?
Context:
I have an out-of-flow element which occupies a position towards the top-left corner of the viewport. After an inch or two of scrolling, the element hits the top of the viewport and, ideally, I'd like it not to carry on disappearing at that point.
You actually can leverage display: grid and have a sticky element that doesn't pushes its siblings:
header {
display: flex;
align-items: center;
justify-content: center;
height: 50vh;
border: 1px dashed #f00;
}
main {
display: grid;
}
div {
display: flex;
align-items: center;
justify-content: center;
}
.section {
grid-column: 1;
height: 100vh;
border: 1px dashed #0f0;
}
.first.section {
grid-row: 1;
}
.sticky {
grid-row: 1;
grid-column: 1;
position: sticky;
top: 0;
height: 30vh;
border: 1px dashed #0ff;
}
footer {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
border: 1px dashed #f00;
}
<header>I'm the header</header>
<main>
<div class="sticky">I'm sticky</div>
<div class="first section">Just</div>
<div class="section">some</div>
<div class="section">sections</div>
</main>
<footer>I'm the footer</footer>
The trick here is to place the sticky section and its first sibling on the first row and first column of their parent (because grids allow us to place many elements in the same cell).
The sticky element remains sticky in its parent so it will stay on scroll beyond its cell.
As GibboK says, the default positioning scheme isn't absolute positioning, it's the static position. Elements are laid out in normal flow by default — if out-of-flow were the default, then the default HTML page would be impossible to read. Besides, absolutely positioned elements do scroll with the page most of the time — the only time you can make an absolutely positioned behave like a fixed positioned element with respect to page scrolling is through some semi-complicated CSS.
If you're asking whether it's possible for
a stickily positioned element to be out-of-flow when stuck and unstuck, or
for the containing block of a stickily positioned element to be determined the same way as for an absolutely positioned element,
then unfortunately neither of these is supported by sticky positioning.
The point of position:sticky is that it is only fixed while the parent element is not in view. A position:absolute element isn't attached to it's parent.
It could be interesting if such a position would exist and the rule would be that the element would be absolute, while the element it is absolute positioned to is in view, but currently there exists nothing like this nativley, but you could try to recreate it using JS.
A way to make a sticky element look like it's absolutely positioned
I came up with this hack that achieves the goal, but I haven't figured out how to fix its one flaw: There's a blank area at the bottom of the scrollable content equal to the height of the sticky element + its initial vertical offset.
See the comments in the code for an explanation of how it works.
#body {
width: 100%;
position: relative;
background: Linen;
font-family: sans-serif;
font-size: 40px;
}
/* to position your sticky element vertically, use the
height of this empty/invisible block element */
#sticky-y-offset {
z-index: 0;
height: 100px;
}
/* to position your sticky element horizontally, use the
width of this empty/invisible inline-block element */
#sticky-x-offset {
z-index: 0;
width: 100px;
display: inline-block;
}
/* this element is sticky so must have a static position,
but we can fake an absolute position relative to the
upper left of its container by resizing the invisible
blocks above and to the left of it. */
#sticky-item {
width: 150px;
height: 100px;
border-radius: 10px;
background-color: rgba(0, 0, 255, 0.3);
display: inline-block;
position: sticky;
top: -80px;
bottom: -80px;
}
/* this div will contain the non-sticky main content of
the container. We translate it vertically upward by
sticky-y-offset's height + sticky-item's height */
#not-sticky {
width: 100%;
background-color: rgba(0, 0, 255, 0.1);
transform: translateY(-200px);
}
.in-flow {
width: 90%;
height: 150px;
border-radius: 10px;
margin: 10px auto;
padding: 10px 10px;
background: green;
opacity: 30%;
}
<div id="body">
<div id="sticky-y-offset"></div>
<div id="sticky-x-offset"></div>
<div id="sticky-item">absolute & sticky</div>
<div id="not-sticky">
<div class="in-flow">in flow</div>
<div class="in-flow">in flow</div>
<div class="in-flow">in flow</div>
<div class="in-flow">in flow</div>
</div>
</div>