Related
I have a list of col-6 elements (bootstrap) inside a row element. I want to make sure that the content of each block stays intact in pdf preview (print()). I've tried adding a couple of page-break and break css properties as pointed out in this question, but it doesn't seem to work.
var dom = document.querySelector("#list");
dom.innerHTML = dom.innerHTML.repeat(6);
print();
#list>* {
padding: 20px;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
page-break-after: always;
page-break-before: always;
break-after: page;
break-before: page;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" id="list">
<div class="col-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales sem nisl, ut ultricies purus laoreet efficitur. Morbi lectus orci, ultricies a nulla eget, volutpat molestie risus. Proin eget ipsum fermentum, tincidunt eros et, efficitur turpis.
Pellentesque vehicula vestibulum nibh eu iaculis. Donec et rutrum felis. Donec rutrum ex elementum, faucibus sem non, blandit velit. Nunc vitae nibh quam. Aenean bibendum consectetur nisl et tincidunt. Aenean dui nisi, accumsan vitae ipsum eu, sagittis
pellentesque turpis. Suspendisse semper ac sem non mattis.
</p>
<p>
Nam nec ultrices augue. Cras ut lorem felis. Vivamus ante est, pulvinar sit amet porttitor et, aliquet condimentum eros. Sed quis elementum ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend diam nibh, at tristique magna
facilisis ut. Phasellus felis diam, scelerisque ac hendrerit nec, elementum nec diam. Vivamus tellus nulla, lobortis sit amet iaculis vel, blandit et dolor. Nam semper odio quam, eu venenatis mauris vehicula pulvinar. Curabitur nibh nibh, tempus
vel tortor id, porttitor consectetur mauris. Cras sagittis ullamcorper est eu dignissim. Nam odio ligula, pellentesque vel enim quis, vehicula tincidunt neque. Donec bibendum id nibh sit amet eleifend.
</p>
</div>
</div>
I fixed it by changing the display of the container from flex to block and adding float: left to the children.
var dom = document.querySelector("#list");
dom.innerHTML = dom.innerHTML.repeat(6);
print();
#list {
display: block;
}
#list>* {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
float: left;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" id="list">
<div class="col-6">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales sem nisl, ut ultricies purus laoreet efficitur. Morbi lectus orci, ultricies a nulla eget, volutpat molestie risus. Proin eget ipsum fermentum, tincidunt eros et, efficitur turpis.
Pellentesque vehicula vestibulum nibh eu iaculis. Donec et rutrum felis. Donec rutrum ex elementum, faucibus sem non, blandit velit. Nunc vitae nibh quam. Aenean bibendum consectetur nisl et tincidunt. Aenean dui nisi, accumsan vitae ipsum eu, sagittis
pellentesque turpis. Suspendisse semper ac sem non mattis.
</p>
<p>
Nam nec ultrices augue. Cras ut lorem felis. Vivamus ante est, pulvinar sit amet porttitor et, aliquet condimentum eros. Sed quis elementum ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eleifend diam nibh, at tristique magna
facilisis ut. Phasellus felis diam, scelerisque ac hendrerit nec, elementum nec diam. Vivamus tellus nulla, lobortis sit amet iaculis vel, blandit et dolor. Nam semper odio quam, eu venenatis mauris vehicula pulvinar. Curabitur nibh nibh, tempus
vel tortor id, porttitor consectetur mauris. Cras sagittis ullamcorper est eu dignissim. Nam odio ligula, pellentesque vel enim quis, vehicula tincidunt neque. Donec bibendum id nibh sit amet eleifend.
</p>
</div>
</div>
You couls always change the css for printing using
#media print {
}
I made a page to practice using flexbox. It has 1 container in red with 3 flex items. When I minimize the screen the items drop below each other but do not use up the full width of container.
How can I achieve this?
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: stretch;
margin: 40px;
background-color: red;
}
.col {
max-width: 400px;
}
.one,
.two-a,
.two-b,
.three {
background-color: black;
color: white;
padding: 20px;
margin: 1rem;
}
h2,
h3 {
font-family: arial;
}
h2 {
margin-left: 2rem;
}
<div class="container">
<!-- <h2>Flexbox</h2> -->
<div class="one col">
<h3>Step 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam vestibulum
lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam, et blandit
risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis sem, nec finibus
diam suscipit sit amet.</p>
</div>
<div class="two col">
<div class="two-a">
<h3>Step 2a</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam
vestibulum lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam,
et blandit risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis
sem, nec finibus diam suscipit sit amet.</p>
</div>
<div class="two-b">
<h3>Step 2b</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam
vestibulum lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam,
et blandit risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis
sem, nec finibus diam suscipit sit amet.</p>
</div>
</div>
<div class="three col">
<h3>Step 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam vestibulum
lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam, et blandit
risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis sem, nec finibus
diam suscipit sit amet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eget dui ut justo auctor semper a ullamcorper justo. Morbi placerat tortor tortor, ac dignissim leo semper ac. Donec non metus sit amet neque eleifend rhoncus vitae id dolor. Etiam vestibulum
lobortis sem semper laoreet. Vestibulum egestas elit sed lacus egestas, placerat congue erat faucibus. Nunc ac dui auctor, fermentum turpis ac, mattis magna. Nulla pellentesque, ligula vel faucibus imperdiet, arcu ligula ornare quam, et blandit
risus sem sit amet neque. Curabitur commodo dui et metus suscipit, ut dignissim risus hendrerit. Quisque at odio nec risus condimentum ullamcorper. Nulla sit amet felis sit amet neque aliquet auctor sed nec metus. Sed gravida mattis sem, nec finibus
diam suscipit sit amet.</p>
</div>
</div>
https://codepen.io/cian-w/pen/EQZmRz
You have a rule limiting the width of flex items:
.col {
max-width: 400px;
}
Therefore, the items cannot fill the full width of the container because they cannot expand beyond 400px. Try this instead:
.col {
flex: 1 0 400px;
}
This shorthand declaration breaks down to:
flex-grow: 1
flex-shrink: 0
flex-basis: 400px
revised codepen
I'm trying to build a website template where the main #content div is 75% the width of the screen, and centered on the page, but I also want to occasionally have sections that span the full width of the viewport. The way I've accomplished this is by applying a class of .full-width on these sections that overrides the margins of the #content div by setting the width to 100vw, as well as some other properties that you can see in the CSS below.
The problem is that, when enough content is on the page that vertical scrollbars appear, the width of the scrollbars is included in the calculation of the viewport width, so content gets hidden behind the scrollbars.
Is there a way around this problem, or a completely different and better way to do what I'm trying to accomplish?
#content {
width: 75%;
margin: 0 auto;
}
.full-width {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
box-sizing: border-box;
}
.full-width img {
width: 100%;
}
<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>
<div class="full-width">
<img src="http://toprival.com/temp/test-image.jpg" />
<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>
<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>
<!-- content -->
You can have the full-width by default and when for #content > p use width: 75% (Now you won't need to set vw, the width will auto-adjust)
Note that setting width 75% for the whole #content and then having full-width divs in between makes things needlessly complex - though hacky solutions using negative margins and positioning can be done.
See demo below:
#content > p{
width: 75%;
margin: 0 auto;
}
.full-width {
width: 100%;
box-sizing: border-box;
}
.full-width img {
width: 100%;
}
<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>
<div class="full-width">
<img src="http://toprival.com/temp/test-image.jpg" />
<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>
<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>
<!-- content -->
HTML:
<section>
<aside> </aside>
<article> </article>
</section>
I need to have height of aside = height of article, but not less then browser height.
Here is a jsfiddle: https://jsfiddle.net/demas/4hzLbt78/
Now the the height of aside = heigth of browser, but when the content of article is big I have the white space on the left side of the page (on the bottom part of them).
Update: I use jeet grid (http://jeet.gs/) and can not change float: left for aside and article.
Since the width of the aside element is known in advance, one option would be to absolutely position the element relative to the parent section element, and then displace the element by adding an margin-left on the article.
The aside element can now have the same height as the parent element (using top: 0; bottom: 0), and since the parent element's height is determined by the height of the article element, the aside/article elements will have the same height.
Updated Example
section {
min-height: 100vh;
position: relative;
overflow: hidden;
}
aside {
width: 18%;
color: #feffff;
background-color: #2a5c83;
position: absolute;
top: 0;
bottom: 0;
}
article {
float: left;
width: 76%;
margin-left: 20%;
}
<section>
<aside></aside>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.
</article>
</section>
Alternatives:
Using a flexbox layout:
section {
min-height: 100vh;
display: flex;
}
aside {
width: 18%;
color: #feffff;
background-color: #2a5c83;
margin-right: 2%;
}
article {
width: 76%;
}
<section>
<aside></aside>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.
</article>
</section>
Using display: table/display: table-cell:
section {
min-height: 100vh;
display: table;
}
aside {
width: 18%;
color: #feffff;
background-color: #2a5c83;
display: table-cell;
}
article {
width: 76%;
display: table-cell;
}
<section>
<aside></aside>
<article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.
</article>
</section>
Flexbox, obviously
section {
height: 100vh;
display: flex;
}
Jsfiddle Demo
How to avoid content from a child div overflowing the parent container? This is probably one of the most frequent question ever asked and the most frequent and a working solution is to use max-height:100%, which ofcourse works.
The problem is when I cannot use 100%, for example, in the given jsfiddle, I have an header which takes some x pixel height. I can of course arbitrarily decrease the percentage but it is unstable when the window is resized.
JSFiddle - FUpsA
Edit:
I like to mention that the Header should not be a part of the scrolling content, hence using overflow:auto on the parent div is not an option.
According your reply on my comment i suggest to use css calc:
html
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;">
<div>
<h2>Some Header</h2>
</div>
<div id="mainTextCont" style="overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique. Donec feugiat interdum justo, eu volutpat leo lacinia hendrerit. Donec consequat risus ac leo molestie venenatis. Nulla eleifend lobortis tincidunt. Duis lobortis, ligula ac bibendum tempor, eros neque dignissim leo, nec aliquet turpis turpis eget lectus. Maecenas convallis velit ac nunc euismod, vel cursus orci tincidunt. Aenean convallis fermentum porttitor. Phasellus nunc mauris, tincidunt in aliquet quis, tempor in lectus. Vestibulum faucibus velit ultrices, fringilla nunc sed, aliquet tellus. Vivamus id turpis sed nibh sagittis dictum. Morbi ut eros consectetur, fermentum mauris eget, porttitor metus. Praesent ut magna rutrum, eleifend nulla in, vehicula libero.
Integer accumsan, tellus sit amet tincidunt semper, sem purus convallis mauris, a accumsan ante lacus vel leo. Suspendisse suscipit sollicitudin velit ut sodales. Aenean id nisl tellus. Morbi sagittis tincidunt elementum. Fusce consectetur consectetur metus ut tempor. Fusce fermentum dui tortor, sit amet fringilla ligula venenatis id. Nulla facilisi. Fusce eu felis justo. Sed vel ultrices massa. In tincidunt auctor posuere. Morbi tristique orci dolor, sit amet aliquet dui tincidunt sit amet. Sed posuere metus quis est tincidunt, quis euismod arcu vestibulum. Sed vestibulum in lacus vel hendrerit.
Etiam ultrices, ante in tempus dictum, nisl dui ultrices felis, et pellentesque arcu nisi sed justo. In sollicitudin, nibh et malesuada elementum, augue metus euismod quam, ut sollicitudin nulla turpis vel mauris. Phasellus ut dapibus enim. Donec tempus orci nec est aliquam, non scelerisque nibh pharetra. Cras scelerisque elementum libero, a faucibus turpis congue consectetur. Aliquam non est non elit luctus tincidunt sed sed orci. Suspendisse mollis ante arcu. Maecenas molestie erat mauris, sed egestas sapien malesuada nec. Quisque et ante id nunc scelerisque egestas.
Etiam vitae leo vitae turpis commodo semper vel ut justo. Curabitur aliquet iaculis lacus, vel pellentesque eros cursus in. Donec eget dui viverra, convallis libero vel, blandit dolor. Sed vulputate diam quis lacus tincidunt ullamcorper. Proin viverra ligula sem. Nulla tempus felis enim, a scelerisque dui rhoncus lacinia. Ut iaculis auctor faucibus. Phasellus purus lectus, tempor vel tellus sit amet, varius consequat lorem. Donec eget consectetur nunc. Vestibulum vulputate euismod dictum.
Nullam nec nisi non nunc feugiat gravida. Sed tincidunt mi eleifend, posuere lacus commodo, adipiscing arcu. Proin pharetra augue vitae elit mollis, eu porta turpis pellentesque. Nulla facilisi. Nam feugiat id ante dapibus tincidunt. Quisque scelerisque imperdiet commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit sapien, tincidunt non consectetur in, pellentesque nec justo.
</div>
</div>
css
#mainTextCont{
height: calc(100% - 75px);
}
fiddle
Please add overflow:hidden; to your parent div and for child div set height less than parent div ie height:210px
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000; overflow:hidden;">
<div>
<h2>Some Header</h2>
</div>
<div style="overflow:auto; height:210px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique. Donec feugiat interdum justo, eu volutpat leo lacinia hendrerit. Donec consequat risus ac leo molestie venenatis. Nulla eleifend lobortis tincidunt. Duis lobortis, ligula ac bibendum tempor, eros neque dignissim leo, nec aliquet turpis turpis eget lectus. Maecenas convallis velit ac nunc euismod, vel cursus orci tincidunt. Aenean convallis fermentum porttitor. Phasellus nunc mauris, tincidunt in aliquet quis, tempor in lectus. Vestibulum faucibus velit ultrices, fringilla nunc sed, aliquet tellus. Vivamus id turpis sed nibh sagittis dictum. Morbi ut eros consectetur, fermentum mauris eget, porttitor metus. Praesent ut magna rutrum, eleifend nulla in, vehicula libero.
Integer accumsan, tellus sit amet tincidunt semper, sem purus convallis mauris, a accumsan ante lacus vel leo. Suspendisse suscipit sollicitudin velit ut sodales. Aenean id nisl tellus. Morbi sagittis tincidunt elementum. Fusce consectetur consectetur metus ut tempor. Fusce fermentum dui tortor, sit amet fringilla ligula venenatis id. Nulla facilisi. Fusce eu felis justo. Sed vel ultrices massa. In tincidunt auctor posuere. Morbi tristique orci dolor, sit amet aliquet dui tincidunt sit amet. Sed posuere metus quis est tincidunt, quis euismod arcu vestibulum. Sed vestibulum in lacus vel hendrerit.
Etiam ultrices, ante in tempus dictum, nisl dui ultrices felis, et pellentesque arcu nisi sed justo. In sollicitudin, nibh et malesuada elementum, augue metus euismod quam, ut sollicitudin nulla turpis vel mauris. Phasellus ut dapibus enim. Donec tempus orci nec est aliquam, non scelerisque nibh pharetra. Cras scelerisque elementum libero, a faucibus turpis congue consectetur. Aliquam non est non elit luctus tincidunt sed sed orci. Suspendisse mollis ante arcu. Maecenas molestie erat mauris, sed egestas sapien malesuada nec. Quisque et ante id nunc scelerisque egestas.
Etiam vitae leo vitae turpis commodo semper vel ut justo. Curabitur aliquet iaculis lacus, vel pellentesque eros cursus in. Donec eget dui viverra, convallis libero vel, blandit dolor. Sed vulputate diam quis lacus tincidunt ullamcorper. Proin viverra ligula sem. Nulla tempus felis enim, a scelerisque dui rhoncus lacinia. Ut iaculis auctor faucibus. Phasellus purus lectus, tempor vel tellus sit amet, varius consequat lorem. Donec eget consectetur nunc. Vestibulum vulputate euismod dictum.
Nullam nec nisi non nunc feugiat gravida. Sed tincidunt mi eleifend, posuere lacus commodo, adipiscing arcu. Proin pharetra augue vitae elit mollis, eu porta turpis pellentesque. Nulla facilisi. Nam feugiat id ante dapibus tincidunt. Quisque scelerisque imperdiet commodo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit sapien, tincidunt non consectetur in, pellentesque nec justo.
</div>
</div>
Overflow is for the parent and describes how to wrap the child contents.
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;overflow:auto;">
<div>
<h2>Some Header</h2>
</div>
<div style="overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum...
</div>
</div>
Updated Answer:
add overflow:hidden; in parent div sorry I did not notice that you don't want to change height.. now its as per your requirement.
Like this:
<div style="width:300px;overflow:hidden; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;">
<div>
<h2>Some Header</h2>
</div>
<div style="overflow:auto; max-height:100%">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sem ipsum, sagittis non leo vel, imperdiet molestie massa. Cras convallis nisl id quam tristique, sit amet venenatis quam tristique.
</div>
</div>
One of my colleagues came up with a very interesting solution and I was simply amazed! The solution is compatible with IE 5.5+ and its purely CSS.
He used the property of containers with postion:relative which modifies the scope of their child elements with position:absolute. more information about that at css-tricks
This is a sample structure of the solution, refer the fiddle for more details
<div id='parent' style='position:relative'>
<div id='header' style='height:75px'>
<!-- Header -->
</div>
<div id='child' style='position:absolute; top:75px;bottom:0px; overflow:auto'>
<!-- Content-->
</div>
</div>
Note that the height is set only for the static content and not for the dynamic content
JSFiddle - FUpsA - Solution
The problem is that the header takes up space. When you combine the headers height with 100% of the parent (percentages are based on the parent element) it is going to be over 100% of course.
What you should do is make the headers height one percentage and the text part other percentage.
For example:
<div style="width:300px; height:300px; margin-left:auto; margin-right:auto;border:2px solid #000;">
<div style="height: 20%;">
<h2>Some Header</h2>
</div>
<div style="overflow:auto; max-height:70%">
...
</div>
</div>