How can I make the sticky navbar stick to top of the page even after I provide a static height on sections below? Now when I scroll to the point of test-section then the nav disappears. How can I avoid this?
.header {
position: sticky;
top: 0;
z-index: 100;
height: 50px;
background: blue;
}
.test-section {
height: 300px;
background: red;
}
<div>
<div class="header">
hi navbar
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque urna. Quisque semper turpis vitae suscipit eleifend. Mauris sed nisl at eros tristique accumsan vitae nec libero. Cras et laoreet mauris, eget posuere ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque utur, ve
</p>
</div>
<div class="test-section">
<img src="https://commonslibrary.parliament.uk/content/uploads/2018/02/The_City_London-scaled.jpg">
</div>
Use "position: fixed" instead on the class header
Changing from position: sticky; to position: fixed; and also adding width: 100%; to your .header class seems to get the result your looking for
.header {
position: fixed;
top: 0;
z-index: 100;
height: 50px;
width:100%;
background: blue;
}
.test-section {
height: 300px;
background: red;
}
<div>
<div class="header">
hi navbar
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque urna. Quisque semper turpis vitae suscipit eleifend. Mauris sed nisl at eros tristique accumsan vitae nec libero. Cras et laoreet mauris, eget posuere ipsum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et dolor tellus. Fusce laoreet nibh at nisl iaculis sollicitudin. Nullam dapibus, est vitae aliquet consectetur, velit ipsum vestibulum ante, et hendrerit enim erat non odio. Nullam sit amet nisi dictum, suscipit diam nec, pellentesque utur, ve
</p>
</div>
<div class="test-section">
<img src="https://commonslibrary.parliament.uk/content/uploads/2018/02/The_City_London-scaled.jpg">
</div>
.header {
position: fixed;
top: 0;
z-index: 100;
height: 50px;
background: blue;
}
Related
I want to stack a div over 2 other divs, all 3 with unknown content, so the padding bottom of 1 and padding top of 3 should not be hardcoded. Is there any CSS-only solution for this?
.stacked {
color: #fff
}
.stacked .first,
.stacked .third {
min-height: 100px;
padding: 20px
}
.stacked .first {
background: red;
padding-bottom: 100px
}
.stacked .third {
background: blue;
padding-top: 100px
}
.stacked .second {
margin: 0 auto;
max-width: 50%;
position: relative
}
.stacked .second>div {
background: green;
display: block;
padding: 20px;
position: absolute;
-webkit-transform: translateY(-50%);
transform: translateY(-50%)
}
<div class="stacked">
<div class="first">
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies
auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue,
sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
</div>
<div class="second">
<div>
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper.
</div>
</div>
<div class="third">
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies
auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue,
sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
</div>
</div>
As you want items to be placed with space for their content we cannot have the inner (green) div positioned absolute.
This snippet has the first second and third divs just one below the other as standard. The first and third have their red and blue backgrounds respectively.
The second has a linear-gradient background, half red, half blue.
This snippet uses flex to position the texts centrally within each div but of course you can remove that if required.
.stacked {
color: #fff
}
.stacked .first,
.stacked .third {
min-height: 100px;
padding: 20px;
display: flex;
align-items: center;
}
.stacked .first {
background: red;
}
.stacked .third {
background: blue;
}
.stacked .second {
background-image: linear-gradient(red 0 50%, blue 50% 100%);
display: flex;
align-items: center;
justify-content: center;
}
.stacked .second>div {
max-width: 50%;
background: green;
padding: 20px;
}
<div class="stacked">
<div class="first">
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies
auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue,
sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
</div>
<div class="second">
<div>
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper.
</div>
</div>
<div class="third">
Unknown content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nisi arcu, convallis sed luctus in, volutpat luctus magna. Cras facilisis odio sed sem maximus ullamcorper. Donec laoreet vulputate suscipit. Proin rutrum elit eu dui ultricies
auctor sit amet pharetra tortor. Donec feugiat iaculis ex id cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec viverra dolor eget ligula semper vestibulum. Phasellus dictum nulla quis lectus congue,
sit amet pulvinar neque volutpat. Duis finibus sapien quis lorem suscipit, et luctus erat rutrum. Integer accumsan ipsum nec felis ultrices finibus. Integer at tincidunt orci. In tempus sollicitudin velit, sed dignissim ligula maximus ac.
</div>
</div>
I need help creating a sidebar with variable height based on the side content. My page is divided into three parts:
a fixed navbar at the top,
a main area
a footer at the bottom of the page (not sticky).
In the main area I want to create a sidebar that is between the navbar and the footer.
Here is one of my attempts
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: grey;
position: fixed;
top: 0;
width: 100%;
height: 50px;
z-index: 99;
}
.main {
padding-top: 50px;
min-height: calc(100vh - 150px);
}
.footer {
background-color: blue;
position: relative;
bottom: 0;
width: 100%;
height: 100px;
}
.sidebar {
height: 100%;
width: 10%;
position: absolute;
z-index: 1;
left: 0;
background-color: orange;
overflow-x: hidden;
}
.content {
margin-left: 10%;
}
<div class="navbar">
Navbar
</div>
<div class="main">
<div class="sidebar">
Sidebar
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim,
ligula nec consectetur porttitor, leo augue ullamcorper dui, in euismod mauris enim
sed dolor. Duis tristique nisl ac libero mattis pulvinar sed a dui. Duis eu lacus
arcu. Mauris in lorem lorem. Nam non elit sit amet neque ultricies scelerisque sit
amet in velit. Cras non enim varius mi congue malesuada. In vehicula tincidunt
elementum. Donec nec pharetra lacus. Maecenas id augue nec ipsum facilisis ultricies.
Vestibulum sed lectus nisi.
Nullam tortor ligula, sodales a orci nec, egestas euismod sapien. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Nullam cursus dolor ut leo faucibus, id
ultricies libero pellentesque. Nullam et iaculis felis. Curabitur risus augue, iaculis
quis auctor at, ultricies id mauris. Integer placerat enim mattis nisl mattis, non
ultrices lectus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque eu tempus magna. Praesent iaculis ultrices quam. Interdum et malesuada
fames ac ante ipsum primis in faucibus. Vestibulum molestie lectus blandit, pulvinar
sem ut, finibus nisl. Suspendisse et vehicula eros, a tempus lectus. Nulla non
pharetra urna. Morbi magna sapien, ultricies ac posuere ac, posuere in neque. Cras
lobortis vel ipsum a fringilla.
</div>
</div>
<div class="footer">
</div>
Unfortunately the sidebar does not reach the footer. If I use position: "absolute"; it covers the footer. I also tried using two div side by side with flex, but without success.
How can I get a sidebar that adapts to the content of the main (between navbar and footer), ensuring that the main has a minimum height of 100vh - 150px to keep the footer at the bottom of the page?
Any help is greatly appreciated
Here problem your css code.
just replace .main class code below
.main {
min-height: calc(100vh - 150px);
position: relative;
}
Without changing your markup, you can use Flexbox to get the layout you want:
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
.navbar {
background-color: grey;
flex-basis: 50px;
padding: 5px;
}
.footer {
background-color: blue;
flex-basis: 100px;
padding: 5px;
}
.main {
flex-grow: 1;
display: flex;
}
.sidebar {
flex-basis: 10%;
background-color: orange;
padding: 5px;
}
.content {
padding: 5px;
}
<div class="navbar">
Navbar
</div>
<div class="main">
<div class="sidebar">
Sidebar
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, ligula nec consectetur porttitor, leo augue ullamcorper dui, in euismod mauris enim sed dolor. Duis tristique nisl ac libero mattis pulvinar sed a dui. Duis eu lacus arcu. Mauris
in lorem lorem. Nam non elit sit amet neque ultricies scelerisque sit amet in velit. Cras non enim varius mi congue malesuada. In vehicula tincidunt elementum. Donec nec pharetra lacus. Maecenas id augue nec ipsum facilisis ultricies. Vestibulum sed
lectus nisi. Nullam tortor ligula, sodales a orci nec, egestas euismod sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus dolor ut leo faucibus, id ultricies libero pellentesque. Nullam et iaculis felis. Curabitur risus
augue, iaculis quis auctor at, ultricies id mauris. Integer placerat enim mattis nisl mattis, non ultrices lectus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu tempus magna. Praesent iaculis ultrices quam. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Vestibulum molestie lectus blandit, pulvinar sem ut, finibus nisl. Suspendisse et vehicula eros, a tempus lectus. Nulla non pharetra urna. Morbi magna sapien, ultricies ac posuere ac, posuere in
neque. Cras lobortis vel ipsum a fringilla.
</div>
</div>
<div class="footer">
Footer
</div>
CSS Flexible Box Layout - CSS: Cascading Style Sheets | MDN
A Complete Guide to Flexbox | CSS-Tricks
If you were willing to change your markup, or use display:contents on your main element, you could use Grid layout instead.
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
body {
display: grid;
grid-template-columns: 10% 1fr;
grid-template-rows: 50px 1fr 100px;
grid-template-areas: "navbar navbar" "sidebar content" "footer footer";
}
.navbar {
background-color: grey;
padding: 5px;
grid-area: navbar;
}
.footer {
background-color: blue;
padding: 5px;
grid-area: footer;
}
.main {
display: contents;
}
.sidebar {
background-color: orange;
padding: 5px;
grid-area: sidebar;
}
.content {
padding: 5px;
grid-area: content;
}
<div class="navbar">
Navbar
</div>
<div class="main">
<div class="sidebar">
Sidebar
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim, ligula nec consectetur porttitor, leo augue ullamcorper dui, in euismod mauris enim sed dolor. Duis tristique nisl ac libero mattis pulvinar sed a dui. Duis eu lacus arcu. Mauris
in lorem lorem. Nam non elit sit amet neque ultricies scelerisque sit amet in velit. Cras non enim varius mi congue malesuada. In vehicula tincidunt elementum. Donec nec pharetra lacus. Maecenas id augue nec ipsum facilisis ultricies. Vestibulum sed
lectus nisi. Nullam tortor ligula, sodales a orci nec, egestas euismod sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam cursus dolor ut leo faucibus, id ultricies libero pellentesque. Nullam et iaculis felis. Curabitur risus
augue, iaculis quis auctor at, ultricies id mauris. Integer placerat enim mattis nisl mattis, non ultrices lectus posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu tempus magna. Praesent iaculis ultrices quam. Interdum
et malesuada fames ac ante ipsum primis in faucibus. Vestibulum molestie lectus blandit, pulvinar sem ut, finibus nisl. Suspendisse et vehicula eros, a tempus lectus. Nulla non pharetra urna. Morbi magna sapien, ultricies ac posuere ac, posuere in
neque. Cras lobortis vel ipsum a fringilla.
</div>
</div>
<div class="footer">
Footer
</div>
CSS Grid Layout - CSS: Cascading Style Sheets | MDN
A Complete Guide to Grid | CSS-Tricks
Trying to implement a CSS read more code using ONLY CSS with NO JavaScript involved. Here is the html:
.has-read-more {
position: relative;
width: 300px;
}
.has-read-more div {
height: 160px;
overflow: hidden;
}
.show-more {
position: absolute;
bottom: 10px;
width: 140%;
text-align: center;
cursor: pointer;
margin: 0;
margin-left: -20%;
}
.show-more:after {
content: "read more";
background-image: linear-gradient(to bottom, transparent, white);
padding-bottom: 10px;
display: block;
font-weight: bold;
color: black;
}
.show-more span {
background: white
}
input[type=checkbox]:checked {
display: none;
}
input[type=checkbox]:checked+div {
height: auto;
}
<div class="has-read-more">
<input type="checkbox" class="show-more">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet ornare odio, at cursus nisi. Suspendisse sodales ante mollis posuere finibus. Sed erat nibh, efficitur vitae venenatis sit amet, ornare et ligula. Suspendisse hendrerit nulla
quam, at hendrerit justo lacinia quis. Nunc nec dui in enim suscipit egestas et ut augue.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet ornare odio, at cursus nisi. Suspendisse sodales ante mollis posuere finibus. Sed erat nibh, efficitur vitae venenatis sit amet, ornare et ligula. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sit amet ornare odio, at cursus nisi. Suspendisse sodales ante mollis posuere finibus. Sed erat nibh, efficitur vitae venenatis sit amet, ornare et ligula. Suspendisse hendrerit nulla
quam, at hendrerit justo lacinia quis. Nunc nec dui in enim suscipit egestas et ut augue.</p>
<p>Sed erat nibh, efficitur vitae venenatis sit amet, ornare et ligula. Suspendisse hendrerit nulla quam, at hendrerit justo lacinia quis. Nunc nec dui in enim suscipit egestas et ut augue.</p>
</div>
</div>
It all works apart from the checkbox appearing and not being replaced by read more text (which has its own background).
I have read other similar stack threads including this one: How to implement Read more / Read less in pure CSS but not looking to implement one that has read more/read less as that has.
The one I am working with works apart from that last bit. I must be a bit stupid as I just cannot seem to figure out why the checkbox is not replaced with the text.
It needs to be a purse CSS solution and not one based on JS. I have tried using a label but it gets appended to the beginning of the text box and not inline with the checkbox.
What do I seem to be doing wrong?
I'm trying to get tooltips working properly within a scrollable div container. To achieve this I've set the tooltips position to absolute and for its parent element (.panel-section) to relative. Problem is with the very first tooltip which should be visible on top of the .panel-header but now it's going "under" it and is not visible.
.panel {
margin: 50px;
width: 500px;
border: 1px solid black;
}
.panel-header {
height: 2rem;
background-color: silver;
border-bottom: 1px solid black;
}
.panel-content {
overflow-y: auto;
height: 500px;
}
.panel-section {
position: relative;
}
h1,
h2 {
margin: 0;
}
.tooltip {
width: 200px;
height: 50px;
border: 1px solid silver;
background-color: #333333ee;
color: silver;
position: absolute;
top: -50px;
display: none;
}
.panel-section:hover .tooltip {
display: block;
}
<html>
<body>
<div class="panel">
<div class="panel-header">
<h1>Header content</h1>
</div>
<div class="panel-content">
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
<div class="panel-section">
<h2>Blah blah</h2>
<div class="tooltip">
tooltip content
</div>
<p>
(hover here to see tooltip) Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum ut est quis enim eleifend consequat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
tristique fringilla sapien a ornare. Etiam sed nunc orci. Sed
maximus ullamcorper risus, sed rutrum magna lobortis ut. Praesent
egestas hendrerit commodo. Donec dapibus bibendum ex id gravida.
Donec imperdiet pharetra dolor ac lacinia. Quisque lobortis elit eu
tempus maximus. Nam eget sem eleifend, pretium massa a, efficitur
nisi. Suspendisse potenti. Pellentesque imperdiet felis sed nisl
consequat suscipit. Morbi convallis tortor in iaculis aliquet.
</p>
</div>
</div>
</div>
</body>
</html>
* {
box-sizing:border-box;
margin: 0;
padding: 0;
}
section {
width: 100%;
margin: auto;
display: flex;
background: gray;
}
aside,main {
flex: 1 0 50%;
}
aside{
flex: 0 0 50%;
justify-content: center;
background: #eee;
}
main {
position: relative;
color: white;
}
.container-text{
position: fixed;
margin-left: 12.5%;
margin-right: 12.5%;
margin-top: 24%;
width: 25%;
}
<section>
<aside class="aside">
<div class="container-text">
<header class="hello">Hello</header>
<div class="container-nav">
<p class="how">How</p>
<p class="are">are</p>
<p class="you">you</p>
</div>
</div>
</aside>
<main class="main">
<div class="container-content">
<h1>First heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Second heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Third heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Fourth heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
</div>
</main>
</section>
I have a layout with an aside that takes up half the screen. The content inside the aside will stay fixed for a period of time. That's being stored in the container-text container. I would like everything in this container to stay fixed, however I would like the "hello" header text both horizontally and vertically centered. The "how" "are" "you" should be be at the bottom of the screen, centered with space between (they will be navigation). I managed to center a fixed container, but could not position the navigation. It is responsive left/right, but not top/bottom (I would like nav to stay at bottom and "Hello" to stay centered).
Is this what you are looking to achieve?
* {
box-sizing:border-box;
margin: 0;
padding: 0;
}
section {
width: 100%;
margin: auto;
display: flex;
background: gray;
}
aside,main {
flex: 1 0 50%;
}
aside{
flex: 0 0 50%;
justify-content: center;
background: #eee;
display:flex;
justify-content:center;
align-items:stretch;
}
main {
position: relative;
color: white;
}
.container-text{
position: fixed;
height: 100vh;
display:flex;
}
.container-text-inner {
height:50%;
position:relative;
top:50%;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
}
.container-nav {
display:flex;
flex-wrap: no-wrap;
margin-bottom:15px;
}
.container-nav p {
margin-right:15px;
}
<section>
<aside class="aside">
<div class="container-text">
<div class="container-text-inner">
<header class="hello">Hello</header>
<div class="container-nav">
<p class="how">How</p>
<p class="are">are</p>
<p class="you">you</p>
</div>
</div>
</div>
</aside>
<main class="main">
<div class="container-content">
<h1>First heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Second heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Third heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
<h1>Fourth heading</h1>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>
</div>
</main>
</section>