I'm trying to organize some elements across 3 columns using Bootstrap 4.5.
The center column will have a long body.
The right column with have content (2 divs) that should be either stuck to the top / bottom. I'm having exceeding difficulty getting the bottom element to stick. The element auto-expands, and I want it to auto-expand from the bottom.
I'm using Tocify as my ToC in the top of this right column.
The left column has several divs. The top div is a banner, which I would like stuck there. The rest of the divs are less important. Depending on the size of the viewport, this column may overflow, in which case I'd like an independent scrollbar for this left column. There should be 2 separate, independent scroll bars (webpage scroll and left-panel scroll).
Here's a bootstrap loaded fiddle with an example (with a long body to demonstrate the issue): https://jsfiddle.net/x1nhrwtf/5/
<body>
<div class="container-fluid">
<main class="container py-3">
<div class="row">
<aside class="col-md-2">
<div class="row banner sticky-top bg-white p-3">
This will be some banner. Should always stick to the top.
</div>
<div class="scrollable-area hide-this-on-small-devices">
<div class="row bg-white p-3">
This column is <em>not</em> supposed to scroll along with the middle section, <em>unless</em> the elements are overflown (in which case, I want a separate scrollbar).
<hr />
</div>
<div class="row bg-white p-3">
This will have a search bar. Hide this on small devices.
</div>
<div class="row bg-white p-3">
This will have announcements. Hide this on small devices.
</div>
<div class="row bg-white p-3">
This will have BuiltWith. Hide this on small devices.
</div>
</div>
</aside>
<section class="content col-md-6">
Lorem ipsum dolor sit amet...
</section>
<aside class="col-md-4">
<div class="toc sticky-top bg-white p-3">
<h3>ToC Section, sticky</h3>
<hr />
This is positioned correct, pretty much.
Should stay at the top, even on small devices.
This element auto-expands to 60% height.
This is a Tocify style ToC:
<div id="toc" class="pl-1"></div>
</div>
<div class="comments sticky-bottom bg-white p-3">
<h3>Comment section</h3>
<hr />
This should stick to the bottom of the column (and page).
This element auto-expands to 40% height.
</div>
</aside>
</div>
</main>
<footer class="footer">Here is a footer. It should be stuck across the bottom. Why is it not there?</footer>
</div>
</body>
CSS Attempt:
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.toc {
max-height: 60%;
}
.comments {
max-height: 40%;
}
.scrollable-area {
overflow-y: auto;
}
This is the solution i worked out. There is the container for the three columns, with overflow: hidden and height: 100vh to avoid page scroll. And the three columns with overflow scroll to allow parallel scrolling.
The rest of your requirements are met, i think. The top components of left and right are marked gray and tay on top. The comment stays on bottom of page and column. And the footer is visible.
html,
body {
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-evenly;
width: 100vw;
height: 100vh;
border: solid 1px red;
overflow: hidden;
}
.col {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: auto;
overflow: auto;
padding: 3px;
}
.col-md-2 {
width: 16.6666666667%;
}
.col-md-4 {
width: 33.3333333334%;
}
.col-md-6 {
width: 50%;
}
.center {
background-color: green;
text-align: justify;
}
.sticky-top {
position: fixed;
width: inherit;
top: 0;
background-color: gray;
}
.sticky-bottom {
position: sticky;
bottom: 0;
}
.scrollable-area {
position: relative;
z-index: -1;
}
.toc {
height: 60%;
max-height: 60%;
}
.comments {
position: fixed;
bottom: 0;
z-index: -1;
height: 40%;
max-height: 40%;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
z-index: 100;
background-color: black;
color: white;
}
<div class="container">
<div class="col left col-md-2">
<div class="banner sticky-top">
This will be some banner. Should always stick to the top.
</div>
<div class="scrollable-area hide-this-on-small-devices">
<div class="row bg-white p-3">
This column is <em>not</em> supposed to scroll along with the middle section, <em>unless</em> the elements are overflown (in which case, I want a separate scrollbar).
<hr />
</div>
<div class="row bg-white p-3">
This will have a search bar. Hide this on small devices.
<hr />
</div>
<div class="row bg-white p-3">
This will have announcements. Hide this on small devices.
<hr />
</div>
<div class="row bg-white p-3">
This will have BuiltWith. Hide this on small devices.
<hr />
</div>
</div>
</div>
<div class="col center col-md-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat sed cras ornare arcu dui vivamus arcu. Iaculis eu non diam phasellus vestibulum lorem sed risus ultricies. Suscipit tellus
mauris a diam maecenas. Egestas maecenas pharetra convallis posuere morbi leo urna molestie. Augue neque gravida in fermentum et sollicitudin ac. Amet purus gravida quis blandit turpis cursus in hac. Aenean pharetra magna ac placerat vestibulum. Quis
ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Ut placerat orci nulla pellentesque dignissim enim sit amet venenatis. Lacus vestibulum sed arcu non odio euismod.<br> Amet venenatis urna cursus eget nunc scelerisque viverra.
Sodales ut eu sem integer vitae justo eget. Tempor orci eu lobortis elementum. Dictum at tempor commodo ullamcorper a lacus. Vel facilisis volutpat est velit egestas dui id ornare. Urna duis convallis convallis tellus. Blandit massa enim nec dui nunc
mattis enim ut. Quisque non tellus orci ac. Tempus egestas sed sed risus pretium quam vulputate dignissim suspendisse. Fermentum leo vel orci porta. Duis tristique sollicitudin nibh sit amet commodo nulla facilisi. Elementum facilisis leo vel fringilla
est ullamcorper eget. Condimentum lacinia quis vel eros donec ac. Felis eget velit aliquet sagittis id consectetur purus. Fringilla ut morbi tincidunt augue interdum velit euismod. Faucibus a pellentesque sit amet porttitor. Sapien eget mi proin sed
libero enim sed. Nulla porttitor massa id neque aliquam vestibulum morbi blandit cursus.<br> Mattis pellentesque id nibh tortor id aliquet lectus proin nibh. Elit duis tristique sollicitudin nibh sit. Risus commodo viverra maecenas accumsan lacus
vel. Elementum sagittis vitae et leo duis ut diam. Mauris vitae ultricies leo integer malesuada nunc vel. Adipiscing tristique risus nec feugiat in fermentum posuere. Orci sagittis eu volutpat odio. Aliquet bibendum enim facilisis gravida neque convallis
a. Eget lorem dolor sed viverra ipsum nunc. Orci eu lobortis elementum nibh tellus molestie nunc non. Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Gravida arcu ac tortor dignissim convallis aenean et. Tincidunt tortor aliquam nulla
facilisi cras fermentum odio. Vel pretium lectus quam id leo in vitae turpis. Ullamcorper velit sed ullamcorper morbi tincidunt ornare. Sit amet commodo nulla facilisi nullam. Senectus et netus et malesuada. Id porta nibh venenatis cras sed felis
eget.<br> Ultrices sagittis orci a scelerisque. Faucibus et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Id velit ut tortor pretium viverra suspendisse potenti nullam. Purus gravida quis blandit turpis cursus. Non curabitur gravida
arcu ac tortor dignissim. Porta nibh venenatis cras sed. Gravida dictum fusce ut placerat orci nulla. Justo laoreet sit amet cursus sit amet dictum. Non diam phasellus vestibulum lorem sed risus. Non enim praesent elementum facilisis leo vel fringilla
est ullamcorper.<br> Mattis aliquam faucibus purus in massa tempor nec feugiat nisl. Porta non pulvinar neque laoreet suspendisse interdum. Leo urna molestie at elementum. Aliquet porttitor lacus luctus accumsan. Arcu non sodales neque sodales ut.
Vitae turpis massa sed elementum tempus egestas. Faucibus in ornare quam viverra orci sagittis. Sociis natoque penatibus et magnis dis parturient. Lacus suspendisse faucibus interdum posuere. Odio facilisis mauris sit amet massa vitae tortor condimentum
lacinia.
</div>
<div class="col right col-md-4">
<div class="toc sticky-top bg-white p-3">
<h3>ToC Section, sticky</h3>
<hr /> This is positioned correct, pretty much. Should stay at the top, even on small devices. This element auto-expands to 60% height.
</div>
<div class="comments sticky-bottom bg-white p-3">
<h3>Comment section</h3>
<hr /> This should stick to the bottom of the column (and page). This element auto-expands to 40% height.
</div>
</div>
</div>
<footer class="footer">Here is a footer. It should be stuck across the bottom. Why is it not there?</footer>
The footer still right there (at the bottom). I think you didn't see it because jsfiddle's console covered it.
Related
i want to build this page but i have a problem which is that i don't know how to force the image out of the bootstrap container while retaining responsive layout, is there anyway i could do that without a ton of absolute positioning for each single device?
Web Screen Design
IPads and Smaller Screen Designs
Here's a two-column responsive design that roughly mimics your layout.
It uses the column ordering feature of Bootstrap to swap the order of the text and image blocks on smaller screens.
div {
outline: 1px solid red;
}
.img-absolute {
position: absolute;
top: 80px;
right: 80px;
}
.div-black {
position: absolute;
top: 40px;
right: 40px;
background-color: black;
width: 280px;
height: 280px;
}
#media (max-width: 990px) {
.img-absolute {
right: 380px;
}
.div-black {
right: 340px;
}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div clas="container">
<div class="row">
<div class="col-lg-6 order-1 order-lg-2">
<h4>Lorem Ipsum</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Integer feugiat scelerisque varius morbi enim. Duis ut diam quam nulla porttitor massa id neque aliquam. Non pulvinar neque laoreet suspendisse interdum consectetur. Tempus urna et pharetra pharetra massa massa ultricies mi quis. Urna duis convallis convallis tellus id interdum velit laoreet id. Lacus vel facilisis volutpat est velit egestas. Eros donec ac odio tempor. Sapien et ligula ullamcorper malesuada proin libero nunc consequat interdum. Morbi tempus iaculis urna id volutpat lacus laoreet. Ultricies mi eget mauris pharetra et ultrices. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Mi quis hendrerit dolor magna eget est lorem. Pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Nulla posuere sollicitudin aliquam ultrices sagittis orci. Neque aliquam vestibulum morbi blandit cursus risus at.</p>
</div>
<div class="col-lg-6 col order-2 order-lg-1">
<div class="div-black"></div>
<img class="img-absolute"
src="https://picsum.photos/600/300" />
</div>
</div>
</div>
I'm coding some HTML and CSS that needs to organize a number of blocks of nested DIVs into a responsive grid which keeps each block of nested DIVs' width the same. I've tried just about everything but nothing has worked so far. As it is now, each block of nested DIVs stacks on top of the next one vertically. I'd like the blocks of nested DIVs to be responsive, in that they wrap if the browser window is resized. Also, I need each DIV to be the same width. My code may be ugly and lacking in style but it's what I had to write to get the current layout working.
I've tried using the flex and flex-wrap properties to create a grid, but it has not worked and it only horribly screws up the display of the nested DIV blocks.
<!DOCTYPE html>
<html>
<head>
<style>
.border_box_main {
width: 100%;
height: auto;
border: 15px solid Green;
box-sizing: border-box;
background-color: Aquamarine;
margin: auto;
text-align: center;
}
.list_1 {
width: 30%;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 15px;
background-color: Grey;
display: inline-block;
}
.list_subtext {
text-align: left;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 15px;
font-size: 10px;
}
hr {
color: solid black;
width: 75%;
text-align: center;
}
.list_2 {
width: 85%;
margin-right: 10px;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 15px;
background-color: White;
display: inline-block;
}
.div_list_1 {
display: list-item;
list-style-type: disc;
list-style-position: outside;
text-align: left;
}
</style>
<title>Test</title>
</head>
<body>
<div class="border_box_main">
<hr><br>
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">
Test 1 2 3 4.
<div class="list_subtext">(Test2)</div>
</div>
</div>
</div>
</div>
</div>
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">
Test 1 2 3 4.
<div class="list_subtext">(Test2)</div>
</div>
</div>
</div>
</div>
</div>
<hr><br>
</div>
</body>
</html>
I get a vertical list of nested DIV blocks, with the same width. The problem is that I want the list of nested DIV blocks to flow horizontally, with each one having the same width and its position on the screen being centered. The list should also be responsive to changes in the browser window size.
EDIT : The JSFiddle link is here https://jsfiddle.net/g42nxk0p/ . AS you might have noticed, when the output window is small, my HTML doesn't render correctly. Specifically, the borders do not shrink in response to the window width. I'd also like to fix this.
Do you try to use Grid layout? I use often grid layout for the main layout and flexbox for items that are in the grid. (CSS Grid Layout Module
- A Complete Guide to Grid)
Well, I finally got it working, at least on Desktop devices :) Thanks to Khoi Le for the suggestions for the grid layout code. I had to tweak his and my code, but I finally got it working. I still have to add the mobile-friendly code, and hopefully that won't break the layout. The only problem, and what seems to be necessary, although it's a kludge, was that I had to add a static pixel width to the DIVs. Here is an example of the working code :
<!DOCTYPE html>
<html>
<head>
<style>
.border_box_main {
width: 100%;
height: auto;
border: 15px solid Green;
box-sizing: border-box;
background-color: Aquamarine;
margin: auto;
text-align: center;
overflow: hidden;
word-wrap: break-word;
}
.list_1 {
width: 320px;
padding: 15px;
display: inline-block;
overflow: hidden;
word-wrap: break-word;
}
.list_subtext {
text-align: left;
margin-left: 10px;
margin-top: 10px;
margin-bottom: 10px;
padding: 15px;
font-size: 10px;
overflow: hidden;
word-wrap: break-word;
}
hr {
color: solid black;
width: 75%;
text-align: center;
}
.list_2 {
margin: 5px;
padding: 15px;
background-color: White;
display: inline-block;
border: 20px solid grey;
width: 200px;
overflow: hidden;
word-wrap: break-word;
}
.div_list_1 {
display: list-item;
list-style-type: disc;
list-style-position: outside;
text-align: left;
overflow: hidden;
word-wrap: break-word;
}
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
justify-content: center;
overflow: hidden;
word-wrap: break-word;
}
.item {
width: 350px;
margin: 20px;
padding: 5px;
min-height: 100px;
text-align: center;
overflow: auto;
word-wrap: normal;
}
</style>
<title>Test...</title>
</head>
<body>
<div class="border_box_main">
<br><br>
<hr>
<br>
<div class="container">
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pharetra iaculis pretium. Nullam risus dui, placerat et fermentum sed, efficitur non massa. Nulla congue facilisis ipsum at tincidunt. Aenean ut orci efficitur, consequat enim vitae, facilisis ex. Pellentesque imperdiet, arcu eget feugiat ultricies, neque magna hendrerit tortor, ut feugiat risus velit non eros. Aenean scelerisque pulvinar ante, vel porttitor ipsum blandit et. Aliquam eu metus eu felis blandit porta. Quisque ac neque sapien. Duis blandit nisl vitae dui bibendum congue sed sed dolor. Suspendisse vitae arcu placerat, placerat justo non, ornare ex. Phasellus suscipit ultrices ex, sed mollis eros viverra nec. Integer non aliquet augue, vitae condimentum diam. Phasellus ultrices, arcu id malesuada tincidunt, ligula elit tempus felis, quis tincidunt leo nisl sit amet velit. Sed sit amet efficitur turpis, id scelerisque nulla.
<div class="list_subtext">Test1</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">In sit amet odio velit. Cras fermentum est id dapibus accumsan. Pellentesque metus lacus, gravida id justo sit amet, sodales hendrerit neque. Nulla ac orci ac neque placerat commodo. Quisque tortor risus, sagittis vitae risus a, lobortis lobortis eros. Nulla facilisi. Suspendisse luctus leo vel felis cursus, quis aliquet diam aliquet. Maecenas vitae augue placerat, posuere ex ac, venenatis nisi. Nunc mi diam, gravida eu erat nec, porta scelerisque nulla. Proin hendrerit nulla massa, non elementum lectus rhoncus quis. In dapibus vel nunc vel porta. Sed maximus purus vel enim egestas accumsan. Sed sollicitudin libero ac quam iaculis tempus. <div class="list_subtext">Test2</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Morbi at gravida urna. Morbi imperdiet nisl vel felis interdum, a volutpat turpis eleifend. Sed ultrices sollicitudin elit, sit amet tincidunt velit pharetra ut. Integer tincidunt metus at purus vestibulum, ut viverra orci volutpat. Donec hendrerit quam eu mauris molestie, sed congue orci vehicula. In ac justo tincidunt, suscipit ipsum in, mattis mauris. Duis lobortis lectus at nunc faucibus consectetur. <div class="list_subtext">Test3</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Cras sit amet sapien mi. Fusce at convallis metus. Quisque ac imperdiet ex. Morbi dictum, felis sit amet placerat malesuada, lectus arcu interdum ipsum, ac egestas nisi leo eget dui. Maecenas id ex rutrum, condimentum quam et, suscipit justo. Nam et pellentesque arcu, vel porttitor sapien. Integer egestas enim quam, vehicula tristique tellus sodales ut.
<div class="list_subtext">Test4</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Proin sapien urna, cursus eu eros ac, iaculis sollicitudin massa. Vestibulum et sodales felis. Nulla vel cursus lorem. Sed dui libero, cursus sed est in, venenatis volutpat ex. Pellentesque tincidunt risus ut lorem euismod, sit amet facilisis lectus fermentum. Nunc tellus sapien, interdum eu urna id, viverra ultricies massa. Pellentesque elementum nisl leo, ullamcorper elementum metus mattis vel. Cras sodales facilisis eros, a tincidunt nisl vulputate in. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut justo euismod, dictum libero in, finibus arcu. <div class="list_subtext">Test5</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1"> Proin et leo ultricies, elementum odio a, iaculis sem. Nam nec lacus facilisis metus elementum sodales. Aenean convallis luctus nibh, a luctus tortor. Sed dictum lorem et nulla fermentum, ac consequat justo sagittis. Nullam rhoncus ornare massa eget auctor. Praesent at convallis diam. Aliquam viverra mollis neque, ac porta ligula fringilla ac. Praesent neque nisl, cursus vitae sagittis ut, tristique eget justo. In semper urna nec justo egestas vestibulum.
<div class="list_subtext">Test6</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Donec et cursus nisl, sed dictum justo. Cras pretium lorem in dui sollicitudin ullamcorper. Nullam et dolor id velit imperdiet consequat. Aenean turpis ex, convallis bibendum elit vitae, fermentum molestie erat. Donec fringilla pulvinar metus, eu varius metus condimentum vel. Suspendisse potenti. Aliquam rutrum euismod dolor, quis eleifend dui faucibus id. Ut vitae leo vel quam tempor dapibus sit amet at ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer quis pharetra leo, vel rutrum diam. Aliquam dapibus tellus sit amet tellus imperdiet, et tincidunt metus ornare. Sed sit amet urna ex. Praesent accumsan ut odio sit amet aliquet. Nunc non varius diam, sed faucibus dolor. Cras ut nunc et purus iaculis luctus nec et quam.
<div class="list_subtext">Test7</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Maecenas eget tellus mollis, efficitur est a, scelerisque sem. Sed efficitur leo lectus, et fringilla ipsum pellentesque eget. Phasellus vitae egestas magna, sed lobortis erat. Aliquam eget imperdiet ligula, ac dapibus mauris. Sed lobortis bibendum felis, quis varius purus varius sagittis. Vestibulum suscipit dapibus leo non consequat. Phasellus tempor, eros vitae tempor hendrerit, dolor nibh semper metus, a hendrerit turpis leo in est. Donec faucibus iaculis mollis. Suspendisse laoreet a risus a maximus. Ut massa lacus, hendrerit eget eros et, ultrices porttitor libero. Nunc ac laoreet odio. Proin viverra molestie ipsum et faucibus.
<div class="list_subtext">Test8</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div style="text-align: center;">
<div class="list_1">
<div style="text-align: center;">
<div class="list_2">
<div class="div_list_1">Praesent vitae dolor lacus. Aenean gravida, erat sed ornare laoreet, leo dolor viverra tellus, venenatis mollis nibh dolor id nisi. Morbi ac tempus elit. Maecenas maximus felis ac felis laoreet, id congue urna sollicitudin. Nulla rhoncus feugiat magna, a auctor sapien pharetra nec. Nunc egestas ipsum mi, non volutpat mi dictum non. Ut molestie augue a ex malesuada pretium. In vestibulum efficitur mi. Integer aliquet placerat tempor. Nunc ultricies ipsum vel dictum eleifend. Integer ut dapibus enim, nec porttitor magna. Nulla quis sodales lacus.
<div class="list_subtext">Test9</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr><br>
</div>
</body>
</html>
The JSFiddle is here : https://jsfiddle.net/jdbtwo/ch3tfu2q/
Notice how the tops of the DIVs are all aligned. Also, the grid is repsonsive and responds to browser window size changes properly.
jdb2
EDIT : To get my code working on mobile devices, I had to pair every "width: x;" with a "min-width: x;" . Still, in the browsers on my iPhone, the listing is shifted to the left. I don't know what's causing this.
I have some basic markup like this:
<body>
<div id="static-container">
<p id="do-not-move">Example.</p>
</div>
<div id="scroll-container"></div>
</body>
Basically, I want the static-container to remain fixed, and never move. The scroll-container will have content added to it and will be scrollable, but it should always be physically below the static-container, and scrolling should never overlap into static-container, I can put position: fixed in the static-container but the scroll-container still manages to scroll into it.
body,html {height:100vh;}
body {
display: flex;
flex-direction: column;
margin: 0;
}
#static-container {
background: black;
color: white;
}
#scroll-container {
flex-grow: 1;
overflow-y: scroll;
}
<div id="static-container">
<p id="do-not-move">Example.</p>
</div>
<div id="scroll-container"><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p><p>foo</p></div>
Make the static-container div position fixed and some height.
Give some height to scroll-div and scroll-y: scroll
HTML:
<div id="static-container">
<p id="do-not-move">Example.</p>
</div>
<div id="scroll-container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ut ipsum rutrum, commodo felis ac, mattis justo. Vivamus feugiat urna ac est efficitur blandit. Maecenas vestibulum turpis ante, nec pharetra enim rutrum vitae. Fusce pharetra felis fringilla tincidunt porta. Praesent porttitor posuere erat eu viverra.
</p>
<p>
Aliquam lacus nisl, dictum non ultricies eget, malesuada et nisi. Maecenas felis turpis, blandit at leo id, efficitur pellentesque velit. Morbi sapien augue, sagittis eget dictum a, bibendum ut dui. Morbi vulputate tempor tortor, id blandit lorem vulputate id. In blandit nibh sit amet ante vestibulum volutpat.
</p>
<p>
Nam quis nisi magna. Sed lacinia id quam eget gravida. Donec vitae luctus leo. Sed efficitur sapien eu elit tincidunt, eu vehicula felis rutrum. Interdum et malesuada fames ac ante ipsum primis in faucibus.
</p>
</div>
CSS:
#static-container{background-color:#333;color:#FFF;height:30px; padding:10px 0; postion:fixed; top:0; text-align:center; width:500px}
#scroll-container{background-color:#ccc;height:200px; position:relative; overflow-y:scroll; padding:0 10px; width:480px}
JS Fiddle
I created a js fiddle http://jsfiddle.net/claireC/8SUmn/ with a fixed header that is transparent.
When I scroll, you're able to see the text scrolling up behind it. How can I have the text disappear or hidden behind the transparent div on scroll.
edit: Forgot to mention that the background is an image.
Note: I am a beginner in coding. This is me playing around with code and trying to figure things out.
Here's my html:
<div class="container">
<header>
<ul>
<li>list one</li>
<li>list3 </li>
<li>list2</li>
</ul>
</header>
<div class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra. Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere.
</p>
</div>
Css:
header{
width: 100%;
position: fixed;
top: 0;
border: 1px solid #000;
}
.text{
border: 1px solid #fff;
position: relative;
margin-top: 150px;
}
p{
font-size: 150px;
}
If you are ok with setting the header height, you can use position:absolute and overflow:auto to get the result
Demo
I found another solution, CSS only:
make a container div with your background
have the header transparant and height set to 10vh
have the body height set to 90vh and overflow to auto
Sorry, it's React/MaterialUI, but you'll get the gist:
const classes = theme => ({
container: {
fontFamily: 'Roboto,"Helvetica Neue",Arial,sans-serif',
margin: 0,
padding: 0,
minHeight: '100%',
backgroundImage: 'url(/cargo-background.jpg)',
backgroundSize: 'cover',
backgroundAttachment: 'fixed',
}
})
<div className={classes.container}>
<div style={{height: '12vh'}}>
<AppBar/>
</div>
<div style={{height: '88vh', overflow: 'auto'}}>
<Routes/>
</div>
</div>
More on vh (viewport units):
https://caniuse.com/#feat=viewport-units
Assuming your header is going to be like a sticky menu, that shows the background image underneath - I think it will be a lot easier to achieve without the text actually behind your header/menu. Instead you're better off doing a fixed layout IMO, here's an example:
There is a full screen container to start the fixed layout, and inside a header, and content section. You can use flexbox here to make the content section fill the space but not overflow, while the header height is based on the header contents (so no, you don't have to set height on the header as people are saying).
.container {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
background: ghostwhite;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
header.menu {
border: 1px solid #000;
}
section.text {
border: 1px solid #fff;
overflow-y: scroll
}
<div class="container">
<header class="menu">
<ul>
<li>list one</li>
<li>list3 </li>
<li>list2</li>
</ul>
</header>
<section class="text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra.
Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at
eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat sapien eget ligula egestas, quis aliquam velit varius. Phasellus mollis mollis
sem quis porttitor. Pellentesque scelerisque mauris et magna tincidunt, vel pharetra enim pharetra. Duis a lobortis purus. Sed dignissim fermentum nibh convallis eleifend. In quis interdum arcu. Proin interdum, lorem et luctus laoreet, felis purus
pharetra turpis, eu egestas justo ligula in lectus. Morbi vitae libero vel velit posuere luctus at eu diam. Duis tincidunt lectus ut lobortis euismod. Vivamus ultrices tristique sapien eget posuere.
</p>
</section>
</div>
What I would like to reach is the following design:
Two text blocks with some gaps inbetween aligned around the page midline (see the picture).
I tried to play around with float property, using margin and padding to get the gap, but I can't get them centered.
EDIT:
I forgot to indicate that the arrows show the resizable parts: so, the page width must be resizeable whereas the text itself isn't, but the text is dynamic content and can change from page to page, so there is no way to just define constant width for it in pixels.
You could do it like this
<div id="wrapper"> <!-- wrapper will be in the middle of the page -->
<div id="box1"></div> <!-- Your First Box -->
<div id="box2"></div> <!-- Second Box -->
</div>
#wrapper { width: 1000px; margin: 0 auto }
#box1 { width: 400px; float: left; }
#box2 { width: 400px; float: right; }
/* There Will be 200px gap in between of two boxes */
Use display: table with margin: 0 auto for centered block and display: table-cell with percentage padding for its children. Set percentage width for centered block if needed.
Something like this?
HTML:
<!doctype html>
<html>
<body>
<div class="wrapper">
<div class="column">
<div class="column1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in libero interdum ante vulputate viverra non vehicula sapien. Sed ac posuere sapien. Morbi a massa leo, sed hendrerit odio. Aliquam in diam in mauris elementum fringilla. Maecenas vestibulum massa at massa imperdiet eu venenatis velit sagittis. Donec nec libero vel ipsum mattis cursus. Ut vel tortor id lectus rhoncus laoreet. Aliquam volutpat rhoncus arcu et euismod. Phasellus pulvinar condimentum lacus non dictum. In nisi lorem, ultrices quis convallis vel, consectetur vulputate arcu. Quisque malesuada bibendum nulla, at facilisis quam facilisis sed. Pellentesque pellentesque, mi ut dictum suscipit, arcu nisl consequat urna, vitae auctor arcu quam a felis. Proin consectetur fermentum leo sit amet faucibus.
</div>
</div>
<div class="column">
<div class="column2">
Maecenas quis interdum est. Phasellus ut erat nec ligula blandit cursus. Nulla laoreet viverra interdum. Etiam sagittis porttitor elit id egestas. Morbi at nunc turpis, ut interdum magna. Nam eget dui metus. In aliquet dui non nisl porttitor et pretium nisi tristique. Vivamus non eros ut ligula pharetra porta. Suspendisse suscipit dignissim nibh, vitae auctor ligula condimentum et. In sit amet ultrices sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</div>
</div>
</body>
</html>
CSS:
body {padding:30px;}
.wrapper {margin:30px auto;}
.column {width:50%;float:left;}
.column1 {padding-right:20px;}
.column2 {padding-left:20px;}
For the left block, set the left margin to auto. For the right block, set the right. Like this:
#leftBlock {
margin-left: auto;
}
#rightBlock {
margin-right: auto;
}
This puts them back to back in the center of the screen.
To add space in between the blocks, set the other margin to some defined amount:
#leftBlock {
margin-left: auto;
margin-right: 5%;
}
#rightBlock {
margin-right: auto;
margin-left: 5%;
}