This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
Why don't flex items shrink past content size?
(5 answers)
Closed 2 years ago.
I've created a layout for a panel system I am working on (see code below). This is working fine, except that I need to use calc() in order to determine the height of the element minus their siblings. Since in the final stage the height of the sibling elements is dynamic it will not scale.
My question is, how could I make the following code example work without calc() where the values used inside of it will be dynamically determined?
body {
display: flex;
margin: 0;
}
.frame {
position: relative;
width: 250px;
height: 500px;
margin: 100px auto;
border: 2px solid black;
}
.panel {
position: absolute;
top: -64px;
bottom: 0;
width: 100%;
background-color: hotpink;
}
.panel-header {
width: 100%;
height: 64px;
background-color: lime;
flex-shrink: 0;
}
.panel-content {
width: 100%;
height: calc(100% - 64px);
background-color: aquamarine;
}
.panel-handle {
width: 100%;
height: 32px;
background-color: purple;
}
.panel-content-inner {
width: 100%;
height: calc(100% - 32px);
overflow-y: scroll;
}
<div class="frame">
<div class="panel">
<div class="panel-header"></div>
<div class="panel-content">
<div class="panel-handle"></div>
<div class="panel-content-inner">
<h4>Lorem impsum</h4>
<p>
orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis rutrum pharetra.
Fusce id massa quis felis rutrum scelerisque eget a odio. Sed imperdiet, turpis vel mollis
pretium, lorem ipsum venenatis metus, nec consectetur quam quam blandit nibh. Suspendisse
ullamcorper cursus risus, sed venenatis libero aliquet ut. Aenean auctor porttitor odio eget
sollicitudin. Vestibulum nunc turpis, porta ac libero et, egestas dapibus tortor.
Pellentesque neque augue, mattis eu orci a, tempus ornare erat. Maecenas et ultricies
tellus, eu hendrerit est. Duis feugiat libero sit amet accumsan pharetra. Nulla volutpat sem
nec sapien interdum lobortis. Praesent a tortor leo. Fusce hendrerit fringilla consequat.
Nulla at justo nec risus placerat luctus. Aliquam vulputate ante justo, at auctor elit
porttitor et.
</p>
<h4>Lorem impsum</h4>
<p>
orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis rutrum pharetra.
Fusce id massa quis felis rutrum scelerisque eget a odio. Sed imperdiet, turpis vel mollis
pretium, lorem ipsum venenatis metus, nec consectetur quam quam blandit nibh. Suspendisse
ullamcorper cursus risus, sed venenatis libero aliquet ut. Aenean auctor porttitor odio eget
sollicitudin. Vestibulum nunc turpis, porta ac libero et, egestas dapibus tortor.
Pellentesque neque augue, mattis eu orci a, tempus ornare erat. Maecenas et ultricies
tellus, eu hendrerit est. Duis feugiat libero sit amet accumsan pharetra. Nulla volutpat sem
nec sapien interdum lobortis. Praesent a tortor leo. Fusce hendrerit fringilla consequat.
Nulla at justo nec risus placerat luctus. Aliquam vulputate ante justo, at auctor elit
porttitor et.
</p>
<h4>Lorem impsum</h4>
<p>
orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis rutrum pharetra.
Fusce id massa quis felis rutrum scelerisque eget a odio. Sed imperdiet, turpis vel mollis
pretium, lorem ipsum venenatis metus, nec consectetur quam quam blandit nibh. Suspendisse
ullamcorper cursus risus, sed venenatis libero aliquet ut. Aenean auctor porttitor odio eget
sollicitudin. Vestibulum nunc turpis, porta ac libero et, egestas dapibus tortor.
Pellentesque neque augue, mattis eu orci a, tempus ornare erat. Maecenas et ultricies
tellus, eu hendrerit est. Duis feugiat libero sit amet accumsan pharetra. Nulla volutpat sem
nec sapien interdum lobortis. Praesent a tortor leo. Fusce hendrerit fringilla consequat.
Nulla at justo nec risus placerat luctus. Aliquam vulputate ante justo, at auctor elit
porttitor et.
</p>
<h4>Lorem impsum</h4>
<p>
orem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis rutrum pharetra.
Fusce id massa quis felis rutrum scelerisque eget a odio. Sed imperdiet, turpis vel mollis
pretium, lorem ipsum venenatis metus, nec consectetur quam quam blandit nibh. Suspendisse
ullamcorper cursus risus, sed venenatis libero aliquet ut. Aenean auctor porttitor odio eget
sollicitudin. Vestibulum nunc turpis, porta ac libero et, egestas dapibus tortor.
Pellentesque neque augue, mattis eu orci a, tempus ornare erat. Maecenas et ultricies
tellus, eu hendrerit est. Duis feugiat libero sit amet accumsan pharetra. Nulla volutpat sem
nec sapien interdum lobortis. Praesent a tortor leo. Fusce hendrerit fringilla consequat.
Nulla at justo nec risus placerat luctus. Aliquam vulputate ante justo, at auctor elit
porttitor et.
</p>
</div>
</div>
</div>
</div>
Related
<div class='card'>
<div class='cardleft'><img class='imgcard' src="..." alt='img'></div>
<div class='cardright'>
<div class='cardtitle'>TITLE</div>
<div class='cardintro'>lorem ipsum...</div>
</div>
</div>
css
.card{
display:grid;
grid-template-columns: 320px auto;
}
.imgcard{
display:block;
width:100%;
margin:0 auto;
}
.cardright{
overflow:hidden;
}
.cardintro{
margin-top:9px;
}
Sometimes, cardintro content (lorem ipsum...) is too long and change the height of entire card.
I want the max-height of entire card to be the height of imgcard which is not fixed, and prevent overflow of cardintro text over that card's height.
I suppose this is solvable by javascript, but I hope by grid-template-rows or somehow using css.
Any help?
You could use absolute positioning of the cardright div that contains cardintro and set overflow hidden on the card. Here's a snippet with the same amount of text on three cards that all have different image height.
.card {
display: block;
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.imgcard {
display: block;
width: 100%;
margin: 0 auto;
}
.cardright {
position: absolute;
left: 330px;
top: 0;
right: 0;
bottom: 0;
height: 100%;
}
.cardleft {
display: inline-block;
width: 320px;
}
.cardintro {
margin-top: 9px;
}
<div class='card'>
<div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x150" alt='img'></div>
<div class='cardright'>
<div class='cardtitle'>TITLE</div>
<div class='cardintro'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
<p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
</div>
</div>
</div>
<div class='card'>
<div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x250" alt='img'></div>
<div class='cardright'>
<div class='cardtitle'>TITLE</div>
<div class='cardintro'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
<p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
</div>
</div>
</div>
<div class='card'>
<div class='cardleft'><img class='imgcard' src="http://via.placeholder.com/320x350" alt='img'></div>
<div class='cardright'>
<div class='cardtitle'>TITLE</div>
<div class='cardintro'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum metus vitae elit pellentesque pellentesque. Donec vulputate, mi fringilla mattis tincidunt, tellus metus placerat orci, sit amet tincidunt nisl nulla ultrices leo. Duis vitae
porttitor tortor, et imperdiet orci. In eget laoreet turpis, a porttitor metus. Aliquam vitae volutpat mi. Curabitur pellentesque arcu ex, sit amet efficitur ligula porta in. Cras metus justo, eleifend vitae ante non, congue commodo risus. In
hac habitasse platea dictumst. Proin cursus at nulla sed pretium. Maecenas semper nibh ut velit interdum varius. Sed tempus mi sit amet pellentesque rutrum. Phasellus placerat id ipsum quis tempor.</p>
<p>Curabitur est ex, rutrum vel lacus eu, imperdiet dapibus libero. Donec cursus mattis finibus. Cras eget felis et orci consectetur egestas sit amet sed sem. Phasellus ultricies mi eu mauris posuere, sit amet facilisis ante lobortis. Etiam et quam
id sapien gravida lacinia ut non diam. Etiam sit amet iaculis quam, in malesuada erat. Aliquam tristique aliquet elit, vitae maximus enim vestibulum non. Phasellus vitae iaculis orci. Integer in consequat odio, at dapibus quam.</p>
</div>
</div>
</div>
I have some expandible panels with long basic HMTL content (img, a, strong…) and I want to crop them to a certain max-height when they're collapsed fading the content to background color.
This is how am doing it right now (and also the correct visual result I expect):
.collapsed {
max-height: 150px; /* Magic number for demo purposes */
overflow: hidden;
position: relative;
}
.collapsed::after { /* Gradient glass layer */
display: block;
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
}
<div class="collapsed panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur augue ut ligula tincidunt, vitae suscipit est aliquam. Vivamus ut efficitur odio. Donec non velit sit amet odio aliquam tempus.</p>
<p>Vestibulum luctus eros eu ligula sodales rhoncus. Nulla vel porttitor lacus. Praesent malesuada varius sem at ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce gravida pulvinar dapibus. Nam faucibus diam non nulla fermentum, in aliquam augue dictum. Maecenas sed lorem bibendum, tincidunt quam ut, vulputate quam.</p>
<p>Maecenas malesuada eros ipsum, vel pellentesque ante consequat vitae. Phasellus egestas aliquet felis, id condimentum neque fermentum a. Nunc porta viverra libero sit amet viverra. Ut consectetur ac ex in egestas. Integer vitae nulla faucibus, pulvinar felis eu, placerat nibh.</p>
<p>Morbi semper vel odio et blandit. Proin blandit magna at euismod egestas. Suspendisse laoreet arcu tortor, vel efficitur nulla malesuada nec. Etiam porttitor lacus sit amet magna tempor, non interdum nisl iaculis. Etiam quis porta orci. Quisque sit amet lectus ac neque accumsan luctus. Donec luctus, ipsum id elementum rutrum, diam ipsum fringilla velit, quis posuere lacus tortor nec quam. Phasellus ultricies enim quis turpis varius, scelerisque ultricies nisi rutrum. Sed dapibus malesuada sapien a gravida. Curabitur porta malesuada felis, at tincidunt sapien finibus consequat. Etiam at viverra nisi, id dignissim est. Integer eu felis id sem finibus congue.</p>
</div>
The problem with this method is that links aren't clickable because there's this gradient glass (.collapsed::after) layer above the real content.
I tried two approaches to solve this issue, but neither of them is acceptable to me...
The first one is to bring links above the glass. This way, links are clickable but they aren't affected by the gradient, and I want them to be.
.collapsed {
max-height: 150px; /* Magic number for demo purposes */
overflow: hidden;
position: relative;
}
.collapsed::after { /* Gradient glass layer */
display: block;
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
}
a {
position: relative;
z-index: 1;
}
<div class="collapsed panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur augue ut ligula tincidunt, vitae suscipit est aliquam. Vivamus ut efficitur odio. Donec non velit sit amet odio aliquam tempus.</p>
<p>Vestibulum luctus eros eu ligula sodales rhoncus. Nulla vel porttitor lacus. Praesent malesuada varius sem at ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce gravida pulvinar dapibus. Nam faucibus diam non nulla fermentum, in aliquam augue dictum. Maecenas sed lorem bibendum, tincidunt quam ut, vulputate quam.</p>
<p>Maecenas malesuada eros ipsum, vel pellentesque ante consequat vitae. Phasellus egestas aliquet felis, id condimentum neque fermentum a. Nunc porta viverra libero sit amet viverra. Ut consectetur ac ex in egestas. Integer vitae nulla faucibus, pulvinar felis eu, placerat nibh.</p>
<p>Morbi semper vel odio et blandit. Proin blandit magna at euismod egestas. Suspendisse laoreet arcu tortor, vel efficitur nulla malesuada nec. Etiam porttitor lacus sit amet magna tempor, non interdum nisl iaculis. Etiam quis porta orci. Quisque sit amet lectus ac neque accumsan luctus. Donec luctus, ipsum id elementum rutrum, diam ipsum fringilla velit, quis posuere lacus tortor nec quam. Phasellus ultricies enim quis turpis varius, scelerisque ultricies nisi rutrum. Sed dapibus malesuada sapien a gravida. Curabitur porta malesuada felis, at tincidunt sapien finibus consequat. Etiam at viverra nisi, id dignissim est. Integer eu felis id sem finibus congue.</p>
</div>
The other method is a totally different approach, removing the glass layer and applying a gradient to the content itself:
.collapsed {
max-height: 150px; /* Magic number for demo purposes */
overflow: hidden;
background: linear-gradient(180deg, rgba(0,0,0,1) 20%, rgba(255,255,255,0) 95%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
a {
color: blue;
text-decoration: underline;
}
<div class="collapsed panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur augue ut ligula tincidunt, vitae suscipit est aliquam. Vivamus ut efficitur odio. Donec non velit sit amet odio aliquam tempus.</p>
<p>Vestibulum luctus eros eu ligula sodales rhoncus. Nulla vel porttitor lacus. Praesent malesuada varius sem at ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce gravida pulvinar dapibus. Nam faucibus diam non nulla fermentum, in aliquam augue dictum. Maecenas sed lorem bibendum, tincidunt quam ut, vulputate quam.</p>
<p>Maecenas malesuada eros ipsum, vel pellentesque ante consequat vitae. Phasellus egestas aliquet felis, id condimentum neque fermentum a. Nunc porta viverra libero sit amet viverra. Ut consectetur ac ex in egestas. Integer vitae nulla faucibus, pulvinar felis eu, placerat nibh.</p>
<p>Morbi semper vel odio et blandit. Proin blandit magna at euismod egestas. Suspendisse laoreet arcu tortor, vel efficitur nulla malesuada nec. Etiam porttitor lacus sit amet magna tempor, non interdum nisl iaculis. Etiam quis porta orci. Quisque sit amet lectus ac neque accumsan luctus. Donec luctus, ipsum id elementum rutrum, diam ipsum fringilla velit, quis posuere lacus tortor nec quam. Phasellus ultricies enim quis turpis varius, scelerisque ultricies nisi rutrum. Sed dapibus malesuada sapien a gravida. Curabitur porta malesuada felis, at tincidunt sapien finibus consequat. Etiam at viverra nisi, id dignissim est. Integer eu felis id sem finibus congue.</p>
</div>
This method (besides being less compatible) removes styles from links, and I don't like/want that either...
So, I wonder if anyone has come up with a good solution for this (the better if it's pure CSS).
Add the pointer-events: none; CSS style to your gradient element.
It works exactly how it sounds - the gradient element will no longer accept pointer events, they will fall through instead to the element below.
Browser Support
Spec on MDN
.collapsed {
max-height: 150px; /* Magic number for demo purposes */
overflow: hidden;
position: relative;
}
.collapsed::after { /* Gradient glass layer */
display: block;
position: absolute;
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%);
pointer-events: none;
}
<div class="collapsed panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur augue ut ligula tincidunt, vitae suscipit est aliquam. Vivamus ut efficitur odio. Donec non velit sit amet odio aliquam tempus.</p>
<p>Vestibulum luctus eros eu ligula sodales rhoncus. Nulla vel porttitor lacus. Praesent malesuada varius sem at ullamcorper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce gravida pulvinar dapibus. Nam faucibus diam non nulla fermentum, in aliquam augue dictum. Maecenas sed lorem bibendum, tincidunt quam ut, vulputate quam.</p>
<p>Maecenas malesuada eros ipsum, vel pellentesque ante consequat vitae. Phasellus egestas aliquet felis, id condimentum neque fermentum a. Nunc porta viverra libero sit amet viverra. Ut consectetur ac ex in egestas. Integer vitae nulla faucibus, pulvinar felis eu, placerat nibh.</p>
<p>Morbi semper vel odio et blandit. Proin blandit magna at euismod egestas. Suspendisse laoreet arcu tortor, vel efficitur nulla malesuada nec. Etiam porttitor lacus sit amet magna tempor, non interdum nisl iaculis. Etiam quis porta orci. Quisque sit amet lectus ac neque accumsan luctus. Donec luctus, ipsum id elementum rutrum, diam ipsum fringilla velit, quis posuere lacus tortor nec quam. Phasellus ultricies enim quis turpis varius, scelerisque ultricies nisi rutrum. Sed dapibus malesuada sapien a gravida. Curabitur porta malesuada felis, at tincidunt sapien finibus consequat. Etiam at viverra nisi, id dignissim est. Integer eu felis id sem finibus congue.</p>
</div>
I would like to know the best way to implement a header/nav that sits over the top of a home page banner div so that the banner's background shows through the header. The content of the header would be located in a template file, while the content of the homepage banner would be outside the template. Because of this, I don't think I can/should nest the header inside the banner. Also, because I'm using a template, the same header will be used on pages other than the home page that don't have a banner.
So far I've got something that sort of works, but I had to do some things that seem a bit inelegant:
1) I had to code the header after the banner. It's probably not a big deal, but I suppose it would be better for screen readers if the first part came first and the second part second.
2) In order for the content text to clear the absolutely positioned banner, I put a bunch of padding at the top of the #content div. But unless the banner is a fixed height, the amount of padding required will vary. Also, on pages that don't have a banner, I'd have to remove that padding entirely.
What's the better way?
body {
font-family: helvetica;
margin: 0;
}
#banner {
background-image: url('http://toprival.com/temp/jsfiddle/background.jpg');
margin: 0;
padding: 100px 30px 30px 30px;
position: absolute;
top: 0;
width: 100%;
background-size:cover;
}
#banner h1 {
font-size: 3em;
}
header {
position: absolute;
background: rgba(0, 0, 0, 0.6);
top: 0;
left: 0;
right:0;
padding: 30px;
}
#menu {
padding: 0;
margin: 0;
}
#menu li {
float: left;
margin-right: 30px;
list-style-type: none;
}
#menu li a {
text-decoration: none;
color: #FFF;
}
#menu li a:hover {
color: aqua;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
#content {
padding: 260px 30px 30px 30px;
}
<div id="banner">
<h1>Supacool Website Title Here</h1>
</div>
<header>
<ul id="menu" class="clearfix">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</header>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae est ut nunc iaculis luctus vitae in risus. Proin mollis facilisis ligula, sed elementum odio consequat quis. Sed at diam urna, vulputate egestas dui. Aenean vehicula fringilla dapibus. Fusce aliquet rhoncus leo, vel tempus mi auctor ultricies. Aliquam pulvinar luctus odio, rhoncus tincidunt diam egestas nec. Quisque semper mauris luctus augue rutrum ultrices ut tincidunt elit. Donec ultricies lorem nec justo hendrerit lobortis. Curabitur rutrum mattis massa, sit amet faucibus ipsum sodales id. Sed nec orci justo, et vulputate felis. Sed congue, nisl non tincidunt adipiscing, nibh nunc lacinia leo, feugiat feugiat erat neque sit amet est.</p>
</div>
I have some pretty inconsistent behavior for a modal I made with css. I have a 2 column layout, with content and a sidebar. I've put a modal in the sidebar because I have a button in the sidebar that toggles the modal open and close, and I kind of wanted to keep the button and modal together in the HTML.
The sidebar's content is often larger than the browser window, so to allow users to scroll it independently of the content, I've made the sidebar's position fixed and turned on overflow: scroll.
The problem is that in Safari and sometimes Chrome, the only part of the modal that is visible is the part that's inside the sidebar.
I assume I'll need to restructure my HTML, but I was wondering if there is something else I can do to make Safari render my modal correctly.
Here is an example I made of the problem
HTML
<div class="container">
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi molestie, nunc eget lobortis efficitur, nisl augue semper lorem, vel laoreet turpis libero non magna. Donec eu massa sed quam venenatis dapibus. Quisque orci tortor, blandit ut velit eget, molestie gravida justo. In pulvinar, mi ac tempus vulputate, sapien ante bibendum mi, sed feugiat ante odio vitae orci. Phasellus mattis nisi ligula, vel eleifend dolor tincidunt vestibulum. Fusce in sodales orci. Morbi at ligula in mi fermentum dapibus ut a sapien. Donec congue arcu ac augue tristique viverra. Praesent erat libero, luctus a porta a, placerat eu nisl. Vestibulum laoreet eros vitae lorem facilisis, id aliquet sem volutpat. Quisque a nulla vitae quam interdum bibendum. Suspendisse convallis diam vitae elit tincidunt bibendum eu ut justo. Sed a dapibus diam.
</p>
<p>
Donec posuere, justo quis dictum imperdiet, nisl odio sodales nisl, id commodo erat nibh id turpis. Cras vestibulum nec mauris et blandit. Etiam dictum, orci vitae posuere scelerisque, urna mi sodales neque, eget commodo quam ex sed diam. Integer a ex cursus, interdum lacus ac, dignissim ligula. Morbi lobortis auctor rutrum. Sed finibus elit at vulputate rutrum. Nam mauris ipsum, vestibulum non tincidunt quis, hendrerit ut tellus. Etiam mollis massa lectus. Curabitur elementum eros ac libero dignissim porttitor. Curabitur augue lacus, pretium ut dolor ac, gravida laoreet risus. Aenean scelerisque tellus suscipit velit sollicitudin semper. Mauris laoreet ante vitae purus pellentesque sagittis. In at risus in ligula rhoncus hendrerit et id dolor. Vivamus pellentesque felis vel dolor malesuada, in egestas nisi ultrices.
</p>
</div>
<div class="sidebar-wrapper">
<div class="parent-sidebar">
<p>
Sed eros dui, porta vel efficitur eget, scelerisque at ante. Sed nunc quam, posuere vel pulvinar non, imperdiet et quam. Proin sed turpis eu neque placerat mollis eget sed erat. Maecenas nec fermentum urna, id pellentesque sem. Donec commodo massa et tincidunt volutpat. Fusce egestas ac nisi quis tincidunt. Ut condimentum lorem ante, in eleifend nulla dapibus vel.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus bibendum porttitor nulla. Integer aliquam varius neque ac facilisis. In hac habitasse platea dictumst. Sed sodales vestibulum aliquet. Aenean vestibulum nulla ut egestas vulputate. Sed quis massa ultrices nulla placerat placerat. Donec tempus justo ac lorem eleifend gravida. In ultricies vestibulum lorem, vel eleifend nunc. Mauris consequat, risus in auctor consectetur, nisl eros pulvinar mauris, a posuere felis urna a nunc. Duis at eleifend dolor.
</p>
<p>
Aliquam eu sem elit. Suspendisse dapibus diam sed mi vehicula lacinia. Duis posuere orci metus, a porta ligula porttitor in. Phasellus id aliquet augue. Quisque sit amet elit lobortis, gravida lorem sit amet, pharetra ipsum. Aliquam urna nisl, commodo eget quam a, cursus lacinia metus. Pellentesque nec nulla velit. Curabitur feugiat in ante semper euismod. Phasellus imperdiet sem quis nulla elementum commodo. Ut at maximus justo, eu accumsan elit.
</p>
<div class="child-modal">
<h1>
I'm a modal!
</h1>
</div>
</div>
</div>
</div>
CSS
.container {
width: 500px;
margin: auto;
}
.content {
width: 75%;
float: left;
padding: 1em;
box-sizing: border-box;
}
.sidebar-wrapper {
width: 25%;
float: left;
padding: 1em;
box-sizing: border-box;
}
.parent-sidebar {
width: inherit;
height: 100vh;
overflow: auto;
position: fixed;
}
.child-modal {
background: white;
position: fixed;
width: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
I made a JSfiddle to show what I mean.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
</style>
</head>
<body bgcolor="#00CC99">
<div style="position: relative; min-height: 600px; height: auto; width: 800px; border: 3px solid #000000; padding: 10px;">
<div style="position: relative; display: inline-block; min-height: 500px; width: 300px; border: 3px solid #000000; overflow: auto; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p>
</div>
<div style="position: relative; display: inline-block; min-height: 500px; width: 400px; border: 3px solid #000000; overflow: auto; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p>
</div>
</div>
</body>
</html>
Clearly, the nested div on the left is the shorter of the two. How can I make sure that the left div can stay at the same level from the top as the div on the right?
Setting vertical-align:top in the styles of the first (left) div works in Chrome and Firefox (didn't try IE or Safari, I assume Safari works).
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
</style>
</head>
<body bgcolor="#00CC99">
<div style="min-height: 600px; height: auto; width: 800px; border: 3px solid rgb(0, 0, 0); padding: 10px; overflow: auto;">
<div style="min-height: 500px; width: 300px; border: 3px solid rgb(0, 0, 0); overflow: auto; padding: 10px; float: left;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p>
</div>
<div style="min-height: 500px; width: 400px; border: 3px solid rgb(0, 0, 0); overflow: auto; padding: 10px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p><br><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac sem sit amet dolor fermentum semper sit amet vitae lectus. Aliquam tempor blandit pharetra. Vestibulum dapibus, tellus at sagittis tempus, neque dolor consequat velit, eget feugiat est lorem eu orci. Quisque consequat consequat mi, fermentum mollis arcu pellentesque ut. Nulla ut risus risus. Vestibulum eget velit eget risus elementum interdum nec sit amet nisi. Nunc ante nunc, volutpat ac dignissim auctor, mattis sit amet metus. Integer bibendum auctor ante, ac tempor leo faucibus in. Donec leo tellus, faucibus eget sagittis a, hendrerit ut tortor. Aenean vulputate placerat suscipit. Vivamus hendrerit sem a velit bibendum malesuada pharetra non nunc. Praesent eget erat enim, sit amet rutrum leo. Mauris nulla nunc, scelerisque ac dapibus eget, facilisis eget neque. Maecenas arcu sem, elementum in rutrum nec, molestie ut massa.</p>
</div>
</div>
</body>
</html>
Hope this solves your issue.