I try to make a web page that uses a fixed navbar and a list containing some sticky elements and an svg.
It works ok on my desktop in Firefox but is acting weird on my phone in Fennec (Firefox shows the same behavior while using the Responsive Design Tool (Ctrl + Shift + M)).
On scrolling down the fixed navbar and the sticky header scroll out of view and while scrolling up again the navbar and the header suddenly come into view again and stick to the top until the page is scrolled completely to the top.
When I remove the svg the desktop and the mobile browser show no difference regarding the stickiness.
What's wrong with the svg?Any idea how to fix that?
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
</head>
<body style="padding-top: 4.5rem;">
<nav style="position: fixed; top:0; height: 4.5rem; width:100%; background-color: #fa78;">
Status
</nav>
<main>
<div>
<div style="z-index: 10; position: -webkit-sticky; position: sticky; top: 4.5rem;">
<div style="background-color:#5558; color: white;">
Header 1
</div>
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
</div>
<div>
<div style="z-index: 10; position: -webkit-sticky; position: sticky; top: 4.5rem;">
<div style="background-color:#5558; color: white;">
Header 2
</div>
</div>
<div>
<svg width="590" height="250"></svg>
</div>
</div>
<div>
<div style="z-index: 10; position: -webkit-sticky; position: sticky; top: 4.5rem;">
<div style="background-color:#5558; color: white;">
Header 3
</div>
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
<div>
Lorem ipsum dolor sit amet, ...
</div>
</div>
</main>
</body>
</html>
File to test with svg: https://filebin.net/6ue8y9219gajvxnc/stickytestwithsvg.html
File to test without svg: https://filebin.net/6ue8y9219gajvxnc/stickytestwithoutsvg.html
(files expire on 2020-03-30)
Some css changes should work -
CSS
html{
height: 100%;
overflow: hidden;
}
body{
position: relative;
height: 100%;
overflow: auto;
box-sizing: border-box;
}
Related
here is a demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper {
height: 300px;
width: 500px;
overflow: scroll;
position: relative;
}
p {
margin-bottom: 20px;
}
span.tag {
position: absolute;
padding: 10px;
background-color: deepskyblue;
color: white;
}
.tl {
top: 0;
left: 0;
}
.tr {
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
<span class="tag tl">TopLeft</span>
<span class="tag tr">TopRight</span>
</div>
</body>
</html>
Basically I expected the four span.tag to stay the corner of the
div.wrapper viewport(it is so called I guess),because I've set div.wrapper position relative and span.tag position absolute , but when I scroll it, why it doesn't stay at the corner of viewport? is there anything about the overflow:scroll?
I thought div.wrapper has a height of 300px, so if the content of it has a larger height, a scroll-bar appear, we can scroll it, but what we scroll is the content, the wrapper doesn't move, so why the tag which set top:0 didn't stay at the top the wrapper?
[EDIT]
this is the result I want:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper {
height: 300px;
width: 500px;
position: relative;
}
.newlyAdded {
height: 100%;
overflow: scroll;
}
p {
margin-bottom: 20px;
}
span.tag {
position: absolute;
padding: 10px;
background-color: deepskyblue;
color: white;
}
.tl {
top: 0;
left: 0;
}
.tr {
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="newlyAdded">
<div class="content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<span class="tag tl">TopLeft</span>
<span class="tag tr">TopRight</span>
</div>
</div>
</body>
</html>
But I still don't know why.
you need to use position: fixed instead of absolute
https://developer.mozilla.org/en-US/docs/Web/CSS/position
a fixed element doesn't move also if you have a scrollbar
the behavior of fixed normally use the viewport, but if you use a position: relative; on the parent element,
you can get the behavior inside that element and not the page.
as you see is not the whole page, but inside the parent element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.wrapper {
height: 300px;
width: 500px;
overflow: scroll;
position: relative;
}
p {
margin-bottom: 20px;
}
span.tag {
position: fixed;
padding: 10px;
background-color: deepskyblue;
color: white;
}
.tl {
top: 0;
left: 0;
}
.tr {
top: 0;
right: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
<span class="tag tl">TopLeft</span>
<span class="tag tr">TopRight</span>
</div>
</body>
</html>
I have problem problem with centering element on mobile devices, when height decreases, top content is hidden but on desktop is okey. Please see below link for see problem in screenshot
Desktop version
Mobile version
HTML
<div class="modal">
<div class="modal-section">
<div class="modal-area">
<div class="header">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
<div class="items">
<div class="element">
<div class="img">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
</div>
<div class="element">
<div class="img">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.modal {
display: flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: oldlace;
color: #2F2F2F;
z-index: 99999;
overflow: auto;
}
.items {
display: flex;
margin: 20px 0;
justify-content: center;
}
.element {
overflow: hidden;
background: #2F2F2F;
color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
margin: 20px;
cursor: pointer;
width: 150px;
}
.img {
height: 150px;
}
example code
https://jsfiddle.net/twzud65n/3/
Seems like you have some elements that don't quite do something and have no styling applied to fit in. What is the suppose of modal-section?
Because you have position: fixed on your modal, you need to tell its children to not overflow their parent. width: 100% does that, height: auto means it can scale as much as needed allowing to scroll.
Try this:
.modal-section {
width: 100%;
height: auto;
}
It's because of justify-content: center which is centering your element (even if it's overflowing). You can turn it off and add margin:auto to .modal-section.
Example
.modal {
display: flex;
flex-flow: column nowrap;
align-items: center;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: oldlace;
color: #2F2F2F;
z-index: 99999;
overflow: auto;
}
.modal-section {
margin: auto;
}
.items {
display: flex;
margin: 20px 0;
justify-content: center;
}
.element {
overflow: hidden;
background: #2F2F2F;
color: #fff;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.75);
margin: 20px;
cursor: pointer;
width: 150px;
}
.img {
height: 150px;
}
<div class="modal">
<div class="modal-section">
<div class="modal-area">
<div class="header">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
<div class="items">
<div class="element">
<div class="img">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
</div>
<div class="element">
<div class="img">
<img src="https://via.placeholder.com/150" alt="">
</div>
<div class="desc">
Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet,
consectetur
</div>
</div>
</div>
</div>
</div>
</div>
I have a div with some content that's absolutely positioned and has an explicit height. When the content goes outside the height, a scroll bar appears, but it doesn't respect my width:auto - the scroll bars cover up the content.
Example:
<style>
#main {
height: 100px;
border: 1px solid red;
overflow-y: auto;
position: absolute;
}
</style>
<div id='main'>
<div>test</div>
<div>test</div>
<div>testiiiiiiiing</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
<div>test</div>
</div>
What's going on here? Is this browser bug? How can I make it correctly respect my automatic width?
You can use overflow-y: scroll;
<style>
#main {
height: 100px;
border: 1px solid red;
overflow-y: auto;
position: absolute;
padding-right: 10px;
}
#a {}
</style>
CodePen
Two possiblties occur to me although it's unlikely you will find many words being 100px wide.
First, just add some padding-right to make space for the scrollbar.
.main {
height: 100px;
border: 1px solid red;
overflow-y: auto;
position: absolute;
padding-right: 25px;
}
<div class="main">
<div class="a">Lorem ipsum.</div>
<div class="a">Lorem ipsum dolor sit.</div>
<div class="a">Lorem ipsum.</div>
<div class="a">Loremipsumdolorsitametconsecteturametconsectetur.</div>
<div class="a">Lorem</div>
<div class="a">Lorem ipsum.</div>
<div class="a">Lorem ipsum dolor sit.</div>
<div class="a">Lorem ipsum.</div>
<div class="a">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="a">Lorem</div>
</div>
Secondly, force all words to break if they reach that far edge using word-wrap: break-word;
.main {
height: 100px;
border: 1px solid red;
overflow-y: auto;
position: absolute;
padding-right: 25px;
}
.main.breaking {
padding-right: none;
word-wrap: break-word;
}
<div class="main breaking">
<div class="a">Lorem ipsum.</div>
<div class="a">Lorem ipsum dolor sit.</div>
<div class="a">Lorem ipsum.</div>
<div class="a">Loremipsumdolorsitametconsecteturametconsectet</div>
<div class="a">Lorem</div>
<div class="a">Lorem ipsum.</div>
<div class="a">Lorem ipsum dolor sit.</div>
<div class="a">Lorem ipsum.</div>
<div class="a">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="a">Lorem</div>
</div>
I am using Bootstrap3 for my responsive page design here. I am adding a box inside the banner content with some text inside it as follows:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<section id="slider">
<ul class="rslides" id="modest-slider">
<li class="slider-wrapper">
<div class="slider-img-container">
<img src="http://placehold.it/350x150&text=slider1" alt="slider1" />
</div>
<div class="slider-caption container">
<div class="col-md-7" style="border-left-width: 4px; top: auto; bottom: 126px; width: 600px; background: rgba(255, 255, 255, 0.6); height:130px;">
<h1>Exclusively New Concept!</h1>
<p class="slider-description2">
Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample...
</p>
</div>
</div>
<!-- /.slider-caption -->
</li>
<!-- /.slider-wrapper -->
</ui>
</section>
It is working fine in full screen. When I am resizing the browser the alignment is not working correctly. The box with content is not fit with the page. Any help will be appreciated!!
Try the solution with minor changes
Demo http://www.bootply.com/p6wIuR17QB
/* CSS used here will be applied after bootstrap.css */
#modest-slider {
position: relative;
}
.slider-caption {
position: absolute;
bottom: 0;
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<section id="slider">
<ul class="rslides list-unstyled" id="modest-slider" stye="position:relative;">
<li class="slider-wrapper">
<div class="slider-img-container">
<img src="http://placehold.it/600x300&text=slider1" alt="slider1" class="img-responsive">
</div>
<div class="slider-caption container">
<div class="col-xs-10 col-sm-8" style="background: rgba(255, 255, 255, 0.6);">
<h1>Exclusively New Concept!</h1>
<p class="slider-description2">
Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample...
</p>
</div>
</div>
<!-- /.slider-caption -->
</li>
<!-- /.slider-wrapper -->
</ul>
</section>
Try this:
<div class="row" >
<!-- changing width to 100% with 600px maximum -->
<div class="col-md-7" style="border-left-width: 4px; top: auto; bottom: 126px; width: 100%; max-width: 600px; background: rgba(255, 255, 255, 0.6); height:130px;">
<h1>Exclusively New Concept!</h1>
<p class="slider-description2">
Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample Lorem ipsum sample...
</p>
</div>
This will not make the height change though, for that try:
change "height:130px;" to "height: 100%; max-height: 130px;"
You really need to read more about how Bootstrap works though as this is not a good way to use it
First, you should not assign width to your div, in case you are using bootstrap.
<div class="col-md-7" style="...width: 600px...
Using class col-md-7 assign a particular width to your section, which is in %, so that when you resize your browser, the div resizes accordingly.
But, you overwrote the width with 600px, which is a fixed width and does not flex with browser resize.
This seems so trivial, but how do I make the background color or image of a div span the whole window, but keep the content in a wrapper or set width? Almost like a footer, or nav.
Like on this page in the footer, the gray and the lack parts go the whole across the page but any type is still in a set width that matches the rest of the page. Some pages have these in the middle and divide their whole page using this technique.
Thanks for any help!
For a content wrapper, make the wrapper div fixed width and use margin: 0 auto to center it horizontally - http://codepen.io/anon/pen/kwebf
<style type="text/css">
body {
background: #ff0000;
}
div {
margin: 0 auto;
width: 500px;
}
</style>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</body>
For fixed width content without a wrapper, put horizontal padding on your body - http://codepen.io/anon/pen/hoKdk
<style type="text/css">
body {
padding: 0 200px;
background: #ff0000;
}
</style>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
you could either wrap each section in an element (A) just to span across the page and prodive the background, and wrap the content in an element (B) to center it in A. like this:
<div id="main-wrap">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div id="footer-wrap">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<style>
#main-wrap {
background:red;
}
#footer-wrap {
background:green;
}
.content {
width:300px;
margin:0 auto;
}
</style>
or you could use an advanced solution similar to this one.
it really depends on your design and requirments