I have a simple HTML document with a height of 100vh. The element contains a title. Now when I scroll nothing happens as expected. What I need is an effect that the page stays the same and my title is scrolling up and out of the viewport. How can I achieve that?
My code simplified:
html,
body {
margin: 0;
padding: 0;
}
#wrapper {
background-color: red;
height: 100vh;
width: 100%;
}
h1 {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="wrapper">
<h1>Title</h1>
</div>
You can do it the opposite way - not fixing the to-be-scrolled element, but the contents element which you put into the background by using a negative z-index:
Apply position:fixed to the wrapper and move it to the background with z-index: -1. Erase position: absolute from the h1 to reset its position to static to allow it to scroll.
For the scrolling to be possible, you either need enough height for the title element (at least 150% or more), or another (possibly invisible) element that follows afterwards, like in my example below.
The text centering inside h1 can be done via flex (see below).
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
#wrapper {
position: fixed;
z-index: -1;
background-color: red;
height: 100vh;
width: 100%;
}
h1 {
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
margin: 0;
}
.something_else {
height: 100%;
}
<div id="wrapper"> wrapper contents here... </div>
<h1>Title</h1>
<div class="something_else"></div>
Related
So I have a CSS issue that I can't seem to get my head around. I have solved this in a number of ways none of which seem to pass WCAG Axe accessibility tests as it mentions overlapping of elements.
I have some text whose position is correct, but I want the background-color of the text to span the whole width of the page without altering the position of the text.
Here's a simple example of the issue I want to solve.
.container {
display: block;
margin: 0 auto;
width: 50%;
background: grey;
height: 100vh;
}
.content {
width: 100%;
background: green;
}
<div class="container">
<p class="content">this is some text I want this text to be positioned here but the green background to span the whole width </p>
</div>
My solution involved an extra absolute div with the background set, but that didn't pass accessibility. Any pointers would be great, I appreciate I'm probably being silly here.
You can add the following settings to .content: position: relative; and left: -50%; to move its left side to the left border, and a left and right padding of 50% to make it wider/full width of its parent and keep the text contents aligned with the .container element:
html,
body {
margin: 0;
}
.container {
display: block;
margin: 0 auto;
width: 50%;
background: grey;
height: 100vh;
}
.content {
width: 100%;
background: green;
position: relative;
left: -50%;
padding-left: 50%;
padding-right: 50%;
}
<div class="container">
<p class="content">this is some text I want this text to be positioned here but the green background to span the whole width </p>
</div>
Note that the added padding would not work if you somewhere have a box-sizing: border-box rule for all your elements. In this case you'd have to add box-sizing: content-box to the .content rule to reset this parameter to its default.
You can achieve this by so many ways, here I have used ::before pseudo element and without setting it's width apply left:-100% and right:-100%. Which is nothing but cover entire visible width.
.container {
display: block;
margin: 0 auto;
width: 50%;
background: grey;
height: 100vh;
}
.content {
position: relative;
width: 100%;
background: green;
}
.content::before {
content: "";
display: inline-block;
height: 100%;
background-color: green;
position: absolute;
top: 0;
right: -100%;
left: -100%;
z-index: -1;
}
<div class="container">
<p class="content">this is some text I want this text to be positioned here but the green background to span the whole width </p>
</div>
an idea using border-image
.container {
display: block;
margin: 0 auto;
width: 50%;
background: grey;
height: 100vh;
}
.content {
margin:0;
border-image: conic-gradient(green 0 0) fill 0//0 100vw;
}
<div class="container">
<p class="content">this is some text I want this text to be positioned here but the green background to span the whole width </p>
</div>
I have a very odd use case I'm trying to implement. I want to make an HTML element that will shrink as you scroll down (top edge will behave like position: sticky, and bottom will behave like position: absolute). I'm planning on using this element as a background for a header where I'll have some SVGs to form a landscape that as you scroll down the elements that are further in the background will be obscured by the closer elements (achieved by setting their positions based on percentage values). I can't see any way in CSS to set different positioning methods for different edges of an element.
Any advice on how to achieve this dynamic resizing effect? I'd prefer to use pure HTML and CSS if possible, but if JS is necessary to solve my problem then that's perfectly fine.
Here's my code so far:
HTML:
<header>
<nav> ... </nav>
<div id="hero">
<div class="bg">
<div class="item_1"></div>
<div class="item_2"></div>
<div class="item_3"></div>
</div>
<div id="hero-content">
...
</div>
</div>
</header>
Here, <div class="bg"> is the element I want to apply this behavior to.
Current CSS:
header {
}
#hero {
position: relative;
height: 90vh;
}
#hero .bg {
position: absolute;
bottom: 0;
height: 100%;
width: 100%;
z-index: -999;
}
#hero .bg .item-1 {
width: 100%;
height: 80%;
position: absolute;
bottom: 0;
}
#hero .bg .item-2 {
width: 100%;
height: 350px;
position: absolute;
bottom: 0;
}
#hero .bg .item-3 {
width: 150px;
height: 200px;
position: absolute;
bottom: 220px;
right: 5%;
}
#hero-content {
display: flex;
flex-flow: column nowrap;
justify-content: flex-end;
align-items: flex-start;
position: absolute;
bottom: 0;
left: 0;
margin: 1rem;
width: 70%;
}
I am trying to keep an element from scrolling past left: 0 using position: sticky. This works fine in some cases, but I have noticed that if the element width increases it stops working. For example, the following works:
#header {
position: sticky;
left: 0;
width: 50%;
background-color: #888;
}
#page {
height: 80vh;
width: 120vw;
background-color: #000;
}
<div>
<div id="header">
Where is my mind?
</div>
<div id="page">
</div>
</div>
But if I increase the witdth of header element to 100% it stops working.
#header {
position: sticky;
left: 0;
width: 100%;
background-color: #888;
}
#page {
height: 80vh;
width: 120vw;
background-color: #000;
}
<div>
<div id="header">
Where is my mind?
</div>
<div id="page">
</div>
</div>
Why does this happen? And is there any way to use position: sticky to prevent the header element from scrolling when it's width is 100%? I prefer not to use position: fixed in this case.
I now understand what is happening. The issue is the different way the browser treats the width and height of a <div>. The default values of auto mean that the width of the <div> is 100% while the height is set by the content. If the content is wider than 100%, then on horizontal scroll the sticky element hits the end of the container <div> and, since it cannot leave the confines of the container, begins to scroll. This doesn't happen in the same situation for vertical scrolling since the container <div> is as tall as the content by default.
To prevent this happening, we have to ensure that the container <div> is as wide as its content. This can be done in most browsers (not Edge or Explorer) by including width: max-content in the container style. Alternatively, as proposed in mfluehr's answer, putting overflow: auto creates a new block formatting context that is as wide as the content. Another option is to use display: inline-block or inline-flex etc. to cause the container <div> to base its width on the content.
For example, using two of these techniques, you can create headers, sidebars and footers that stick for a page that can scroll vertically and horizontally:
body {
padding: 0;
margin: 0;
}
#app {
overflow: auto;
height: 100vh;
}
#header {
background: blue;
width: 100%;
height: 40px;
position: sticky;
top: 0;
left: 0;
z-index: 10;
color: white;
}
#sidebar {
position: sticky;
background: green;
width: 200px;
height: calc(100vh - 40px);
top: 40px;
left: 0;
color: white;
flex-grow: 0;
flex-shrink: 0;
}
#container {
display: inline-flex;
}
#content {
background: #555;
height: 200vh;
width: 200vw;
background: linear-gradient(135deg, #cc2, #a37);
flex-grow: 0;
flex-shrink: 0;
}
#footer {
background: #000;
height: 100px;
z-index: 100;
left: 0;
position: sticky;
color: white;
}
<div id="app">
<div id="header" ref="header">
Header content
</div>
<div id="container">
<div id="sidebar" ref="sidebar">
Sidebar content
</div>
<div id="content" ref="content">
Page content
</div>
</div>
<div id="footer" ref="footer">
Footer content
</div>
</div>
This is an interesting problem. I don't know why, but putting overflow: auto on the container around the <div>s seems to fix the issue.
You can add height: 100vh to the container to let the content inside overflow with scrollbars.
body {
margin: 0;
}
#container {
overflow: auto;
height: 100vh;
}
#header {
position: sticky;
left: 0;
width: 100%;
background-color: #888;
}
#page {
height: 200vh;
width: 120vw;
background: linear-gradient(135deg, #cc2, #a37);
}
<body>
<div id="container">
<div id="header">
This is the header.
</div>
<div id="page">
Page content goes here.
</div>
</div>
</body>
I can't find a solution to this issue. I would like to have a footer that's always at the bottom (not sticky/fixed), and also a background that's always at the bottom (not sticky/fixed).
I made a picture to make it more clear: https://i.imgur.com/qVLb1bl.png
<html>
<div id="container">
<div class="content">
<h1>Content</h1>
</div>
<div class="footer">
<h2>Footer</h2>
</div>
</div>
</html>
CSS:
html, body { height: 100%; }
body { display: flex; flex-direction: column; background: url('http://www.freetoursbyfoot.com/wp-content/uploads/2013/08/New-York-Skyline-Downdown-view.jpg') no-repeat bottom center; }
#container { display: flex; flex-direction: column; height: 100%; }
.content { max-width: 800px; width: 100%; height: 400px; margin: 0 auto; background: #eee; margin-top: 20px; text-align: center; padding-top: 30px; }
.footer { max-width: 800px; width: 100%; height: 100px; background: #000; margin: auto auto 0 auto; }
I also made a codepen: https://codepen.io/nickm10/pen/XVJjGb
Anyone know the solution?
Thanks!
Since you are already using flexbox layout. There is something called as flex-grow (The flex-grow property specifies how much the item will grow relative to the rest of the flexible items inside the same container).
Just give:
.content{
-webkit-flex-grow: 1;
flex-grow: 1;
/** remove height **/
}
and remove height from .content.
Specify the decire height of the html page. Else the page is high enough to fit all of ur element;
html, body { height: 1000px; }
Use min-height: 100%; for html and body instead of height: 100%;
Updated answer:
html height should be set as min-height so it can grow when needed. But thanks to this body does not know the theight of parent (html) element and so we can't use % based min-height there anymore.
Thankfully we have viewport units. So for body set min-height: 100vh; This tells body to be minimally 100% of viewports height.
html { min-height: 100%; }
body { min-height: 100vh; margin: 0; }
PS! You also need to remove margin from body with this solution. Or there will be a scrollbar visible always.
Put background in body pseudo element and align it there.
body {
...
position: relative;
min-height: 100%;
...
}
body::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
background: url("http://www.freetoursbyfoot.com/wp-content/uploads/2013/08/New-York-Skyline-Downdown-view.jpg")
no-repeat bottom center;
pointer-events: none;
z-index: -1;
}
Here is a codepen: codepen.io/anon/pen/vpEgxo
Hope this will help ;)
I need to make a child div leak the parent container max width.
Now, i can only leak parent padding (knowing it).
I need this to wrap all the page on a container and make some sections leak.
Without this, i will need to set the container on every section.
Here is some snippets
Better snippet on codepen
.container {
max-width: 500px;
margin: 0 auto;
padding: 0 30px;
background: lightblue;
}
.child {
background: lightcoral;
height: 200px;
}
.child.cancel-padding {
margin: 0 -30px;
}
.child.leaked {
}
html,
body {
margin: 0;
padding: 0;
}
* {
text-align: center;
font-family: sans-serif;
}
<small>note: see in fullscreen or on codepen</small>
<h1>what i have</h1>
<div class="container">
<div class="child">A element inside a container</div>
</div>
<h1>what i need</h1>
<div class="container-leaked">
<div class="child leaked">
a element inside the container, but leaking all view width (100vw)
</div>
</div>
<h1>what i can do now</h1>
<div class="container">
<div class="child cancel-padding">Make the element cancel the parent padding, that's all</div>
</div>
<h1>Why i need</h1>
<p>
i will wrap all the page in the container, but sometimes i need sections to leak the container with full view width.
</p>
Note: on the demo, i've set the child height, but i will not have control of it. it's a dynamic content div, so height is dynamic.
You can do it by using relative positioning. Indeed, you need position: relative on your container and your child -leak. Then, to center your child, you use
left: 50%;
transform: translateX(-50%);
This works because your container is centered. So left: 50% will move the child left edge to 50% of its parent width from its initial position (which mean the center of its parent). Then, transform: translateX(-50%) will move the left edge of your child 50% of its width on the left. You then just need to add width: 100vw to make your child full width. Here is the snippet:
.page {
position: relative;
}
.container {
max-width: 100px;
margin: 0 auto;
padding: 0 30px;
background: lightblue;
position: relative;
}
.child-leak {
height: 200px;
background: lightcoral;
position: relative;
left: 50%;
transform: translateX(-50%);
padding: 10px;
width: 100vw;
}
html, body{
margin: 0;
padding: 0;
text-align: center;
font-family: sans-serif;
}
<div class="page">
<h1>My title</h1>
<div class="container">
<div class="child-leak">
My full width child
</div>
</div>
<div>Below content</div>
</div>
This technique for horizontally center an element works also for vertical centering. This works because a value in % for top, left, right and bottom refers to the first non static parent width and height. On the other hand, translate with a value in % use the element width and height.
This may be a little bit of a hack, but I've done it before by adding ::before and ::after. Add position: relative to the .child and then add the following css
.child.leaked:before{
content:"";
display: block;
position: absolute;
height: 100%;
width: 100%;
left: -100%;
background-color: red;
top: 0;
}
.child.leaked:after{
content:"";
display: block;
position: absolute;
height: 100%;
width: 100%;
right: -100%;
background-color: red;
top: 0;
}
Here is an approach you can try:
.container {
max-width: 500px;
margin: 0 auto;
padding: 0 30px;
background: lightblue;
}
.child {
background: lightcoral;
height: 200px;
width: 400%;
margin-left: -150%; /* (width of child - 100) / 2 */
}
html,
body {
margin: 0;
padding: 0;
overflow: hidden; /* prevent horizontal scroll bar */
}
* {
text-align: center;
font-family: sans-serif;
}
<div class="container">
<div class="child">I am outside the parent</div>
</div>