I am having trouble with the following html and css trying to get the z-index to keep my secondary-panel on top of the scroll but still static with its content.
JSFiddle - without scroll bar: https://jsfiddle.net/kyp0gd2r/1/
JSFiddle - with scroll bar: https://jsfiddle.net/kyp0gd2r/2/
HTML & CSS:
body {
background: green;
}
.single-pump-view-container-wrapper {
position: relative;
border: 3px solid purple;
height: calc(100% - 3px);
}
.inner-wrapper {
display: flex;
margin: 0 0 0 1em;
height: calc(100% - 2em - 3px);
overflow: hidden;
}
.single-pump-controller {
width: 290px;
background: yellow;
}
.data-channel-panel-area {
margin: 1em 10px 0 10px;
width: 570px;
background: blue;
overflow-y: auto;
overflow-x: hidden;
}
.container-wrapper {
position: relative;
width: 534px;
margin-bottom: 18px;
}
.secondary-panel {
position: absolute;
left: calc(100% - 120px);
top: 15px;
width: 300px;
height: 30px;
background: red;
z-index: 999;
}
.right-area {
display: flex;
flex-direction: column;
flex: 1 1 0%;
box-sizing: border-box;
padding-right: 18px;
padding-top: 1em;
width: 100%;
background: gray;
}
div {
display: block;
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
<body>
<div style="padding: 0px 5px;height: calc(100% - 135px);">
<div class="single-pump-view-container-wrapper">
<div class="inner-wrapper">
<div class="single-pump-controller">left</div>
<div class="data-channel-panel-area">
<div class="container-wrapper">
<p>Title Goes Here</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet nisi eget metus vestibulum gravida. Praesent pulvinar hendrerit est, et eleifend sem vulputate id. Suspendisse ex purus, vestibulum ut enim ut, euismod finibus ex. Curabitur a sapien in est malesuada sollicitudin. Donec aliquam odio nec lacinia interdum. Morbi luctus imperdiet libero, id placerat velit consectetur vitae. Nulla congue ut mi id tincidunt. Vestibulum dolor ipsum, auctor tristique nisl sed, tincidunt mollis risus. Suspendisse sollicitudin, nisl vel semper gravida, neque lectus laoreet erat, quis fermentum dui tortor a nibh. Donec sed massa volutpat, pharetra lacus eget, tempus mauris. Nam sed posuere ipsum, a porta leo. Vestibulum a odio ut quam tristique mollis. Morbi tristique faucibus elementum. Morbi nibh est, dapibus ut libero nec, mattis cursus ligula.</p>
<div class="secondary-panel">ssss</div>
</div>
<div class="container-wrapper">
<p>Title Goes Here</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet nisi eget metus vestibulum gravida. Praesent pulvinar hendrerit est, et eleifend sem vulputate id. Suspendisse ex purus, vestibulum ut enim ut, euismod finibus ex. Curabitur a sapien in est malesuada sollicitudin. Donec aliquam odio nec lacinia interdum. Morbi luctus imperdiet libero, id placerat velit consectetur vitae. Nulla congue ut mi id tincidunt. Vestibulum dolor ipsum, auctor tristique nisl sed, tincidunt mollis risus. Suspendisse sollicitudin, nisl vel semper gravida, neque lectus laoreet erat, quis fermentum dui tortor a nibh. Donec sed massa volutpat, pharetra lacus eget, tempus mauris. Nam sed posuere ipsum, a porta leo. Vestibulum a odio ut quam tristique mollis. Morbi tristique faucibus elementum. Morbi nibh est, dapibus ut libero nec, mattis cursus ligula.</p>
<div class="secondary-panel">ssss</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet nisi eget metus vestibulum gravida. Praesent pulvinar hendrerit est, et eleifend sem vulputate id. Suspendisse ex purus, vestibulum ut enim ut, euismod finibus ex. Curabitur a sapien in est malesuada sollicitudin. Donec aliquam odio nec lacinia interdum. Morbi luctus imperdiet libero, id placerat velit consectetur vitae. Nulla congue ut mi id tincidunt. Vestibulum dolor ipsum, auctor tristique nisl sed, tincidunt mollis risus. Suspendisse sollicitudin, nisl vel semper gravida, neque lectus laoreet erat, quis fermentum dui tortor a nibh. Donec sed massa volutpat, pharetra lacus eget, tempus mauris. Nam sed posuere ipsum, a porta leo. Vestibulum a odio ut quam tristique mollis. Morbi tristique faucibus elementum. Morbi nibh est, dapibus ut libero nec, mattis cursus ligula.</p>
</div>
</div>
<div class="right-area"></div>
</div>
</div>
</div>
</body>
Stack-blitz version: (Did this one to test that it was not angular causing my issue, also closest to actual code)
https://stackblitz.com/edit/angular-ivy-wezlub?file=src%2Fstyles.css
In .data-channel-panel-area, overflow-y: auto; cannot be used in combination with e.g. overflow-x: visible;. See MDN:
Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto
auto will scroll on overflow. One alternative would be to set both axes to visible, then implement your own scrollbar for .data-channel-panel-area, though it may not be worth going that far. Another approach might be to move .secondary-panel elements out of .data-channel-panel-area, then position them with a JavaScript scroll event.
In any case, consider that it might be bad UX to have an element appearing over a scrollbar and under probably wouldn't look good.
This will solve your problem
var secondary_panel = document.getElementsByClassName('secondary-panel');
document.getElementsByClassName('data-channel-panel-area')[0].addEventListener('scroll', function() {
var scrolled = this.scrollTop;
if (scrolled >= 18 && scrolled <= 231) {
secondary_panel[0].style.position = "fixed";
secondary_panel[0].style.top = scrolled * 0.0001 + 'px';
secondary_panel[0].style.marginTop = "25px";
secondary_panel[0].style.marginLeft = "-240px";
} else {
secondary_panel[0].style.position = "absolute";
secondary_panel[0].style.top = '15px';
secondary_panel[0].style.marginTop = "0px";
secondary_panel[0].style.marginLeft = "0px";
}
if (scrolled >= 286 && scrolled <= 490) {
secondary_panel[1].style.position = "fixed";
secondary_panel[1].style.top = scrolled * 0.0001 + 'px';
secondary_panel[1].style.marginTop = "25px";
secondary_panel[1].style.marginLeft = "-240px";
} else {
secondary_panel[1].style.position = "absolute";
secondary_panel[1].style.top = '15px';
secondary_panel[1].style.marginTop = "0px";
secondary_panel[1].style.marginLeft = "0px";
}
})
body {
background: green;
}
.single-pump-view-container-wrapper {
position: relative;
border: 3px solid purple;
height: calc(100% - 3px);
}
.inner-wrapper {
display: flex;
margin: 0 0 0 1em;
height: calc(100% - 2em - 3px);
overflow: hidden;
}
.single-pump-controller {
width: 290px;
background: yellow;
}
.data-channel-panel-area {
margin: 1em 10px 0 10px;
width: 570px;
background: blue;
overflow-y: auto;
overflow-x: hidden;
}
.container-wrapper {
position: relative;
width: 534px;
margin-bottom: 18px;
}
.secondary-panel {
position: absolute;
left: calc(100% - 120px);
top: 15px;
width: 300px;
height: 30px;
background: red;
z-index: 999;
}
.right-area {
display: flex;
flex-direction: column;
flex: 1 1 0%;
box-sizing: border-box;
padding-right: 18px;
padding-top: 1em;
width: 100%;
background: gray;
}
div {
display: block;
}
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
<body>
<div style="padding: 0px 5px;height: calc(100% - 135px);">
<div class="single-pump-view-container-wrapper">
<div class="inner-wrapper">
<div class="single-pump-controller">left</div>
<div class="data-channel-panel-area">
<div class="container-wrapper">
<p>Title Goes Here</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet nisi eget metus vestibulum gravida. Praesent pulvinar hendrerit est, et eleifend sem vulputate id. Suspendisse ex purus, vestibulum ut enim ut, euismod finibus ex. Curabitur
a sapien in est malesuada sollicitudin. Donec aliquam odio nec lacinia interdum. Morbi luctus imperdiet libero, id placerat velit consectetur vitae. Nulla congue ut mi id tincidunt. Vestibulum dolor ipsum, auctor tristique nisl sed, tincidunt
mollis risus. Suspendisse sollicitudin, nisl vel semper gravida, neque lectus laoreet erat, quis fermentum dui tortor a nibh. Donec sed massa volutpat, pharetra lacus eget, tempus mauris. Nam sed posuere ipsum, a porta leo. Vestibulum a
odio ut quam tristique mollis. Morbi tristique faucibus elementum. Morbi nibh est, dapibus ut libero nec, mattis cursus ligula.</p>
<div class="secondary-panel">ssss</div>
</div>
<div class="container-wrapper">
<p>Title Goes Here</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet nisi eget metus vestibulum gravida. Praesent pulvinar hendrerit est, et eleifend sem vulputate id. Suspendisse ex purus, vestibulum ut enim ut, euismod finibus ex. Curabitur
a sapien in est malesuada sollicitudin. Donec aliquam odio nec lacinia interdum. Morbi luctus imperdiet libero, id placerat velit consectetur vitae. Nulla congue ut mi id tincidunt. Vestibulum dolor ipsum, auctor tristique nisl sed, tincidunt
mollis risus. Suspendisse sollicitudin, nisl vel semper gravida, neque lectus laoreet erat, quis fermentum dui tortor a nibh. Donec sed massa volutpat, pharetra lacus eget, tempus mauris. Nam sed posuere ipsum, a porta leo. Vestibulum a
odio ut quam tristique mollis. Morbi tristique faucibus elementum. Morbi nibh est, dapibus ut libero nec, mattis cursus ligula.</p>
<div class="secondary-panel">ssss</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet nisi eget metus vestibulum gravida. Praesent pulvinar hendrerit est, et eleifend sem vulputate id. Suspendisse ex purus, vestibulum ut enim ut, euismod finibus ex. Curabitur
a sapien in est malesuada sollicitudin. Donec aliquam odio nec lacinia interdum. Morbi luctus imperdiet libero, id placerat velit consectetur vitae. Nulla congue ut mi id tincidunt. Vestibulum dolor ipsum, auctor tristique nisl sed, tincidunt
mollis risus. Suspendisse sollicitudin, nisl vel semper gravida, neque lectus laoreet erat, quis fermentum dui tortor a nibh. Donec sed massa volutpat, pharetra lacus eget, tempus mauris. Nam sed posuere ipsum, a porta leo. Vestibulum a
odio ut quam tristique mollis. Morbi tristique faucibus elementum. Morbi nibh est, dapibus ut libero nec, mattis cursus ligula.</p>
</div>
</div>
<div class="right-area"></div>
</div>
</div>
</div>
</body>
Related
I have content on page and I would like to make both sidebars to be sticky, something like:
I am using flex:
<div className="homePageFeed">
<div className="homePageFeedWrapper">
<HomePageFeedMenu/>
<HomePageFeedContent/>
<HomePageFeedUtil/>
</div>
</div>
.homePageFeed{
position: relative;
width: 100%;
}
.homePageFeedWrapper{
display: flex;
align-items: center;
position: relative;
height: 100%;
padding-left: 22px;
padding-right: 16px;
z-index: 30;
flex-direction: row;
}
Other components, left-sidebar:
const HomePageFeedMenu = () => {
return (
<div className="homeFeedMenu">
<ol>
<li> Mammals</li>
<li> Lizards</li>
<li> Birds</li>
<li> Spiders</li>
</ol>
</div>
)
}
export default HomePageFeedMenu;
.homeFeedMenu{
flex: 10 0 0;
width: 100%;
height: 500px;
border-right: 1px solid hsl(210,8%,35%);
}
ol{
list-style: none;
}
li{
color: hsl(210,8%,35%);
margin: 0;
}
Scrollable content ( with test item in it ):
const HomePageFeedContent = () => {
return (
<div className="homeFeedContent">
<div className="homeFeedItem">
<div className="content">
<div className="homeFeedItemTitle"><p>Animal name</p></div>
<div className="homeFeedItemContent">
Animal description
</div>
<div className="homeFeedItemMetaInfo">Age and adoption info</div>
</div>
<div className="img">Animal picture</div>
</div>
</div>
)
}
.homeFeedContent{
padding-top: 25px;
flex: 70 0 0;
width: 100%;
border-right: 1px solid hsl(210,8%,35%);
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.homeFeedItem{
width: 90%;
height: 200px;
display: flex;
margin-top:25px;
flex-direction: row;
justify-content: center;
border-bottom: 1px solid hsl(210,8%,35%);;
}
.content{
flex: 80 80 0;
display: flex;
flex-direction: column;
}
.img{
flex: 20 20 0;
width: 100%;
height: 100%;
border: 1px solid black;
}
.homeFeedItemTitle{
width: 100%;
flex: 20 20 0;
}
.homeFeedItemContent{
width: 100%;
flex: 60 60 0;
border-bottom: 1px hsl(210,8%,35%);;
}
.homeFeedItemMetaInfo{
width: 100%;
flex: 20 20 0;
}
export default HomePageFeedContent;
And right static sidebar
const HomePageFeedUtil = () => {
return (
<div className="homeFeedUtil">
</div>
)
}
export default HomePageFeedUtil;
.homeFeedUtil{
flex: 20 0 0;
width: 100%;
height: 500px;
}
Now I am trying to use sticky positioning for both sidebars, however, it does not work as they are part of the flexbox. I would also like to fix their height, as you can see I attempted to use 500px, hover when the middle flex element gets lots of element and the site become scrollable, it readjusts the position of both sidebars ( as they have fixed height ) and thus their content does not appear on top of it "column".
Are there any tricks to use both, flex and sticky positioning? Or do I need to do it without flex?
Thanks for the help!
I'd not use flexbox. I'd use position: sticky for the top then position: fixed for each sidebar. Use css variables to work out the width of the scrollable area. Here's an example:
body {
box-sizing: border-box;
margin: 0;
}
.main-container {
--header-height: 50px;
--header-gap: 0.5rem;
--sidebar1-width: 200px;
--sidebar2-width: 100px;
--sidebar-gap: 0.5rem;
}
.sticky-header {
position: sticky;
height: var(--header-height);
background-color: lightblue;
border: 1px solid blue;
top: 0;
z-index: 1;
}
.sticky-sidebar1 {
position: fixed;
top: var(--header-height);
left: 0;
width: var(--sidebar1-width);
height: calc(100vh - var(--header-height));
background-color: lightgreen;
border: 1px solid darkgreen;
}
.sticky-sidebar2 {
position: fixed;
top: var(--header-height);
right: 0;
width: var(--sidebar2-width);
height: calc(100vh - var(--header-height));
background-color: lightpink;
border: 1px solid darkred;
}
.scrollable-content {
border: 1px solid red;
padding: 0.25rem;
overflow: hidden;
margin-left: calc(var(--sidebar1-width) + var(--sidebar-gap));
margin-right: calc(var(--sidebar2-width) + var(--sidebar-gap));
margin-top: var(--header-gap);
}
#media only screen and (max-width: 600px) {
.main-container {
--sidebar1-width: 100px;
--sidebar2-width: 0px;
}
}
<div class='main-container'>
<div class="sticky-header">Sticky Header</div>
<div class="sticky-sidebar1">Sticky Sidebar1</div>
<div class="sticky-sidebar2">Sticky Sidebar2</div>
<div class="scrollable-content">
<h1>Scrollable Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. In eu mi bibendum neque egestas congue quisque egestas. Adipiscing enim eu turpis egestas
pretium.
Accumsan sit amet nulla facilisi morbi tempus iaculis urna id. In massa tempor nec feugiat nisl. Mattis nunc
sed
blandit libero volutpat sed. Magna ac placerat vestibulum lectus mauris ultrices eros in. Senectus et netus et
malesuada fames ac turpis egestas. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel elit
scelerisque mauris pellentesque pulvinar. Egestas egestas fringilla phasellus faucibus scelerisque eleifend
donec pretium. Tristique risus nec feugiat in fermentum posuere urna nec tincidunt. Lectus vestibulum mattis
ullamcorper velit sed. Risus ultricies tristique nulla aliquet enim tortor at auctor. Vitae congue mauris
rhoncus aenean vel elit scelerisque mauris pellentesque. Lacus suspendisse faucibus interdum posuere lorem
ipsum
dolor. Suspendisse interdum consectetur libero id. Vestibulum lorem sed risus ultricies tristique nulla
aliquet.
Nunc eget lorem dolor sed viverra ipsum nunc. Diam sit amet nisl suscipit adipiscing bibendum est.
Diam phasellus vestibulum lorem sed risus ultricies tristique. Ultrices sagittis orci a scelerisque. Iaculis
at
erat pellentesque adipiscing commodo elit at imperdiet dui. Donec enim diam vulputate ut pharetra sit.
Fringilla
urna porttitor rhoncus dolor purus. Turpis massa tincidunt dui ut ornare lectus. Et netus et malesuada fames
ac
turpis egestas maecenas pharetra. Malesuada nunc vel risus commodo viverra maecenas. Purus sit amet volutpat
consequat mauris nunc. Vel fringilla est ullamcorper eget nulla. Duis ultricies lacus sed turpis tincidunt id
aliquet risus. Arcu ac tortor dignissim convallis aenean et. Elementum nibh tellus molestie nunc non blandit
massa.
Magna sit amet purus gravida quis. Amet tellus cras adipiscing enim eu turpis egestas pretium aenean. Sagittis
nisl rhoncus mattis rhoncus urna neque. Feugiat scelerisque varius morbi enim nunc faucibus. Parturient montes
nascetur ridiculus mus mauris vitae ultricies leo. Enim nulla aliquet porttitor lacus luctus accumsan tortor
posuere. Rhoncus aenean vel elit scelerisque mauris pellentesque. Velit aliquet sagittis id consectetur purus.
Id porta nibh venenatis cras sed felis eget velit aliquet. Mattis nunc sed blandit libero. Suspendisse in est
ante in. Duis at tellus at urna condimentum mattis. Consequat semper viverra nam libero justo laoreet sit amet
cursus.
Sed turpis tincidunt id aliquet risus feugiat. Aliquam purus sit amet luctus. Suspendisse faucibus interdum
posuere lorem. Cursus turpis massa tincidunt dui ut ornare. Donec ultrices tincidunt arcu non sodales. Tellus
integer feugiat scelerisque varius morbi enim nunc faucibus. Leo integer malesuada nunc vel risus. Ut pharetra
sit amet aliquam id diam. Condimentum vitae sapien pellentesque habitant morbi tristique. Vestibulum lectus
mauris ultrices eros. Aenean sed adipiscing diam donec adipiscing tristique risus. Nulla aliquet porttitor
lacus
luctus accumsan tortor. Semper feugiat nibh sed pulvinar. Placerat in egestas erat imperdiet sed.
Pulvinar pellentesque habitant morbi tristique senectus et netus. Vitae turpis massa sed elementum tempus
egestas sed. Aliquam sem et tortor consequat id porta nibh venenatis cras. Orci dapibus ultrices in iaculis
nunc
sed augue lacus. Blandit turpis cursus in hac habitasse platea. Volutpat blandit aliquam etiam erat velit
scelerisque. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Lectus sit amet est placerat. Eu mi
bibendum neque egestas congue. Dictum non consectetur a erat nam at. Facilisis magna etiam tempor orci eu
lobortis. Sit amet venenatis urna cursus eget nunc. Sed risus pretium quam vulputate dignissim suspendisse.
Vivamus at augue eget arcu dictum. Ultricies tristique nulla aliquet enim tortor. Gravida neque convallis a
cras
semper auctor neque.
Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Est lorem ipsum dolor sit amet. Tempor
orci dapibus ultrices in iaculis nunc. Lorem ipsum dolor sit amet consectetur adipiscing. Volutpat diam ut
venenatis tellus in metus vulputate eu. Sed nisi lacus sed viverra tellus. Penatibus et magnis dis parturient.
Ipsum consequat nisl vel pretium lectus quam. Mollis aliquam ut porttitor leo a diam. Cras sed felis eget
velit.
Euismod lacinia at quis risus. Neque viverra justo nec ultrices dui. Pellentesque habitant morbi tristique
senectus et netus et. Pharetra vel turpis nunc eget lorem dolor. Ac auctor augue mauris augue neque gravida
in.
</p>
</div>
</div>
For the result you are looking for you would need to use position: fixed; in your css for all 3 elements you want to be fixed;
For your top header it would be something like:
#enterIDhere {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
margin: 0 auto;
}
For your left sidebar it would be something like:
#EnterIDhere {
position: fixed;
left: 0;
bottom: 0;
}
and last but not least your right sidebar would need something like:
#EnterIDhere {
position: fixed;
right: 0;
bottom: 0;
}
When centering the #outer div, the scrollbar starts not on the top left of the element but on the center. It becomes impossible to read the beginning of the text, and a part of the border is cut off.
How could I center and be able to scoll and see all content, including the border, when the content #outer is larger than the parent #container, using css?
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
width: 100%;
height: 100%;
display: grid;
place-content: center;
}
#outer {
width: max-content;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
This may be because of display:grid;
, because when I removed that, the content is showing itself fully.
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
overflow-x:scroll;
width: 100%;
height: 100%;
place-content: center;
}
#outer {
width: max-content;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
I don't know much about grid, but I think another fix might be the width;
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
#container {
width:100%;
height: 100%;
display: grid;
place-content: center;
}
#outer {
width:100%;
border: 1rem solid black;
padding: 2rem;
}
#inner {
background-color: red;
}
<div id="container">
<div id="outer">
<div id="inner">The beginning of this text is missing. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pulvinar ex ut volutpat iaculis. Mauris a tellus vel mauris ullamcorper semper quis non quam. Nullam in scelerisque dolor, vel cursus odio. Nulla dignissim imperdiet mauris eleifend ultricies. Sed auctor tortor nec neque mollis feugiat. Aliquam tincidunt lacus at dictum elementum. Aliquam nunc lacus, lobortis vitae finibus et, vehicula eget nibh. Suspendisse eget tincidunt quam. In posuere quam ac neque sagittis, at finibus ante dignissim. Proin magna enim, bibendum quis pulvinar eget, porttitor non dui. Sed mollis placerat sem, id condimentum libero tempor quis. Maecenas ultrices tellus vel nisi mattis, sit amet scelerisque urna gravida. Nullam eu ipsum vitae eros pulvinar fringilla id ut massa. Fusce vitae rhoncus nulla.</div>
</div>
</div>
But I don't know if you want it on separate lines.
The following code results in the scrollbar not being clickable and/or draggable, and this happens arbitrarily in Chrome only.
Is there anything obvious in the code that's causing this?
- If so, how should be fixed?
- If not, how do I continue to troubleshoot it?
I tried working the Chrome debugger but clicking on the sidebar does not reveal anything useful.
html {
max-width: 780px;
margin: 0 auto;
}
body {
background-image:url('https://img.freepik.com/free-vector/retro-styled-pattern-background_1048-6593.jpg');
background-size: 116px;
background-repeat:repeat-x;
}
header {
display:flex;
flex-wrap: wrap;
justify-content:space-between;
align-items:center;
margin-bottom:23px;
}
#logo {
margin-left:15px;
}
#forum-link {
max-width:110px;
margin-right:35px;
}
#forum-link a{
color:white;
text-decoration:none;
font-weight:bold;
font-size:x-large;
}
footer
{
text-align:center;
font-size:small;
}
#media only screen and (orientation: portrait) {
html{
margin: 0;
height: 100%;
}
body{
margin: 0;
height: 100%;
display: flex;
flex-flow: column;
}
header{
display: block;
width: 100%;
position: relative;
height: auto;
margin-bottom: 50px;
}
#logo {
margin:initial;
display:flex;
align-items: center;
justify-content:center;
}
#forum-link {
margin: initial;
max-width:initial;
background:#323232;
height: 27px;
position: absolute;
bottom: -50px;
width: 100%;
display:flex;
align-items: center;
justify-content:center;
}
#forum-link a{
font-weight:bold;
font-size:.9em;
}
#forum-link a:hover{
text-decoration:underline;
}
#content{
flex: 1;
margin: 0px 20px 0px 20px;
}
<body>
<header>
<div id="logo"><img src="http://placekitten.com/g/354/85" srcset="http://placekitten.com/g/354/85 1x, http://placekitten.com/g/354/85 2x" width="354" height="85"></div>
<div id="forum-link">Join our Forums!</div>
</header>
<div id="content">
<h1>Lorem Ipsum</h1>
<h2>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h2>
<h3>"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae aliquam mi. Nam in dictum nulla. Donec sit amet mollis nunc. Aliquam a elit quis felis finibus accumsan. Vivamus vel pellentesque mauris. Integer et commodo lectus. Donec fermentum urna ac lorem euismod fermentum. Aliquam porttitor, lacus id consectetur auctor, velit est mollis risus, iaculis aliquet massa massa in velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur et semper orci, sed rhoncus purus. Cras rhoncus accumsan libero nec sagittis. Proin ac ipsum suscipit tortor tincidunt malesuada et at sapien. Morbi mollis ultricies lacus ut blandit.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pellentesque sagittis mi. Proin commodo tempor sem at euismod. Nam vel porta mauris. Nunc rutrum libero vitae dui tincidunt, eget condimentum mi semper. Cras gravida nunc vel pulvinar tempor. Nunc rhoncus rutrum justo, vel facilisis ex fringilla in. Sed posuere ex non eros ultrices varius.
<p>
Fusce vestibulum quis arcu ac dapibus. Maecenas felis ante, auctor sed congue ut, convallis a arcu. Nunc vel maximus quam. Nam mauris purus, commodo et leo vel, volutpat sollicitudin libero. Mauris porta lectus nibh, et suscipit ipsum condimentum elementum. Sed sem lectus, aliquet id condimentum id, maximus eget felis. Sed ornare augue libero, eget hendrerit sem porttitor vitae. Ut porttitor vehicula dapibus. Suspendisse at accumsan orci.
<p>
In ante eros, condimentum id elit quis, sagittis bibendum arcu. Phasellus in metus quam. Sed gravida condimentum mi sit amet molestie. Ut blandit tempus libero ut porta. Sed blandit sem eget mi rutrum, at lacinia risus efficitur. Duis rhoncus porta lacus, scelerisque scelerisque tellus sodales quis. Nunc maximus ex et placerat commodo. Curabitur quis bibendum tortor. Sed condimentum vel urna laoreet mollis. Quisque molestie orci sed sodales porttitor.
<p>
Morbi ipsum erat, varius eu eros id, porta vestibulum nulla. In mattis dolor nisi, ut luctus dolor cursus a. Phasellus tempor diam enim, a accumsan justo dignissim sit amet. Vestibulum congue, arcu non accumsan rutrum, tortor augue sodales lacus, eu fermentum leo odio eu nibh. Cras non urna non leo imperdiet varius. Vestibulum eget magna metus. Curabitur eu tempor magna.
</div>
<footer>
<div id="copyright">© Copyright text</div>
</footer>
</body>
</html>
I have a web page with a fixed header.
As you can see from the snippet below, the page isn't necessarily as wide as the viewport. To ensure the header width remains in sync with the rest of the page (and doesn't overflow), I use the following CSS on the app bar:
max-width: inherit;
width: inherit;
Simple fixed header example:
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.main {
background-color: aqua;
padding-top: 64px;
}
.app-bar {
background-color: red;
height: 64px;
max-width: inherit;
position: fixed;
top: 0;
width: inherit;
}
<div class="page">
<div class="app-bar">App bar</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam vitae
sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula turpis
arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
However, I need to make some changes to the page structure to allow a full-height fixed left nav drawer. In order to do so, I need to create space by shifting the entire content to the right.
Required fixed header functionality:
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.app-content {
margin-left: 150px;
width: calc(100% - 150px);
}
.main {
background-color: aqua;
padding-top: 64px;
}
.app-bar {
background-color: red;
height: 64px;
max-width: inherit;
position: fixed;
top: 0;
width: inherit;
}
<div class="page">
<div class="app-content">
<div class="app-bar">App bar</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
</div>
As you can see, the result is that the app-bar doesn't sync across the full width - instead it overflows the page container.
If I remove the width from app-content, the app-bar shrinks to it's content width.
What I'm looking for is to make the app-bar the same width as the app-content container, as it does in the first snippet.
Any advice appreciated as I'm running out of ideas.
Since width of your page is constant you can just give the app-bar it's desired width in this case 250px if I'm understanding you correctly:
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.app-content {
margin-left: 150px;
width: calc(100% - 150px);
}
.main {
background-color: aqua;
padding-top: 64px;
}
.app-bar {
background-color: red;
height: 64px;
max-width: 250px;
position: fixed;
top: 0;
width: inherit;
}
<div class="page">
<div class="app-content">
<div class="app-bar">App bar</div>
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
</div>
I don't know whether you can do that due to browser compatibility, but I would suggest using position: sticky.
.page {
background-color: yellow;
margin: 0 auto;
max-width: 400px;
width: 100%;
}
.app-content {
margin-left: 150px;
width: calc(100% - 150px);
position: relative;
}
.main {
background-color: aqua;
}
.app-bar {
background-color: red;
height: 64px;
max-width: inherit;
position: sticky;
top: 0;
left: 0;
z-index: 2;
width: 100%;
}
<div class="page">
<div class="app-bar">App bar</div>
<div class="app-content">
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat nibh ac magna consequat luctus. Sed scelerisque mi nec tellus posuere pellentesque. Praesent varius et risus non fringilla. Maecenas nec sodales nulla, in ultricies erat. Phasellus
purus urna, suscipit quis dui nec, sollicitudin facilisis ipsum. In varius, dolor quis vestibulum finibus, nisl mauris interdum purus, tempus malesuada ante metus at sem. Nunc mauris tellus, blandit at ipsum non, convallis fringilla risus. Etiam
vitae sapien id dui aliquet tincidunt ut ut odio. Phasellus non metus egestas, faucibus nisi sed, lacinia dui. Donec convallis massa mi, quis dapibus magna sodales at. Sed gravida, justo ut placerat rhoncus, ligula quam fermentum magna, id vehicula
turpis arcu a enim. Vivamus eget volutpat nunc. Nam consequat sapien non sodales euismod. Integer euismod orci diam, et consequat mi feugiat sed. Proin aliquam porta nisi, ut aliquam enim facilisis ut.
</div>
</div>
</div>
I have some HTML that looks like this: https://jsfiddle.net/9uwmxLa8/
I can't get the footer to stay at the bottom and not overlap the text on the page. The footer should stay at the bottom of the page if there isn't enough content to force the footer below the window height. I have the first part right--but can't get it to not overlap; I know it's because of position: absolute--but everything I search online tells me this is necessary.
I want it to function like this: https://codepen.io/cbracco/pen/zekgx
Any ideas how to fix this?
<div class="container">
<div>
<h1>This is some long test content.</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget sapien risus. Cras eleifend, diam quis tempus mattis, nunc leo vulputate metus, et rhoncus elit libero ac nisl. In ligula lectus, ultricies in pretium eget, accumsan non turpis. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Praesent finibus molestie ultricies. Vivamus et libero et mauris rutrum hendrerit sed in leo. Fusce luctus lorem iaculis, mattis felis non, suscipit nisi. Integer tempus blandit est tempus ullamcorper.
Ut at risus eget arcu congue rhoncus sit amet pharetra turpis. Maecenas ultricies, ex eget egestas scelerisque, ante ipsum placerat mauris, vitae porta felis mauris dictum nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Duis fringilla dolor a neque laoreet tristique. Donec non feugiat orci. Nulla nulla mauris, fermentum at arcu quis, venenatis consectetur odio. Vestibulum a risus non lorem ullamcorper sollicitudin. Praesent quis ante ipsum. Suspendisse odio ligula, tincidunt
vitae consectetur vel, posuere tincidunt odio. Donec at mollis neque. Sed ex felis, aliquam sed turpis eget, porta aliquet justo. Vivamus vestibulum libero id pulvinar egestas.
</p>
<p>
Quisque vestibulum urna eu blandit consectetur. Integer eget massa suscipit, scelerisque augue sed, mattis erat. Proin ut tincidunt nisi. Duis vestibulum congue accumsan. Vivamus a nisi tellus. Proin pretium neque eros, quis lacinia nisl pulvinar eget.
Quisque commodo urna eu nibh vulputate accumsan. Sed nec neque blandit, commodo metus sed, hendrerit orci. Nullam ullamcorper libero massa, vel pretium felis vulputate sed. Mauris in mauris pretium, accumsan erat quis, dapibus lacus.
</p>
<p>
Quisque arcu metus, ultricies sed urna a, gravida aliquam mauris. Nullam quis velit odio. Pellentesque dignissim odio tortor, at tempus nunc posuere et. In consequat eros a nunc varius, quis varius metus malesuada. Mauris viverra auctor elit quis hendrerit.
Donec risus ante, viverra et ante a, egestas faucibus purus. Integer semper id nulla eget vehicula. Aliquam a egestas leo. Suspendisse eu magna sit amet eros tempor ultrices. Quisque sed tempor purus, vitae egestas nunc. Cras congue nulla in sem
eleifend, sed pharetra ipsum volutpat. Etiam suscipit lacus ultricies dolor hendrerit fermentum. Pellentesque vestibulum in tellus ac blandit. In nec elit non eros tincidunt semper. Fusce sed leo eget ex laoreet fermentum sed vitae nibh. Aliquam
aliquam erat magna, sit amet gravida neque aliquam ac.
</p>
<p>
Phasellus vehicula, libero eget tempus tristique, lectus felis ornare erat, sit amet semper sapien sem ac nisl. Sed dignissim vulputate mauris, id imperdiet tellus tincidunt id. Proin eget risus a enim convallis pulvinar. In bibendum augue in tellus fermentum
sollicitudin. Proin finibus tellus lacinia hendrerit faucibus. Curabitur congue aliquam eros non condimentum. Nullam justo ex, pulvinar ac fringilla nec, ullamcorper in lorem ullamcorper in lorem ullamcorper in lorem. Quisque vestibulum urna eu
blandit consectetur.
</p>
</div>
<div class="footer">
<div>
This is a footer
</div>
</div>
</div>
SCSS:
p {
margin: 0 auto;
padding-top: 32px;
max-width: 75%;
font-size: 1.5em;
}
.container {
min-height: 100%;
position: relative;
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: cyan;
text-align: center;
}
position: absolute takes the element out if the normal layout. You then use left, right, and bottom to stick the footer to the bottom, essentially putting it over the bottom of the page.
By taking out those lines, my fiddle seems to above what you're wanting. If you want the footer to not have a margin, turn the margin to 0. Absolute positioning is not how that's done.
https://jsfiddle.net/kLqp3my7/
Make the body 100% of your page, with a min-height of 100% too.
The footer is then given negative margin-top:
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
You can create a footer that will stick to the bottom of the page fairly easy using flexbox
set the .container to be a flex container with display: flex;, and stack the flex items in a column with flex-direction: column;
then set the main content to flex: 1 which is shorthand for
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
this will make it so that it will grow to fill the space, which will push the footer to the bottom of the page.
When the main content hits the footer, it will push the footer off the page since its in a flex container.
$(".add-section").on("click", function(){
$("main").append("<div class='section s3'>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</div>");
});
* {
box-sizing: border-box;
}
html, body {
font-weight: 300;
font-size: 16px;
padding: 0;
margin: 0;
height: 100%;
}
.wrap {
display: flex;
min-height: 100%;
flex-direction: column;
}
header {
background: grey;
}
header .logo {
padding: 1.4rem;
font-size: 2rem;
}
main {
flex: 1;
}
.section {
font-size: 1.1rem;
padding: 1rem 2rem;
margin: 0;
background: #ccc;
}
footer {
background: grey;
padding: 1.2rem 1.4rem;
font-size: 1.2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<div class='wrap'>
<header>
<div class='logo'>
Flexbox Footer
</div>
</header>
<main>
<div class='section s1'>
<button class='add-section'>Add Section</button>
</div>
<div class='section s2'>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</div>
</main>
<footer>
Footer
</footer>
</div>