This question already has answers here:
Expand a div to fill the remaining width
(21 answers)
Closed 5 months ago.
I have a header div and a content div. The content div is wider than the window, so horizontal scrollbar appears, which is fine. I want the header div to occupy the full width, meaning it should stretch to the same width as the content div below it. By default divs are only wide as the window.
What is the simplest way to accomplish this? Can I do it without using JavaScript or tables? I would be fine using flex layout if that helps.
In the example below I want the red div to be the same width as the green div. Currently the red div stops at the edge of the window.
Note that in real code the content width is determined by the child elements I add to it, not set in CSS. This means I can't just set the width of the header div in CSS to match the width of the content div.
Additional clarification: When scrolling horizontally the header and content must scroll together, because header shows headings for the content below. When scrolling vertically the header stays in place (by using position sticky) while content scrolls.
<html>
<head>
<style>
body {
margin: 0;
}
.header {
background-color: red;
height: 50px;
}
.content {
width: 10000px;
height: 250px;
background-color: blue;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content"></div>
</body>
</html>
Is this what you're after?
* {
margin: 0;
padding: 0;
}
.content {
width: 2000px;
height: 1500px;
background: #eee;
position: relative;
}
.header {
width: 100%;
height: 50px;
background: #ccc;
position: sticky;
top: 0;
}
<div class="content">
<div class="header"></div>
</div>
Try this:
<head>
<style>
body {
margin: 0;
}
.header {
overflow-x: auto;
background-color: red;
height: 50px;
white-space: nowrap;
}
.content {
overflow-x: auto;
height: 250px;
background-color: blue;
white-space: nowrap;
}
</style>
</head>
<body>
<div class="header">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas fringilla phasellus faucibus scelerisque eleifend donec. Nulla aliquet enim tortor at auctor urna. Mattis vulputate enim nulla aliquet. Sit amet massa vitae tortor condimentum lacinia quis vel eros. Tempor id eu nisl nunc mi ipsum. Adipiscing enim eu turpis egestas pretium. Sed odio morbi quis commodo odio aenean sed adipiscing. Pellentesque diam volutpat commodo sed egestas egestas. Felis imperdiet proin fermentum leo vel. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. Gravida dictum fusce ut placerat orci. Blandit massa enim nec dui nunc mattis. Ut morbi tincidunt augue interdum velit euismod in pellentesque.</p>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas fringilla phasellus faucibus scelerisque eleifend donec. Nulla aliquet enim tortor at auctor urna. Mattis vulputate enim nulla aliquet. Sit amet massa vitae tortor condimentum lacinia quis vel eros. Tempor id eu nisl nunc mi ipsum. Adipiscing enim eu turpis egestas pretium. Sed odio morbi quis commodo odio aenean sed adipiscing. Pellentesque diam volutpat commodo sed egestas egestas. Felis imperdiet proin fermentum leo vel. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus et. Gravida dictum fusce ut placerat orci. Blandit massa enim nec dui nunc mattis. Ut morbi tincidunt augue interdum velit euismod in pellentesque.</p>
</div>
</body>
When the .content div overflows a scrollbar will be added for that div only instead of the entire body. You can do the same for .header.
Related
Is it possible to have one div element overflow from the bottom of the first column to the top of the second? The current behaviour is that if the div is too large, it is placed wholly at the top of the second column (see picture below).
I would instead like to have the class-alchemist div begin under the background-acolyte div and then begin at the top of the second column when it becomes too large for the first column, so maybe advanced alchemy would be the first section to display at the top of column two?
I'm only using HTML and CSS currently so non-JavaScript answers would be ideal. However, I can use JS if necessary.
Currently the CSS I'm using for the div that hold's the columns is as below:
display: flex;
flex-flow: column wrap;
height: 1080px;
Because boxes in flex-box are entirely contained in the row, or column, in which they're placed they cannot 'flow' across to a new row, or column. Given your requirements here, I'd suggest using CSS multi-col layout, as follows:
/* CSS custom property for the number of columns: */
:root {
--columnCount: 3;
}
/* simple CSS reset to remove margins, and padding and
setting common styles on fonts and box-sizing: */
*,
::before,
::after {
box-sizing: border-box;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
margin: 0;
padding: 0;
}
/* the wrapping element containing the multiple-column element: */
main {
border: 1px solid #000;
margin-block: 1em;
margin-inline: auto;
padding: 0.5em;
/* specifying a preferred widht of 60viewport-width units, but
limiting maximum width to 1000px and minimum width to
20em: */
width: clamp(20em, 60vw, 1000px);
}
section {
/* columns property triggers multi-col layout, with
the number of specified columns, retrieved from
the --columnCount CSS custom property: */
columns: var(--columnCount);
/* as in grid and flex-box this defines the width
between adjacent columns; in multi-col there's
no 'row-gap' equivalent: */
gap: 0.5em;
}
h3 {
background-color: #030;
color: #fff;
/* using CSS logical properties to specify a margin
on the block-end edge of the element (the bottom
edge in left-to-right, top-to-bottom languages
such as English: */
margin-block-end: 1em;
text-indent: 0.5em;
}
article {
--borderColor: rebeccapurple;
/* the border is to show where each box is, in the
layout: */
border: 2px solid var(--borderColor);
/* forces the browser to render a complete border
around each 'block' of the element, even the
parts of it on different columns: */
box-decoration-break: clone;
}
article:nth-child(even) {
/* setting a vivid border-color for the even-numbered
<article> elements, in order to make the column-span
obvious: */
--borderColor: #f90;
}
article:not(:first-child) {
margin-block-start: 0.5em;
}
p {
margin-inline: auto;
width: 90%;
}
/* using #media to specify different column-counts at different
screen widths, by updating the --columnCount custom property: */
#media screen and (max-width: 1250px) {
:root {
--columnCount: 2;
}
}
#media screen and (max-width: 990px) {
:root {
--columnCount: 1;
}
}
<main>
<section>
<article>
<h3>Section 01</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Egestas maecenas pharetra convallis posuere. Sed enim ut sem viverra aliquet eget sit amet. Malesuada pellentesque elit eget gravida cum sociis. Ac orci phasellus egestas tellus rutrum tellus. Risus viverra adipiscing at in tellus integer feugiat scelerisque. Odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Et malesuada fames ac turpis egestas maecenas pharetra convallis posuere. Orci dapibus ultrices in iaculis nunc. </p>
</article>
<article>
<h3>Section 02</h3>
<p>Orci phasellus egestas tellus rutrum tellus pellentesque. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique senectus. Erat nam at lectus urna duis convallis convallis tellus. Habitant morbi tristique senectus et netus et malesuada. Proin nibh nisl condimentum id. Luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Vitae nunc sed velit dignissim sodales ut. Nunc vel risus commodo viverra maecenas accumsan. Purus viverra accumsan in nisl nisi. Sollicitudin tempor id eu nisl.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In pellentesque massa placerat duis ultricies lacus sed. Interdum posuere lorem ipsum dolor sit. Proin sagittis nisl rhoncus mattis rhoncus. Tortor aliquam nulla facilisi cras. Malesuada fames ac turpis egestas integer eget aliquet. Massa enim nec dui nunc. Viverra nam libero justo laoreet. Aenean pharetra magna ac placerat vestibulum lectus mauris. Varius duis at consectetur lorem donec massa sapien faucibus et. Sed tempus urna et pharetra pharetra. Urna duis convallis convallis tellus id. Viverra tellus in hac habitasse.</p>
</article>
<article>
<h3>Section 03</h3>
<p>Facilisis volutpat est velit egestas dui id ornare. Phasellus faucibus scelerisque eleifend donec pretium vulputate sapien. Faucibus ornare suspendisse sed nisi lacus sed viverra. Urna cursus eget nunc scelerisque viverra mauris in. Malesuada fames ac turpis egestas integer eget. At urna condimentum mattis pellentesque. Phasellus faucibus scelerisque eleifend donec pretium. Nunc non blandit massa enim nec dui nunc mattis enim. Massa tincidunt dui ut ornare. Lorem sed risus ultricies tristique nulla aliquet enim. Et netus et malesuada fames ac turpis egestas maecenas pharetra. At lectus urna duis convallis convallis tellus. Ut tellus elementum sagittis vitae et leo duis ut. Odio ut enim blandit volutpat maecenas volutpat. Integer enim neque volutpat ac. Id eu nisl nunc mi ipsum faucibus. Sed vulputate mi sit amet mauris commodo quis imperdiet. Sit amet nulla facilisi morbi tempus.</p>
</article>
</section>
</main>
Reference:
border.
box-decoration-break.
box-sizing.
clamp().
columns.
CSS Custom Properties.
font-size.
font-weight.
gap.
line-height.
margin.
margin-block.
margin-inline.
#media.
:nth-child().
padding.
padding-block.
padding-inline.
:root.
text-indent.
var().
width.
Bibliography:
"Basic Concepts of Multicol," Mozilla Developer Network.
"When And How To Use CSS Multi-Column Layout," Rachel Andrew, Smashing Magazine.
referring to the following question made by me where i was asking on how could i fit the content between the header and the footer by setting content height minus footer height solved the problem but actually when i try to add the web site to Home screen on any iPhone the footer goes out of screen as the following:
As you can see the footer is visible only in part and to see it i have to scroll the whole page down (not the central content but the page) while that problem doesn't persist on web or Android devices..
I've tryed to subtract more pixels to content height if the device is an iphone but it had no effect, i've tryed the following code:
if (navigator.userAgent.match(/iPhone/i)) {
$('.tableFixHead').addClass('tableFixHead-mobile');
}
.tableFixHead-mobile {
max-height: calc(100vh - 500px) !important;
}
But the view remain still the same, the whole css and html code you can see in the following jsfiddle
If I understand your question correctly, the goal is to always have the header and footer fixed and allow the content in the center to scroll. You've accomplished this with absolute positioning and calculations based on viewHeight
The problem is that the implementation of vh is extremely inconsistent on mobile devices. And these problems are unlikely to change any time soon (see this).
So, I would recommend revamping your layout to reduce the dependency on viewHeight. There are multiple ways to do this but flexbox would give you an easy solution.
Here's a minimal example of how to implement this. You'll have to apply it to your code as needed.
.contentWrapper {
/* this needs to fill the viewport
position fixed will work on modern mobile devices. */
position: fixed;
top:0; right:0; bottom:0; left:0;
/* add flex-box */
display:flex;
flex-direction:column;
}
header, footer {
background-color: darkgray;
flex-basis: 50px;
padding: 20px;
box-sizing: border-box;
}
.mainContentArea {
/* set this to fill the center space */
flex-basis: calc(100% - 100px);
/* make it scroll */
overflow-y: auto;
}
<div class="contentWrapper">
<header>Fixed Header</header>
<div class="mainContentArea">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque nec quam et imperdiet. Nullam vel euismod nisl, sed viverra magna. Cras nec ex ligula. In laoreet ornare nunc ut pellentesque. Phasellus lobortis vehicula lacus, et tempor dui scelerisque sit amet. Cras porttitor leo a mauris eleifend, sed sodales mi tempor. Morbi molestie, est sit amet consequat viverra, lacus arcu lobortis sapien, quis maximus dui sem nec erat. Nullam blandit tellus et dui lacinia aliquam. Morbi non gravida nisl, ac viverra tellus. Donec viverra diam ut malesuada bibendum. Sed vehicula orci eu enim aliquam, ac faucibus mauris molestie.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque nec quam et imperdiet. Nullam vel euismod nisl, sed viverra magna. Cras nec ex ligula. In laoreet ornare nunc ut pellentesque. Phasellus lobortis vehicula lacus, et tempor dui scelerisque sit amet. Cras porttitor leo a mauris eleifend, sed sodales mi tempor. Morbi molestie, est sit amet consequat viverra, lacus arcu lobortis sapien, quis maximus dui sem nec erat. Nullam blandit tellus et dui lacinia aliquam. Morbi non gravida nisl, ac viverra tellus. Donec viverra diam ut malesuada bibendum. Sed vehicula orci eu enim aliquam, ac faucibus mauris molestie.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque nec quam et imperdiet. Nullam vel euismod nisl, sed viverra magna. Cras nec ex ligula. In laoreet ornare nunc ut pellentesque. Phasellus lobortis vehicula lacus, et tempor dui scelerisque sit amet. Cras porttitor leo a mauris eleifend, sed sodales mi tempor. Morbi molestie, est sit amet consequat viverra, lacus arcu lobortis sapien, quis maximus dui sem nec erat. Nullam blandit tellus et dui lacinia aliquam. Morbi non gravida nisl, ac viverra tellus. Donec viverra diam ut malesuada bibendum. Sed vehicula orci eu enim aliquam, ac faucibus mauris molestie.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque nec quam et imperdiet. Nullam vel euismod nisl, sed viverra magna. Cras nec ex ligula. In laoreet ornare nunc ut pellentesque. Phasellus lobortis vehicula lacus, et tempor dui scelerisque sit amet. Cras porttitor leo a mauris eleifend, sed sodales mi tempor. Morbi molestie, est sit amet consequat viverra, lacus arcu lobortis sapien, quis maximus dui sem nec erat. Nullam blandit tellus et dui lacinia aliquam. Morbi non gravida nisl, ac viverra tellus. Donec viverra diam ut malesuada bibendum. Sed vehicula orci eu enim aliquam, ac faucibus mauris molestie.</p>
</div>
<footer>Fixed Footer</footer>
</div>
.footer {
z-index: 9;
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #f5f5f5;
}
The above is your code. Just change from position:absolute to position:fixed.
Run the following snippet, if your question was correctly understood then the result is the visual effect you want to achieve. If yes, then check the dimensions of the elements and their position in the code below.
* {
margin: 0;
padding: 0;
}
body {
display;
flex;
align-items: center;
align-content: center;
justify-content: stretch;
flex-direction: column;
text-align: center;
width: 100%;
height: 100%;
}
header,
footer {
background: #000;
color: #fff;
height: 3rem;
width: 100%;
}
main div {
padding: .5rem 0;
}
main {
background: orange;
width: 100%;
min-height: calc(100% - 6rem);
height: auto;
position: relative;
top: 3rem;
margin-bottom: 2rem;
overflow: hidden;
}
main p {
height: 2rem;
}
header {
position: fixed;
top: 0;
z-index: 1;
}
footer {
position: fixed;
top: calc(100% - 3rem);
}
<header>this is header content</header>
<main>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
</div>
</main>
<footer>this is footer content</footer>
Reading this SO it seems that when setting position: absolute, you must add left: 0 and right: 0 properties to .footer in order that the bottom: 0 will work on iphone and ipad.
Didn't test it myself yet, but it was upvoted so i guess someone else found that useful.
After digging more SO's i found also this that related to this issue.
Worth to mention that caniuseit shows that from version 11 there is full support of absolute position and they not mention any sort of the above..
I guess you will test it before me, hope that will do it.
EDIT: As those SO that i linked above (also) mention, and also following the docs, in order for the position: absolute would work as expected, it parent element should have any position - and that make sens.
Seems that form id="form" is the parent (base on this fiddle), so i would add position: relative; to body itself.
Hope that will work.. Can't test it myself.
Below is a <div> element with it's position property set to sticky:
<div style="position: sticky;"> </div>.
When I insert two sticky <div> elements in a page, they both stick to the top of the page, and stick, in that sense that sticky elements are working, however, they stick at the exact same spot and cover each other up. In my head I imagined that they would both get to the top of the page, when the user scrolls the page, and stick, but I thought they would stack, but as I stated, they don't, one just sits under the other.
Here is an extremely simplified version of my current project. I want the two blocks to stick, one right above the the other.
<html>
<body>
<div style="display: block; position: sticky; width: 100% height: 25px; background: #555">
DIV ONE #1
</div>
<div style="display: block; position: sticky; width: 100% height: 25px; background: #555">
DIV TWO #2
</div>
</body>
</html>
So my question is, how can I add two sticky <div> elements, to the same HTML document, and have one <div> stick to the top of the page when the user scrolls, and the other <div> stick to the bottom of the first <div>, rather than also sticking to the top of the page and covering the that stuck first, up?
To ensure that what I am saying is understood, I have added an interactive example.
Below, the example will show you what is happening within my project — Div Alpha is being covered by Div Beta, and I want Div Beta to stick to the bottom of Div Alpha, so that it doesn't block it.
<!DOCTYPE html>
<html>
<head>
<style>
.div-alpha {
display: block;
text-align: center;
position: sticky;
top: 0;
width: 200px;
height: 200px;
font-size: 30px;
border: 5px solid #FF20B0;
background-color: #000000;
color: #FF20B0;
}
.div-beta {
display: block;
text-align: center;
position: sticky;
top: 0;
width: 200px;
height: 200px;
font-size: 30px;
border: 5px solid #80E000;
background-color: #002040;
color: #80E000;
}
h1 {
color: #401480;
}
p.lorem-ipsum {
width: 350px;
font-size: 18px;
color: #001064
}
p.p-alpha {
font-size: 14px;
color: #FF20B0;
}
p.p-beta {
font-size: 14px;
color: #80E000;
}
</style>
</head>
<body>
<h1>Testing Sticky Divs</h1>
---
<br>
<div class="div-alpha">
DIV ALPHA
<p class="p-alpha">The other div covers me up, and I don't want to be covered up!</p>
</div>
<br>
<div class="div-beta">
DIV BETA
<p class="p-beta"> I don't want to cover the other div, but I do anyway :..(</p>
</div>
<!-- The Code Below is silly filler code that has been inserted so that the page will scroll up & down, which is required for observing the behavior of elements that have their "position" property set to "sticky" (i.e. "position: sticky;") -->
<br>
<br>
<br>
<br>
<h2>Lorem Ipsum Text</h2>
---
<p class="lorem-ipsum">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi ipsum faucibus vitae aliquet nec. Tempus quam pellentesque nec nam aliquam. Purus non enim praesent elementum facilisis leo
vel fringilla est. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Eu consequat ac felis donec et odio pellentesque. In ante metus dictum at tempor commodo. Amet massa vitae tortor condimentum. Sapien eget mi proin sed libero enim sed faucibus
turpis. Tortor at risus viverra adipiscing at. Leo urna molestie at elementum eu facilisis sed. Pharetra diam sit amet nisl suscipit adipiscing. Cursus sit amet dictum sit amet justo donec. Euismod nisi porta lorem mollis. Massa ultricies mi quis
hendrerit. Lorem ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui. Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ornare arcu odio ut sem nulla pharetra. Faucibus et molestie
ac feugiat sed lectus. Commodo quis imperdiet massa tincidunt nunc. At augue eget arcu dictum varius duis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Convallis
posuere morbi leo urna molestie at. Enim sit amet venenatis urna cursus eget nunc scelerisque viverra. Tristique senectus et netus et malesuada fames ac. Faucibus ornare suspendisse sed nisi lacus sed viverra tellus. Ut aliquam purus sit amet luctus
venenatis lectus. Posuere urna nec tincidunt praesent. Aenean et tortor at risus viverra adipiscing at in. Justo eget magna fermentum iaculis eu. Placerat vestibulum lectus mauris ultrices eros in. Pharetra vel turpis nunc eget lorem dolor. Blandit
turpis cursus in hac habitasse platea dictumst quisque. Nisi porta lorem mollis aliquam ut porttitor leo. Lectus nulla at volutpat diam ut venenatis. Proin nibh nisl condimentum id venenatis. Arcu felis bibendum ut tristique et egestas quis ipsum.
Feugiat nibh sed pulvinar proin gravida. Odio facilisis mauris sit amet. Gravida in fermentum et sollicitudin ac. Magna etiam tempor orci eu lobortis elementum nibh. Donec ultrices tincidunt arcu non sodales. Consequat ac felis donec et odio. Amet
mattis vulputate enim nulla aliquet porttitor lacus luctus. Sagittis purus sit amet volutpat consequat mauris nunc. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Diam sit amet nisl suscipit. Viverra tellus in hac habitasse platea
dictumst vestibulum. Praesent tristique magna sit amet purus gravida.
</p>
</body>
</html>
So I figured it out:
Getting 2 Divs to Stick, w/o Covering One Another
There are two ways you can configure the Sticky <div> elements so that they don't cover each other when you scroll down the page.
#1
The first way is to set the property top of the lower div, to be the same combined height as the top div. The key word here is COMBINED which means: The padding and borders need to be added to the height to get an accurate value for top, otherwise the divs will still partially cover one another.
#2
The most simple, straight forward method, would be to create a parent div that is sticky, and then place the two original divs inside of it. Remove the position: sticky; property from the original two <div> elements, so that position sill be set to its default value. Its important that when doing this, you make sure that only the parent container has its position property set to sticky (i.e. position: sticky), or else you'll get undesired results. Below is the questions code rewritten using solution #2.
<!DOCTYPE html>
<html>
<head>
<style>
.div-alpha {
display: block;
text-align: center;
width: 200px;
height: 200px;
font-size: 30px;
text-decoration: underline;
border: 5px solid #08C8FF;
background-color: #900040;
color: #08C8FF;
}
.div-beta {
display: block;
text-align: center;
width: 200px;
height: 200px;
font-size: 30px;
text-decoration: underline;
border: 5px solid #EE1054;
background-color: #00307A;
color: #EE1054;
}
.div-gamma {
display: block;
text-align: center;
position: sticky;
top: 0;
}
p {
width: 350px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Testing Sticky Divs</h1>
---
<br>
<div class="div-gamma">
<div class="div-alpha">DIV ALPHA</div>
<div class="div-beta">DIV BETA</div>
</div>
<br>
<br>
<br>
<br>
<h3>Lorem Ipsum Text</h3>
---
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Mi ipsum faucibus vitae aliquet nec. Tempus quam pellentesque nec nam aliquam. Purus non enim
praesent elementum facilisis leo vel fringilla est. Mattis ullamcorper velit sed ullamcorper morbi tincidunt. Eu
consequat ac felis donec et odio pellentesque. In ante metus dictum at tempor commodo. Amet massa vitae tortor
condimentum. Sapien eget mi proin sed libero enim sed faucibus turpis. Tortor at risus viverra adipiscing at.
Leo urna molestie at elementum eu facilisis sed. Pharetra diam sit amet nisl suscipit adipiscing. Cursus sit
amet dictum sit amet justo donec. Euismod nisi porta lorem mollis. Massa ultricies mi quis hendrerit. Lorem
ipsum dolor sit amet consectetur. Facilisi etiam dignissim diam quis enim lobortis scelerisque fermentum dui.
Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Ornare arcu odio ut sem nulla pharetra. Faucibus et
molestie ac feugiat sed lectus. Commodo quis imperdiet massa tincidunt nunc. At augue eget arcu dictum varius
duis. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse sed. Et molestie ac feugiat sed lectus
vestibulum mattis ullamcorper. Convallis posuere morbi leo urna molestie at. Enim sit amet venenatis urna cursus
eget nunc scelerisque viverra. Tristique senectus et netus et malesuada fames ac. Faucibus ornare suspendisse
sed nisi lacus sed viverra tellus. Ut aliquam purus sit amet luctus venenatis lectus. Posuere urna nec tincidunt
praesent. Aenean et tortor at risus viverra adipiscing at in. Justo eget magna fermentum iaculis eu. Placerat
vestibulum lectus mauris ultrices eros in.
Pharetra vel turpis nunc eget lorem dolor. Blandit turpis cursus in hac habitasse platea dictumst quisque. Nisi
porta lorem mollis aliquam ut porttitor leo. Lectus nulla at volutpat diam ut venenatis. Proin nibh nisl
condimentum id venenatis. Arcu felis bibendum ut tristique et egestas quis ipsum. Feugiat nibh sed pulvinar
proin gravida. Odio facilisis mauris sit amet. Gravida in fermentum et sollicitudin ac. Magna etiam tempor orci
eu lobortis elementum nibh. Donec ultrices tincidunt arcu non sodales. Consequat ac felis donec et odio. Amet
mattis vulputate enim nulla aliquet porttitor lacus luctus. Sagittis purus sit amet volutpat consequat mauris
nunc. Id interdum velit laoreet id donec ultrices tincidunt arcu non. Diam sit amet nisl suscipit. Viverra
tellus in hac habitasse platea dictumst vestibulum. Praesent tristique magna sit amet purus gravida.
</p>
</body>
</html>
Here is an example
div.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: yellow;
padding: 50px;
font-size: 20px;
}
<div class="sticky">
<p> This is your sticky box </p>
</div>
<div>
<p>This is your other divs and properties </p>
</div>
This is what I do to make a navbar that has a functioning responsive mobile drop-down menu. Sounds like you already figured it out, but I thought id give ya some feedback. At the surface, the paradigm, is to put all objects that are supposed to stick in a single sticky container, however; implementing it is much harder than it sounds. Good Luck!
<!DOCTYPE HTML>
<html lang='us-en'>
<head>
<style type='text/css'>
.nav {
position: sticky;
position: -webkit-sticky;
top: 0;
left: 0;
display: grid;
grid-template-columns: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.nav-bar {
background-color: #000;
display: block;
width: 100%;
}
.nav-bar a {
display: inline-block;
font-size: 26px);
text-decoration: none;
margin: 16px 4px 0 12px;
}
/*!!! ~~~ ICONS ~~~ */
#home {
display: block;
float: left;
padding: 12px;
font-size: 38px !important;
}
#bars {
display: none;
float: right;
padding: 4px;
font-size: 38px !important;
}
/*! ~~~ Drop & Drop-Items ~~~ */
.nav-drop {
background-color: #000;
display: none;
width: 100%;
}
.nav-drop button {
display: block;
width: 54%;
margin: 12px 23%;
border: 1px solid #0FF;
padding: 1px;
}
</style>
</head>
<!-- BODY'S MARKUP -->
<body>
<div class="nav">
<div class="nav-bar">
<i id="home" class="fa fa-home" aria-hidden="true" onclick="go2('home')"> </i>
HOME |
ABOUT |
CONTACT |
FORUM
<i id="bars" class="fa fa-bars" aria-hidden="true" onclick="dropMenu()"></i>
</div>
<div id="nav-drop" class="nav-drop">
<button onclick="go2('about')">ABOUT</button>
<button onclick="go2('contact')">CONTACT</button>
<button onclick="go2('forum')">FORUM</button>
</div>
</div>
</body>
</html>
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>
I can't see what I'm doing wrong here. I'm working with the widths and margins of a three column layout and I want to widen the right sidebar into the white space to the left.
But when I increase the width of #sidebar-right above 22%, both sidebars drop down below the content. I'm missing something having to do with the combined widths and margins.
HTML and CSS are below the image. This is also a responsive structure, if that makes a difference. I need to stay with this CSS and HTML as it is a WordPress theme, and I don't want to move into another type of CSS column or box structure.
Update 10/23/12 I gave up on trying to adapt the current CSS and HTML and changed to box layout model CSS for page templates because the box model works well and I am able to simplify my page templates, too.
Any ideas?
HTML:
<body class="three-column">
<div id="page">
<div id="main">
<div id="primary">
<div id="content" role="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
</div>
<div id="sidebar-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
<div id="sidebar-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
</div>
</div> (some closing divs omitted for clarity).
CSS:
#page {
margin: 1em auto;
max-width: 1075px;
}
#main #secondary {
float: none;
margin: 0 7.6%;
width: auto;
}
.three-column #page {
max-width: 1075px;
}
.three-column #primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
.three-column #content {
margin: 0 34% 0 20%;
width: 44%;
border:1px solid #c2c2c2;
padding:10px;
}
.three-column #sidebar-right {
float: right;
margin-right: 1.5%;
width: 22%;
border:1px solid #c2c2c2;
padding:10px;
}
.three-column #sidebar-left{
position:relative;
float: left;
width: 15%;
margin-left: -72%;
border:1px solid #c2c2c2;
padding:10px;
}
Your issue is the -26.4% right margin on #primary and the -72% left margin on #sidebar-left.
I've made a Fiddle with those adjusted; I dropped the side-bar left left margin (but kept 1.5% for padding's sake), and adjusted #primary's right margin to -100%.
http://jsfiddle.net/mstauffer/CtkyN/1/
This is still pretty darn hack-y. If there's any way you can, you'll have a much better experience re-working the HTML and CSS.. but if not, that fiddle will at least allow you to re-size the right sidebar as you want within this existing framework.
Update: I don't have credible sources, but I can explain the CSS math. In general, you're using negative margins on #primary to lay the other two divs in areas #primary would normally occupy. Normally, the only way to make divs overlap like this would be by setting them to position: fixed or position: absolute. Because those are so hard, a layout like this would normally be accomplished with three left floats (or in the future, flexbox), but because of the order of your HTML that's not possible.
Instead, you're forced to convince the CSS renderer that #primary doesn't mind being over-laid... which you do by setting a negative margin of -100%, essentially saying, "Here, have all this space, it's fine for you to overlap it." Once you've opened up the space, you then use the left and right floats (and the width constriction) to place the sidebars in the blank spaces on either side of #content.
I hope that helps!
I think the problem is specifically here:
.three-column #content {
margin: 0 34% 0 20%;
}
margin: top right bottom left;
so you have to decrease the right margin to let the right sidebar expand.
din't try it. you better test it.
use this code:-
HTML
<body class="three-column">
<div id="page">
<div id="main">
<div id="primary">
<div id="sidebar-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
<div id="content" role="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
</div>
<div id="sidebar-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
</div>
</div> (some closing divs omitted for clarity).
CSS
#page {
margin: 1em auto;
max-width: 1075px;
}
#main #secondary {
float: none;
margin: 0 7.6%;
width: auto;
}
.three-column #page {
max-width: 1075px;
}
.three-column #primary {
float: left;
margin: 0 -26.4% 0 0;
width: 100%;
}
.three-column #sidebar-left{
position:relative;
float: left;
width: 15%;
}
.three-column #content {
margin: 0 34% 0 20%;
width: 44%;
border:1px solid #c2c2c2;
padding:10px;
float: left;
}
.three-column #sidebar-right {
float: left;
margin-right: 1.5%;
width: 22%;
border:1px solid #c2c2c2;
padding:10px;
}
Its very easy actually your very near you forgot that padding is adding to the width of your content so if you have 3 divs with 20% width and 10% margin & 10% padding on each side you would get beyond the 100% you have to move with.
Working JSfiddle here
Others have already given you the explanation. I just wanted to add the visual representation to make it easier to see the problem.
.three-column #content div is the middle content it need to have margin left as #sidebar-left div width + padding and margin right as #sidebar-right div width + padding and no need to fix the width for the middle content.
Check the sample and code.
Edit: I did not see the comment that you had to stay with the same CSS. Possibly this can be used in addition to what you currently have, but if not please disregard.
If you use a row-fluid along with div spans you can scale them without having as many issues. The CSS is in fiddler.
http://jsfiddle.net/GeyHC/1/
<div class="row-fluid">
<div class="span2" id="content" role="main" style="border:1px solid #c2c2c2;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
<div class="span6" id="sidebar-right" style="border:1px solid #c2c2c2;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
<div class="span2 offset1" id="sidebar-left" style="border:1px solid #c2c2c2;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
</div>
EDIT:
I did a three column layout that might work for you.
HTML
<body class="three-column">
<div id="page">
<div id="main">
<div id="primary">
<div id="container">
<div id="sidebar-left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
<div id="sidebar-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Mauris a eros eu sem sollicitudin vulputate. Maecenas ac ante libero,
quis volutpat diam. Etiam eleifend arcu eu enim tincidunt ornare. Sed
imperdiet viverra bibendum. Proin a enim et turpis tempus mattis vitae
et ipsum. In et ligula eget tellus malesuada pretium sed ut ipsum.
</div>
</div>
</div>
</div>
</div>
</body>
CSS
#container {
text-align: left;
margin: 0px auto;
padding: 0px;
border:0;
width: 80%;
}
#sidebar-left {
float: left;
width: 30%;
min-height: 300px;
background-color: #cccccc;
}
#sidebar-right {
float: left;
width: 25%;
min-height: 300px;
background-color: #cccccc;
}
#content {
float: left;
width: 30%;
min-height: 300px;
background-color: #999999;
}
I also noticed that having a border cause problems for the layout. May be adding following will help to keep the border inside the div.
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
See this article.
Hope this helps.