It was my understanding, that if an element with position:sticky is nested within a parent element: when the parent leaves the viewport, that "sticky" element will leave with it.
Here I have a "sticky" <ul> within a <nav> within <main>. When scrolling through the main element, when the <nav> would normally scroll off-screen, it instead behaves as if it's become position:sticky. However, if I change the display of the <nav> to be either block or inline-block, it behaves as I thought that it would. What's happening here?
body {
border: 2px dotted gray;
padding: 2rem;
}
nav {
display: inline;
}
ul {
top: 0;
position: sticky;
width: 100%;
list-style: none;
padding: 1rem 0;
display: flex;
gap: 1rem;
font-weight: bold;
border: 2px dotted gray;
background: white;
}
<body>
<main>
<nav>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</nav>
<h1>Main Heading</h1>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis enim ipsum. Quisque vel lacinia urna. Aenean et cursus nisi. Mauris eleifend fermentum elit, id finibus sem varius id. Duis imperdiet massa at velit ultrices gravida id sit amet ipsum. Praesent convallis quis metus nec dignissim. Etiam et odio id odio tincidunt bibendum quis vel urna. Cras ultricies diam eget nisl posuere, vel mollis sapien venenatis. Nulla eu diam hendrerit, gravida dolor vitae, cursus nulla.</p>
<p>Maecenas vulputate viverra diam elementum volutpat. Sed vulputate ac velit et tincidunt. Mauris eget nisl ut mauris eleifend accumsan. Phasellus accumsan ultricies leo, vitae gravida tellus rutrum sed. Proin condimentum pulvinar rhoncus. Duis quis massa ligula. Cras ac est aliquet, facilisis leo nec, scelerisque arcu. Nunc ultricies sollicitudin semper. Nulla varius laoreet posuere. Suspendisse hendrerit nulla id mi rhoncus iaculis. Donec interdum ultricies risus, eget malesuada justo pellentesque placerat. Cras convallis eget dolor in tempus. Ut imperdiet tellus eu nibh bibendum rutrum.</p>
<p>Integer eros purus, porta non rhoncus a, accumsan et lectus. Ut a ullamcorper purus. Proin mattis fermentum lorem varius mollis. Nullam imperdiet, neque auctor sodales molestie, nulla enim suscipit leo, id cursus nibh quam vel neque. Curabitur mauris nunc, varius id pharetra sed, elementum nec tellus. Morbi luctus auctor egestas. Cras accumsan arcu ullamcorper porttitor imperdiet. Sed semper magna nec nibh venenatis, sed laoreet neque malesuada. Aenean sit amet erat molestie, efficitur lacus vitae, laoreet lectus. Proin elit enim, ultrices nec nibh eget, vehicula maximus odio. Nunc egestas dapibus porta. Mauris aliquet bibendum ultrices.</p>
<p>Praesent efficitur sit amet magna bibendum bibendum. In convallis nisl aliquam vulputate gravida. Praesent ornare pretium dapibus. Aliquam malesuada in metus eget eleifend. Morbi at cursus augue, sed sagittis dolor. Pellentesque facilisis urna metus, et maximus risus tristique et. Cras blandit condimentum pulvinar. Fusce mattis egestas tortor, ut aliquam libero ultrices eu. Praesent mauris enim, egestas id tristique in, mollis in tellus. Integer tristique augue quis lorem facilisis, non convallis lorem consequat. Morbi sagittis at mi ac finibus. Vivamus eget diam nec quam lobortis viverra. Morbi viverra ut odio non vehicula.</p>
<p>Proin faucibus tortor quis nisl placerat, eget commodo ante iaculis. Proin quis aliquam ante, a iaculis nisi. Vivamus porta mi et neque ullamcorper mattis. Suspendisse cursus, urna et placerat posuere, risus arcu tempor nunc, eget hendrerit nulla ex maximus ante. Morbi elit mauris, vestibulum vel elementum et, mattis non quam. Quisque aliquet congue quam, id dictum nunc scelerisque in. Mauris ipsum risus, vestibulum venenatis lorem vitae, porta semper ante. Aliquam eu velit vitae neque iaculis vestibulum id a magna. Integer malesuada at lacus ac vulputate.</p>
</div>
</main>
</body>
It's all about "containing block". sticky position doesn't consider the parent element but consider its containing block which is the parent element in most of the cases but in your case it's not because:
For other elements, if the element's position is 'relative' or 'static', the containing block is formed by the content edge of the nearest ancestor box that is a block container or which establishes a formatting context. ref
sticky is not mentioned there but it behave the same as relative and static (https://www.w3.org/TR/css-position-3/#def-cb)
If you check the definition of sticky you can read:
Identical to relative, except that its offsets are automatically adjusted in reference to the nearest ancestor scroll container’s scrollport (as modified by the inset properties) in whichever axes the inset properties are not both auto, to try to keep the box in view within its containing block as the user scrolls. This positioning scheme is called sticky positioning. ref
So the containing block in your case is no more nav but main
Related
I was wondering if there is a way to make a div with position fixed immobile, so if the user scrolls the div will be immobile to the initial position. I need it because I have a toast spawning inside another div, and I need this toast in foreground otherwise it will spawn inside the div (with scrollbar and partially visible).
That's an example image to explain better:
With position absolute:
With position fixed (the desired effect):
That's my component code (it's a child component):
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" style="position:absolute; z-index:999; left:80%; width:300px;opacity:1;cursor:unset !important" *ngIf="!isCollapsed && onlyOnePopup == dataItem.Id">
<div class="toast-header" style="background-color: #00549F;">
<strong class="mr-auto" style="color:#fff;"></strong>
<button (click)="onlyOnePopup = null && isCollapsed = true" type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
<span aria-hidden="true" class="close" style="color:white;">×</span>
</button>
</div>
<div class="toast-body" style="font-family:Font; white-space:pre-line; color:black; cursor:unset">
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</div>
</div>
Use position: fixed, and then set the exact position that you want. Here's a snippet showing you an example of how to do it.
body {
height: 2000px;
background-color: aqua;
}
.fixed-div {
width: 200px;
heigth: 200px;
background-color: white;
padding: 50px;
position: fixed;
top: 0px;
right: 0px;
margin-right: 20px;
margin-top: 20px;
}
<html>
<head></head>
<body>
<div class="fixed-div">
Fixed Div
</div>
</body>
</html>
Instead of left: 80% try bottom: 0; right: 0 along with position: fixed; and then set right-margin accordingly.
the main thing is to set the height of html as 100vh (veriable height) and width to 100vw(veriable width). this will set your page to 100% of the space available in the browser window regardless of size. then set the toast div to fixed with the right and bottom set where you like (0 for bottom and right puts it in the lower right corner completly)
you cannot set a fixed point with no reference to what it should be fixed to. so by setting the html page size explicitly, the fixed position can be set based off that.
html {
height: 100vh;
width: 100vw;
}
.toast {
position: fixed;
right: 1rem;
bottom: 1rem;
background-color: rgb(0, 255, 255, 0.8);
padding: 1rem;
height: 2.5rem;
width: 15rem;
}
.display-content {
max-height: 100vh;
overflow-y scroll;
}
<div class="display-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur felis neque, et viverra tellus fermentum eget. Quisque nunc tellus, pulvinar id felis sed, sodales iaculis magna. Morbi sodales pellentesque sapien, nec dignissim augue. Integer odio enim, posuere et convallis et, ultricies in odio. Curabitur felis libero, iaculis et elit in, feugiat tempor augue. Duis finibus mattis leo eu facilisis. In faucibus tincidunt dui. Nullam pulvinar est vel mauris rhoncus euismod. Praesent vel pharetra neque, vitae sollicitudin enim. Nunc placerat sagittis malesuada. Suspendisse potenti. In tempus risus eget dapibus semper. Vestibulum vitae elit congue, tempor quam at, ultricies mauris.
</p>
<p>
Suspendisse ut ullamcorper libero. Quisque consectetur gravida nisi, non faucibus turpis iaculis nec. Phasellus vulputate, tellus sed dapibus dapibus, turpis mauris facilisis eros, eu sagittis quam ante eget felis. In nec nisl at lorem tincidunt vulputate vel eu est. Phasellus ipsum velit, placerat quis pulvinar non, auctor at ex. Nam pharetra dolor a semper feugiat. In sed commodo mauris. Aenean in turpis sed orci molestie efficitur quis id orci. Duis laoreet leo a nulla interdum hendrerit. Suspendisse molestie tristique semper. Vestibulum convallis purus et orci mollis sodales. Praesent ut lectus laoreet, suscipit velit nec, pharetra neque.
</p>
<p>
Morbi placerat metus a eros viverra, luctus ultricies eros fringilla. Nunc mollis lorem at lacus lobortis, vitae blandit ex condimentum. Maecenas et ultricies tortor, sit amet ornare risus. Nunc id nisl et ligula commodo vehicula in et risus. Pellentesque molestie et risus quis lacinia. Quisque quis risus laoreet, venenatis enim nec, hendrerit nisl. Nulla facilisi. Pellentesque pretium turpis vestibulum urna auctor sodales. Vivamus mattis sem eu tellus scelerisque tempus. Sed venenatis felis in mollis suscipit. Sed quis felis ac erat facilisis pellentesque eget nec purus. Phasellus libero odio, semper sed auctor at, ultrices non nibh. Proin consectetur metus sed ultrices aliquam. Pellentesque placerat, nibh vitae semper sodales, mauris elit vestibulum mauris, sit amet condimentum odio est tincidunt neque. Quisque metus lacus, ullamcorper non accumsan nec, placerat et lectus.
</p>
<p>
Vestibulum nec sem ex. Pellentesque volutpat quam eget justo rhoncus congue. Etiam in lorem pellentesque, pulvinar turpis non, dignissim nibh. Etiam eget urna congue, sodales nulla eget, fringilla lorem. Aliquam suscipit dapibus augue eget mollis. Phasellus feugiat sagittis massa, in posuere odio ultrices eu. Aliquam erat volutpat. Morbi eleifend augue vel sagittis pellentesque. Cras auctor interdum purus non fermentum. Aliquam erat volutpat. Integer elit mi, molestie vitae pulvinar vel, elementum et dui. Pellentesque leo risus, elementum eu accumsan nec, pharetra non massa. Phasellus pulvinar mollis aliquam.
</p>
<p>
Sed elementum facilisis erat, in molestie tortor varius ut. Vestibulum dapibus dolor quis mi malesuada, id venenatis ante vulputate. Aliquam fermentum viverra ante, sit amet rhoncus turpis laoreet vel. Vestibulum a vestibulum dolor. Mauris ut efficitur nunc. Donec sit amet consectetur orci. Ut at erat non sem mattis dictum. Aliquam vestibulum nulla nunc, nec varius est vestibulum sit amet.
</p>
<p>
Aenean imperdiet eros non eleifend molestie. Nullam venenatis nibh non pellentesque imperdiet. Quisque volutpat eros non odio convallis ultricies. Etiam convallis facilisis libero, a commodo tellus condimentum quis. Curabitur congue erat ut tincidunt eleifend. Donec tincidunt ullamcorper consequat. Etiam iaculis elementum fermentum.
</p>
<p>
Fusce vehicula libero nisl. Aliquam tempor sem at lacinia facilisis. Donec vestibulum sit amet augue non rhoncus. Nulla sagittis leo elit, a interdum metus dapibus in. Nulla in mattis nunc. Sed sit amet est in tellus vehicula molestie vel tempor nisl. Donec dignissim est lectus, ac pharetra neque bibendum nec.
</p>
<p>
Sed porta dui eget turpis scelerisque rutrum. Aliquam eu diam nec nunc ultrices hendrerit. Quisque convallis metus vitae tellus fermentum finibus. Cras id ullamcorper nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed gravida lorem non blandit porta. Aliquam ac dui laoreet, interdum dui vel, pellentesque arcu. Aenean gravida nunc sit amet arcu rhoncus mollis. Nullam sit amet risus at urna dictum pharetra. Nunc maximus condimentum dui, sed hendrerit metus pretium et. Curabitur eu sollicitudin lorem, et luctus magna. Donec tincidunt id purus sed placerat. Proin vel tristique velit. Donec ornare nisi at laoreet luctus. Integer id metus molestie, fermentum massa non, porta diam.
</p>
<p>
Quisque at volutpat augue. Maecenas porttitor ornare scelerisque. Ut pretium sapien a placerat dapibus. Fusce vel urna eu sem blandit euismod. In imperdiet eros sit amet quam tempor aliquam. Morbi volutpat tincidunt massa, non convallis dui pharetra nec. Ut velit odio, pellentesque mollis sodales et, eleifend ac libero. Curabitur orci ante, varius ac congue id, rutrum id leo. Pellentesque massa massa, lacinia pretium sapien ut, dignissim congue ipsum. Aliquam commodo leo in nisl pharetra, sed viverra est auctor.
</p>
</div>
<div class="toast">This is a toast</div>
This question already has answers here:
Applying a background to <html> and/or <body>
(2 answers)
Closed 2 years ago.
I understand the width & height of the visual viewport, as defined by this article, at least on a desktop, is the dimensions of the visible rectangle a user can see when they scroll to the top left of the page.
Why is the background red for, what looks like, the visual viewport when the html's height is 0?
html {
background-color: red;
}
body {
line-height: 20px;
margin: 0px;
}
<html>
<body>
</body>
</html>
A couple of misconceptions here.
First of all, not all CSS properties are inherited in the cascade.
You can look up any CSS property here and then see the formal definition. For instance, here is the formal definition for height:
Initial value: auto
Applies to: all elements but non-replaced inline elements, table columns, and column groups
Inherited: no
Percentages: The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.
Computed value: a percentage or auto or the absolute length
Animation type: a length, percentage or calc();
You can see that height is not inherited, and it's default value is auto, whose definition says "The browser will calculate and select a height for the specified element.". When the browser calculates the height of an element, it will make it as small as possible while still fitting all the content inside.
The width property is also not inherited; to understand how width is calculated by default you must know the difference between block elements and inline elements. In short, a "block" element fills its parent's width, while an inline element (like span) takes up its minimum width. Every html tag is naturally either a block or inline element (except some special ones, like form fields, which are "replaced" elements), and you can always make a block element behave like an inline one (or vice-versa) using the CSS display property.
Things get a little less consistent with the root html element. Some browsers have that root element's initial height set to "auto", and some give it an initial minimum height of 100% of the viewport. The body element, however, will consistently have an unset (auto) height. Backgrounds on the html and body elements have an additional subtlety as described here.
Furthermore, the "visual viewport" (as you call it) is a scrolling container, meaning its children can be larger than the container. The scrollbar you see when your HTML is taller than the viewport belongs to the viewport, not to the html element.
You can reproduce this with divs:
.viewport {
height: 50px;
overflow: scroll;
}
<div class="viewport">
<div class="body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor augue quis mi finibus, in tempus est finibus. Aenean aliquet ultricies magna eu posuere. Sed augue erat, placerat sit amet massa dignissim, aliquam placerat nisl. Donec et lacus molestie,
semper dolor sit amet, mattis erat. Pellentesque id enim urna. Aliquam posuere neque orci, et iaculis ex scelerisque vitae. Duis congue placerat eros a semper. Sed porttitor arcu ipsum, sed luctus est tempus at. Mauris ut fermentum tellus, sed suscipit
risus. Maecenas sit amet dignissim urna. Suspendisse ullamcorper nisi urna, id porttitor urna lacinia eget. Curabitur id ornare dolor. Pellentesque in augue tristique, convallis erat eget, malesuada elit. Suspendisse potenti. Fusce sollicitudin semper
nibh et porttitor. Nullam fringilla varius ligula, quis semper dui sollicitudin sed. Mauris cursus odio ut libero ornare, ut feugiat ipsum volutpat. Pellentesque lobortis sollicitudin orci sed viverra. Pellentesque in ipsum dui. Curabitur commodo
aliquet ante eu tempor. Proin justo eros, pharetra eget ultricies nec, mollis id nisl. Sed vehicula fermentum mi, et mollis tortor imperdiet quis. Aliquam erat volutpat. Quisque vel nunc ultricies, porttitor lacus a, laoreet ex. Donec lobortis semper
diam et tempus. Proin eu ex id nibh porttitor condimentum. Nulla facilisi. Suspendisse porta libero vel consequat vehicula. Suspendisse malesuada ipsum massa, in dignissim arcu rhoncus eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia curae; Praesent eu iaculis odio, non pulvinar neque. Aliquam eu diam a ligula tincidunt fermentum. Nullam convallis lorem at lectus pulvinar, eget tincidunt mauris pretium. Cras sollicitudin lacus quis dictum malesuada. Integer porttitor
sodales convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque bibendum faucibus lacus. Sed sagittis quam non finibus placerat. Nunc eros libero, dignissim vel interdum ac, rutrum et ex. Integer
nec scelerisque nisi. In at ante nibh. Vivamus vehicula erat et lacus tincidunt hendrerit. Pellentesque porttitor, eros sed tincidunt molestie, mi tortor interdum velit, at convallis neque lacus eu massa.
</div>
</div>
If you want the html element to be exactly the viewport size, with the body element scrolling inside the html element, you can do that with CSS.
You may or may not already know about the "Viewports Units", a measurement unit which can be used in CSS. This allows you to set size and distance measurements based on a percentage of the viewport's height or width. This is very useful for exactly this purpose.
html
{
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
overflow: scroll;
background: #000;
color: #fff;
}
body {
min-height: 100vh;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor augue quis mi finibus, in tempus est finibus. Aenean aliquet ultricies magna eu posuere. Sed augue erat, placerat sit amet massa dignissim, aliquam placerat nisl. Donec et lacus molestie, semper dolor sit amet, mattis erat. Pellentesque id enim urna. Aliquam posuere neque orci, et iaculis ex scelerisque vitae. Duis congue placerat eros a semper.
</p>
<p>
Sed porttitor arcu ipsum, sed luctus est tempus at. Mauris ut fermentum tellus, sed suscipit risus. Maecenas sit amet dignissim urna. Suspendisse ullamcorper nisi urna, id porttitor urna lacinia eget. Curabitur id ornare dolor. Pellentesque in augue tristique, convallis erat eget, malesuada elit. Suspendisse potenti. Fusce sollicitudin semper nibh et porttitor. Nullam fringilla varius ligula, quis semper dui sollicitudin sed. Mauris cursus odio ut libero ornare, ut feugiat ipsum volutpat.
</p>
<p>
Pellentesque lobortis sollicitudin orci sed viverra. Pellentesque in ipsum dui. Curabitur commodo aliquet ante eu tempor. Proin justo eros, pharetra eget ultricies nec, mollis id nisl. Sed vehicula fermentum mi, et mollis tortor imperdiet quis. Aliquam erat volutpat. Quisque vel nunc ultricies, porttitor lacus a, laoreet ex. Donec lobortis semper diam et tempus. Proin eu ex id nibh porttitor condimentum. Nulla facilisi.
</p>
<p>
Suspendisse porta libero vel consequat vehicula. Suspendisse malesuada ipsum massa, in dignissim arcu rhoncus eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent eu iaculis odio, non pulvinar neque. Aliquam eu diam a ligula tincidunt fermentum. Nullam convallis lorem at lectus pulvinar, eget tincidunt mauris pretium. Cras sollicitudin lacus quis dictum malesuada. Integer porttitor sodales convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
<p>
Pellentesque bibendum faucibus lacus. Sed sagittis quam non finibus placerat. Nunc eros libero, dignissim vel interdum ac, rutrum et ex. Integer nec scelerisque nisi. In at ante nibh. Vivamus vehicula erat et lacus tincidunt hendrerit. Pellentesque porttitor, eros sed tincidunt molestie, mi tortor interdum velit, at convallis neque lacus eu massa.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor augue quis mi finibus, in tempus est finibus. Aenean aliquet ultricies magna eu posuere. Sed augue erat, placerat sit amet massa dignissim, aliquam placerat nisl. Donec et lacus molestie, semper dolor sit amet, mattis erat. Pellentesque id enim urna. Aliquam posuere neque orci, et iaculis ex scelerisque vitae. Duis congue placerat eros a semper.
</p>
<p>
Sed porttitor arcu ipsum, sed luctus est tempus at. Mauris ut fermentum tellus, sed suscipit risus. Maecenas sit amet dignissim urna. Suspendisse ullamcorper nisi urna, id porttitor urna lacinia eget. Curabitur id ornare dolor. Pellentesque in augue tristique, convallis erat eget, malesuada elit. Suspendisse potenti. Fusce sollicitudin semper nibh et porttitor. Nullam fringilla varius ligula, quis semper dui sollicitudin sed. Mauris cursus odio ut libero ornare, ut feugiat ipsum volutpat.
</p>
<p>
Pellentesque lobortis sollicitudin orci sed viverra. Pellentesque in ipsum dui. Curabitur commodo aliquet ante eu tempor. Proin justo eros, pharetra eget ultricies nec, mollis id nisl. Sed vehicula fermentum mi, et mollis tortor imperdiet quis. Aliquam erat volutpat. Quisque vel nunc ultricies, porttitor lacus a, laoreet ex. Donec lobortis semper diam et tempus. Proin eu ex id nibh porttitor condimentum. Nulla facilisi.
</p>
<p>
Suspendisse porta libero vel consequat vehicula. Suspendisse malesuada ipsum massa, in dignissim arcu rhoncus eu. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent eu iaculis odio, non pulvinar neque. Aliquam eu diam a ligula tincidunt fermentum. Nullam convallis lorem at lectus pulvinar, eget tincidunt mauris pretium. Cras sollicitudin lacus quis dictum malesuada. Integer porttitor sodales convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
<p>
Pellentesque bibendum faucibus lacus. Sed sagittis quam non finibus placerat. Nunc eros libero, dignissim vel interdum ac, rutrum et ex. Integer nec scelerisque nisi. In at ante nibh. Vivamus vehicula erat et lacus tincidunt hendrerit. Pellentesque porttitor, eros sed tincidunt molestie, mi tortor interdum velit, at convallis neque lacus eu massa.
</p>
I am creating a website in which the minimum height of the page is 200vh. I have a full page image, followed by text content below that. I want to prevent the text from overflowing out of the container. Here is an example:
* {
margin: 0;
padding: 0;
}
.container {
position: absolute;
width: 100%;
min-height: 200vh;
background: red;
}
.full-page-image {
background-image: url("https://i.ytimg.com/vi/xC5n8f0fTeE/maxresdefault.jpg");
background-size: cover;
position: absolute;
height: 100vh;
width: 100%;
}
.content {
position: relative;
top: 100vh;
left: 10vw;
width: 80vw;
}
.content p {
font-size: 1.4em;
}
<div class="container">
<div class="full-page-image">
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus interdum leo at hendrerit pulvinar. Integer non lacus dapibus, dictum ipsum sed, gravida erat. Quisque fermentum fermentum arcu, ac sollicitudin est. Mauris nec pulvinar mi, eu eleifend nisi. Cras lorem ligula, condimentum eget dictum quis, dapibus et est. Quisque tincidunt libero sit amet odio tincidunt, quis bibendum neque malesuada. Proin elementum nulla diam, ac porta est sodales at. Cras ac tortor in odio scelerisque scelerisque. Vestibulum eu ligula semper, lacinia purus ac, auctor orci. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Vestibulum aliquam nisi ligula, scelerisque imperdiet ante consequat ut. Proin est dolor, egestas a sapien vitae, ultricies euismod ex. Nam eget euismod ante. Praesent finibus sed nisi tincidunt pretium. Vestibulum porta laoreet sapien, et congue odio posuere eu. Proin nec lectus vel libero vestibulum tincidunt. In dapibus a nisl eu imperdiet. Donec faucibus odio a metus sagittis, et vulputate dui dapibus. Etiam non ex libero. Duis ultricies dignissim nulla, in mollis sem condimentum vitae. Etiam tincidunt sed dolor vitae venenatis. Maecenas volutpat felis eu vehicula pharetra. Donec a turpis lacus. Aenean tortor justo, iaculis ut erat eu, rhoncus sagittis elit. Nullam non sapien purus. In at consectetur augue, sit amet mollis justo.
Suspendisse feugiat quam vitae massa tempor luctus. Duis aliquam commodo dolor et commodo. Aenean sit amet nisl vitae quam tincidunt molestie id ac enim. Fusce eu ante imperdiet, viverra lacus at, efficitur risus. Vestibulum placerat, libero quis luctus faucibus, diam nisl tempor justo, eu tempus mauris ligula in libero. Pellentesque ut odio quis orci interdum gravida vitae ut neque. In hac habitasse platea dictumst. Ut finibus mi vitae enim euismod auctor. Integer libero dui, laoreet vel euismod vitae, eleifend mattis urna. Praesent convallis sodales elit, vel elementum purus dapibus nec. Curabitur euismod ullamcorper dolor, a egestas nibh porttitor rhoncus. Nam elementum bibendum elementum.
Fusce non nibh quis odio tempor lobortis ut et lorem. Quisque volutpat dapibus mauris, vitae varius ipsum sollicitudin malesuada. Etiam ultricies sapien tortor, et vehicula ipsum volutpat sollicitudin. Nulla id nisl nunc. Sed sit amet iaculis lacus. Nulla egestas ex purus, eget elementum nibh molestie et. Vivamus sodales rhoncus varius. Donec malesuada, quam et pharetra aliquet, odio erat gravida nunc, nec vehicula tellus diam in purus. Curabitur feugiat tempor nulla, euismod ornare lorem consequat at. Nam rutrum arcu porta nulla convallis viverra. Mauris pharetra velit arcu, ac placerat quam ornare ut. Morbi vitae diam quis turpis fringilla ornare at in urna. Nulla elit lectus, molestie sit amet risus nec, pretium vehicula diam. Morbi velit massa, accumsan eget iaculis eget, pharetra at ex. Duis purus eros, iaculis nec enim at, dignissim pellentesque purus. Nulla convallis, erat quis elementum posuere, metus libero malesuada erat, eu pharetra mauris libero id lacus.
Curabitur placerat accumsan hendrerit. Proin vel mauris eget justo fringilla volutpat eget a libero. Nullam iaculis varius fringilla. Morbi in urna mi. Pellentesque sit amet lacinia odio. Nunc vel dolor aliquet, vulputate magna non, consequat purus. Mauris non malesuada est, nec congue ante. Sed sit amet vestibulum nunc, id hendrerit urna. Ut porta eget risus a tincidunt. Aliquam ut dui elit. Nulla quis varius sapien, vulputate auctor mi. Phasellus rhoncus vestibulum purus, vestibulum porttitor libero mattis in. Aenean elit velit, ultrices in lacinia et, lobortis id tortor. Quisque dapibus cursus lorem, et consequat tellus pretium eu. Maecenas vitae magna bibendum mi placerat pellentesque.
</p>
</div>
</div>
How can I prevent the text from going outside of the red background?
You can prevent text overflowing a container by either 1. expanding the container to fit the text, or 2. hiding the overflowing text beyond the container.
1:
a. In your case, usage of top: 100vh will not change the height of the element, but will push the entire element downwards 100vh. Therefore it will overflow the parent/container element (the red background) by 100vh. The text inside this element will reach to the bottom, also overflowing by 100vh. Use margin-top: 100vh instead, to let the element start 100vh from the top, but end within it's parent element.
2:
a. Ensure the container is the desired height. Use dev tools to view/highlight the height of an element.
b. Set overflow: scroll; or overflow: hidden; see css overflow This will hide the text beyond the container height, with either scrollbars or not. Note: overflow: auto will (should) not show scrollbars if there is no overflow.
Pretty sure this what you are looking for:
.container {
position: absolute;
width: 100%;
min-height: 200vh;
overflow-y: auto;
background: red;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow
I have a basic layout with a block of text above and below and image like this..
.image_holder img {position:absolute;top:0;left:0;}
.image_holder{position:relative;}
<div class="test1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tellus mauris, pharetra a ligula ut, aliquam accumsan sem. Etiam semper, mauris vel congue laoreet, tellus quam ultrices mi, vel fringilla magna tortor eu massa. Phasellus aliquet semper lacus. Nullam vehicula purus non nunc facilisis tincidunt posuere ut lacus. In viverra viverra bibendum. Sed placerat mollis scelerisque. Sed ultricies diam ut velit ornare molestie. Nam commodo elit lorem, vel fringilla dui venenatis non. Duis condimentum nisl ut risus egestas malesuada. In at accumsan ex. Curabitur quis magna sodales, laoreet dui nec, ullamcorper libero. Integer rhoncus, magna non rutrum scelerisque, leo odio ornare sapien, a ullamcorper nunc urna a risus. Duis sit amet diam sollicitudin, condimentum enim nec, ullamcorper erat.
</div>
<div class="image_holder" style="position:relative;">
<img id="image1" src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="test2">
Quisque pulvinar sapien ipsum, a dapibus nulla auctor venenatis. Etiam pretium nec mauris eu dictum. Maecenas et sollicitudin orci. Etiam mattis tincidunt lacus, malesuada imperdiet quam consequat non. Aliquam ex lorem, pulvinar ac egestas nec, rutrum et elit. Duis vitae semper mauris. Curabitur sem sapien, accumsan quis risus a, dictum feugiat tellus. Donec vitae pulvinar orci. Duis dapibus odio ut luctus congue. Praesent egestas orci eget tortor aliquam fermentum. Donec mollis et tellus eget ullamcorper.
</div>
Why does the div below overlap the image? As the images are absolutley positioned inside a relativley positioned div then it wouldn't break layout?
You should define height and / or width for the relative position because once you give an element absolute its getting out of the flow so you have to set the height and width 100% to the absolute then and its looking for a parent that have a height and width to behave in the right way
.image_holder img {
position:absolute;
top:0;
left:0;
width: 100%;
height: 100%;
}
.image_holder {
position:relative;
width: 300px;
height: 300px
}
<div class="test1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tellus mauris, pharetra a ligula ut, aliquam accumsan sem. Etiam semper, mauris vel congue laoreet, tellus quam ultrices mi, vel fringilla magna tortor eu massa. Phasellus aliquet semper lacus. Nullam vehicula purus non nunc facilisis tincidunt posuere ut lacus. In viverra viverra bibendum. Sed placerat mollis scelerisque. Sed ultricies diam ut velit ornare molestie. Nam commodo elit lorem, vel fringilla dui venenatis non. Duis condimentum nisl ut risus egestas malesuada. In at accumsan ex. Curabitur quis magna sodales, laoreet dui nec, ullamcorper libero. Integer rhoncus, magna non rutrum scelerisque, leo odio ornare sapien, a ullamcorper nunc urna a risus. Duis sit amet diam sollicitudin, condimentum enim nec, ullamcorper erat.
</div>
<div class="image_holder" style="position:relative; height: 300px; width: 300px">
<img id="image1" src="https://dummyimage.com/600x400/000/fff">
</div>
<div class="test2">
Quisque pulvinar sapien ipsum, a dapibus nulla auctor venenatis. Etiam pretium nec mauris eu dictum. Maecenas et sollicitudin orci. Etiam mattis tincidunt lacus, malesuada imperdiet quam consequat non. Aliquam ex lorem, pulvinar ac egestas nec, rutrum et elit. Duis vitae semper mauris. Curabitur sem sapien, accumsan quis risus a, dictum feugiat tellus. Donec vitae pulvinar orci. Duis dapibus odio ut luctus congue. Praesent egestas orci eget tortor aliquam fermentum. Donec mollis et tellus eget ullamcorper.
</div>
You need to set a height on "image_holder" since it gets a height of 0px. You can easily see this in Developer Tools in your browser. An element gets its height from its content and since the content of image_holder (the image that is) is positioned absolute it will not add the the height of the parent. You need to set the height manually in this case, but for a simple layout as this you should probably not use position: absolute.
I need the red box to expand with the blue box content, so they are always both the same size.
The red box is defined as:
.leftMenu{
float:left;
width:20%;
background-image:url(../images/leftMenuBG.jpg);
background-position:bottom;
background-color:#BFDAE3;
background-repeat:repeat-x;
}
Can't seem to get it to work, whatever I try! Any ideas? Thanks!
Simple solution: Use tables.
Semantic solution: Use faux columns.
You will need to wrap the red div around the blue div, so have the blue divs inside, floated right, and then have a clearing div after the blue divs.
<div style="border:solid red 2px;">
<div style="border:solid blue 2px;float:right;width:200px;">
<p>Content here</p>
</div>
<div style="clear:both;"></div>
</div>
Excuse the use of inline styles, these should be in a style sheet.
If you need each div to sit independently of each other and don't mind using JavaScript (as this is only a presentational layer) try this method.
You can use a jQuery plugin for that too. (for example, http://www.cssnewbie.com/equal-height-columns-with-jquery/)
But the Semantic solution: Use faux columns. from Magnar is nice too and doesn't require Javascript.
An additional 'faux column'-method is to (ab)use positioning.
Place both boxes inside a container that's floated (which makes it expand to accomodate floated children) and positioned relatively (which allows us to position child elements inside it).
Then, position the shortest column absolutely, and float the longest column. The container will take on the height of the floated child, and the div with position:absolute will take that height again.
A short example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head><title>Columns</title>
<style type="text/css">
html, body {
width: 100%;
}
#container {
width: 100%;
float: left;
position: relative;
border: 2px solid black;
}
#left-box {
position: absolute;
width: 40%;
border: 2px solid red;
background-color: #5555ee;
height: 100%;
}
#right-box {
float: right;
margin-right: 15%;
width: 40%;
border: 2px solid blue;
background-color: #3e3e3e;
}
</style>
</head>
<body>
<div id="container">
<div id="left-box">
- E - x - P - a - N - d - I - n - G -
</div>
<div id="right-box">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mattis eros ut sem sollicitudin ultricies. Vivamus pharetra, urna sit amet auctor mollis, risus sem ultrices quam, non condimentum enim leo sit amet tellus. Pellentesque id vehicula nisl. Nulla ut commodo ligula. Sed sit amet ligula purus, at suscipit leo. Nulla quis nulla id est aliquet vehicula. Suspendisse consectetur, nunc in hendrerit dignissim, nisl massa viverra quam, et faucibus augue lorem eu mi. Vestibulum commodo luctus ante, vel placerat metus ullamcorper vel. Sed id imperdiet orci. In hac habitasse platea dictumst. Praesent ac dui orci, vitae pharetra dolor.
</p>
<p>
Aenean enim metus, placerat at hendrerit in, hendrerit in velit. Cras tincidunt blandit sapien, a aliquet elit sollicitudin vitae. Quisque at ligula sem. In hac habitasse platea dictumst. Ut eu magna ipsum, id fringilla massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus consequat metus sed lectus dignissim posuere quis a felis. Mauris in consectetur arcu. Nullam fermentum adipiscing dignissim. Sed quis orci in magna viverra sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas condimentum lectus pretium tortor porta a hendrerit dui pharetra. Etiam est justo, bibendum vehicula vestibulum ac, mattis ut risus. Praesent dapibus nibh id enim vestibulum porta. Donec aliquam urna a diam varius blandit. Nulla interdum ante at arcu vehicula sagittis. Curabitur quam sapien, luctus ac sagittis vitae, tristique a odio. Nulla consequat gravida urna, at bibendum nisl ultricies ac.
</p>
<p>
Vivamus quis metus porta purus aliquet aliquet. Morbi sollicitudin orci ut ligula vehicula sollicitudin. Etiam sed lacus eget leo molestie ullamcorper sit amet ac urna. Cras vitae turpis in sapien dignissim molestie. Curabitur tellus purus, dignissim at adipiscing in, faucibus ac tortor. Duis vitae metus ac urna cursus consequat eget vel quam. Integer bibendum mauris enim, sit amet blandit sapien. Nam in lectus ante. Curabitur lacinia erat sit amet lectus malesuada facilisis. Phasellus et pellentesque enim. Fusce eget tristique est. Suspendisse id dui eu lorem congue tincidunt. Cras libero lectus, placerat eget tristique a, gravida vitae lorem. Sed nec venenatis sapien. Suspendisse tempus orci ut odio venenatis et cursus sem faucibus. Mauris commodo ultricies dictum. Curabitur iaculis, ligula sit amet lobortis hendrerit, eros orci elementum nisi, cursus lacinia nunc felis vitae erat. Donec id elementum ipsum.
</p>
<p>
Mauris id mi sed augue egestas vestibulum non a ipsum. Ut arcu purus, consequat in tincidunt in, pretium a dui. Cras in quam tellus, non ultricies nisi. Sed leo orci, gravida et luctus sed, eleifend quis odio. Praesent cursus feugiat neque, tincidunt malesuada libero egestas sit amet. Etiam nisi nisi, faucibus vitae accumsan sed, gravida ut lacus. Suspendisse hendrerit fringilla interdum. Cras fermentum nibh non eros gravida pretium et a sem. Sed non nisl dui, non commodo arcu. Donec nec massa mi, vel auctor odio. Curabitur sagittis velit id felis egestas iaculis. Nunc pharetra magna eu metus malesuada ut porta mi suscipit. Aenean vitae elit sit amet neque pellentesque malesuada. Aliquam eu nulla consectetur est adipiscing vulputate non a odio. Sed consectetur neque eros. Nulla fermentum vehicula vestibulum. Aenean eleifend, nisi eget porta accumsan, tellus orci tincidunt metus, volutpat lobortis quam augue commodo tellus. Aenean consectetur pretium vestibulum. Pellentesque a scelerisque sem. Cras pellentesque tortor euismod magna viverra mollis.
</p>
<p>
Mauris dignissim sodales placerat. Sed id interdum erat. Nunc sagittis, nunc in auctor ullamcorper, nisi dolor commodo sem, sit amet aliquam diam dolor posuere est. Ut vestibulum elit ut urna imperdiet non tincidunt sapien euismod. Fusce ut sem erat, aliquam accumsan metus. Proin sed velit nec velit laoreet dignissim at sit amet ante. Pellentesque ac dolor non nulla dapibus lacinia. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse non nisl diam. Sed et ligula sed libero porttitor semper eget eu elit. Phasellus quis massa dolor. Phasellus ac justo ac diam ultrices iaculis quis at odio. Fusce eget nisi nunc. Cras cursus, dui eget mattis rutrum, arcu dolor sollicitudin nibh, eu congue augue quam ut leo. Praesent in est nulla, eu ullamcorper enim. Nullam in adipiscing ligula.
</p>
</div>
</div>
</body>