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 {
}
Related
i have been stuck with this problem for days now and can't solve it
basically i have a page with vertical text in a div that has these properties :
.sideText {
white-space: nowrap;
writing-mode: vertical-rl;
position: absolute;
color: var(--primary-color);
left: 0;
}
it is a very long text (whole paragraph)
what i am trying to achieve is that this text takes the entire height of page (this div is the first tag inside body)
when i try to give it :
height: 100%;
it takes the height of the viewport and stops right after
any suggestion on how i can do this ?
thank you all
Edit: adding reproducible page
.sideText {
white-space: nowrap;
writing-mode: vertical-rl;
position: absolute;
color: var(--primary-color);
left: 0;
}
<html>
<body>
<div id="sideText" class="fs-1 fw-bold sideText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget malesuada mi, tempus posuere elit. Donec eget massa a orci ultrices facilisis at id velit. Duis in purus diam. Phasellus tortor sem, porta a augue ac, porttitor ultricies quam. In metus mi, volutpat eu urna quis, consequat tristique velit. Suspendisse malesuada blandit arcu, in malesuada dui pulvinar non. Fusce ullamcorper, nibh sit amet tempor ullamcorper, mauris mauris aliquam nunc, eu aliquet ipsum velit eget leo. Nam varius pulvinar condimentum. Sed egestas libero vel lacus placerat mollis. Nullam vehicula sollicitudin dui. Proin vel accumsan arcu. Vestibulum in risus vehicula, eleifend enim at, lobortis elit. Fusce aliquam efficitur sapien, nec cursus urna tincidunt eget.
</div>
<div style="margin:10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget malesuada mi, tempus posuere elit. Donec eget massa a orci ultrices facilisis at id velit. Duis in purus diam. Phasellus tortor sem, porta a augue ac, porttitor ultricies quam. In metus mi, volutpat eu urna quis, consequat tristique velit. Suspendisse malesuada blandit arcu, in malesuada dui pulvinar non. Fusce ullamcorper, nibh sit amet tempor ullamcorper, mauris mauris aliquam nunc, eu aliquet ipsum velit eget leo. Nam varius pulvinar condimentum. Sed egestas libero vel lacus placerat mollis. Nullam vehicula sollicitudin dui. Proin vel accumsan arcu. Vestibulum in risus vehicula, eleifend enim at, lobortis elit. Fusce aliquam efficitur sapien, nec cursus urna tincidunt eget.
</div>
</body>
</html>
her you go .
i choose to increase font-size and line-height you can choose whatever you seem fit for your requirments,
var $div = $('.main-text');
$(window).resize(function () {
// Get the current height of the div and save it as a variable.
var height = $div.height();
// Set the font-size and line-height of the text within the div according to the current height.
$div.css({
'font-size': (height/2) + 'px',
'line-height': height + 'px'
})
}).trigger('resize');
.sideText {
white-space: nowrap;
writing-mode: vertical-rl;
position: absolute;
color: var(--primary-color);
left: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<div id="sideText" class="fs-1 fw-bold sideText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget malesuada mi, tempus posuere elit. Donec eget massa a orci ultrices facilisis at id velit. Duis in purus diam. Phasellus tortor sem, porta a augue ac, porttitor ultricies quam. In metus mi, volutpat eu urna quis, consequat tristique velit. Suspendisse malesuada blandit arcu, in malesuada dui pulvinar non. Fusce ullamcorper, nibh sit amet tempor ullamcorper, mauris mauris aliquam nunc, eu aliquet ipsum velit eget leo. Nam varius pulvinar condimentum. Sed egestas libero vel lacus placerat mollis. Nullam vehicula sollicitudin dui. Proin vel accumsan arcu. Vestibulum in risus vehicula, eleifend enim at, lobortis elit. Fusce aliquam efficitur sapien, nec cursus urna tincidunt eget.
</div>
<div class="main-text" style="margin:10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget malesuada mi, tempus posuere elit. Donec eget massa a orci ultrices facilisis at id velit. Duis in purus diam. Phasellus tortor sem, porta a augue ac, porttitor ultricies quam. In metus mi, volutpat eu urna quis, consequat tristique velit. Suspendisse malesuada blandit arcu, in malesuada dui pulvinar non. Fusce ullamcorper, nibh sit amet tempor ullamcorper, mauris mauris aliquam nunc, eu aliquet ipsum velit eget leo. Nam varius pulvinar condimentum. Sed egestas libero vel lacus placerat mollis. Nullam vehicula sollicitudin dui. Proin vel accumsan arcu. Vestibulum in risus vehicula, eleifend enim at, lobortis elit. Fusce aliquam efficitur sapien, nec cursus urna tincidunt eget.
</div>
</body>
</html>
You could use this line of JavaScript, to archive what you want:
document.getElementById("sideText").style.height = document.body.clientHeight + "px";
.sideText {
white-space: nowrap;
writing-mode: vertical-rl;
position: absolute;
color: var(--primary-color);
left: 0;
}
<html>
<body>
<div id="sideText" class="fs-1 fw-bold sideText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget malesuada mi, tempus posuere elit. Donec eget massa a orci ultrices facilisis at id velit. Duis in purus diam. Phasellus tortor sem, porta a augue ac, porttitor ultricies quam. In metus mi, volutpat eu urna quis, consequat tristique velit. Suspendisse malesuada blandit arcu, in malesuada dui pulvinar non. Fusce ullamcorper, nibh sit amet tempor ullamcorper, mauris mauris aliquam nunc, eu aliquet ipsum velit eget leo. Nam varius pulvinar condimentum. Sed egestas libero vel lacus placerat mollis. Nullam vehicula sollicitudin dui. Proin vel accumsan arcu. Vestibulum in risus vehicula, eleifend enim at, lobortis elit. Fusce aliquam efficitur sapien, nec cursus urna tincidunt eget.
</div>
<div style="margin:10px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget malesuada mi, tempus posuere elit. Donec eget massa a orci ultrices facilisis at id velit. Duis in purus diam. Phasellus tortor sem, porta a augue ac, porttitor ultricies quam. In metus mi, volutpat eu urna quis, consequat tristique velit. Suspendisse malesuada blandit arcu, in malesuada dui pulvinar non. Fusce ullamcorper, nibh sit amet tempor ullamcorper, mauris mauris aliquam nunc, eu aliquet ipsum velit eget leo. Nam varius pulvinar condimentum. Sed egestas libero vel lacus placerat mollis. Nullam vehicula sollicitudin dui. Proin vel accumsan arcu. Vestibulum in risus vehicula, eleifend enim at, lobortis elit. Fusce aliquam efficitur sapien, nec cursus urna tincidunt eget.
</div>
</body>
</html>
I have an html like this:
<div class="container">
<div class="vertical-btns">
<button>Click</button>
<button>Click</button>
<button>Click</button>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</div>
With this css:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
background-color: #71E764;
max-width: 50rem;
height: 100%;
overflow: auto;
max-height: 500px;
margin: auto;
}
.vertical-btns {
position: fixed;
padding-left: 20px;
width: inherit;
max-width: inherit;
flex: auto;
flex-direction: column;
display: flex;
right: 0;
}
The result is that I have a container with 3 fixed buttons but outside of it. What I need is that the buttons stays inside the container on top right. But in this way, with right: 0, it's not relate to the parent container, but it seems relates to the web page. Is there a way to fix this?
that's the codepen and as you can see the buttos are totally on the right of the page instead of the container: https://codepen.io/eryonn/pen/oNBbOwe
Try to use position: absolute; to position an element inside a parent with position: relative; and then position: fixed; on an element inside the absolute positioned
Instead of right: 0; for the element .vertical-btns use
margin-left: min(50rem, 100%);
transform: translateX(-100%);
Why margin-left: min(50rem, 100%)?
That's because your wrapper has not a fixed width, but just a max-width. So when the viewport is smaller than 50rem it becomes responsive so also the margin-left must be lower, accordingly. More information about the CSS min() function can be found on MDN
Note 1: if you're using a CSS preprocessor an error could be raised while compiling the source, probably because the preprocessor already has a min() function. If you want to use the CSS function instead change the case of the letters (e.g Min(...)) since the css function are case-insensitive
Note 2: if your browser doesn't support the min() function in this case you could use a mediaquery which will do the same thing (just a bit more verbose), e.g.
.vertical-btns { margin-left: 100% }
#media (min-width: 50rem) {
.vertical-btns { margin-left: 50rem }
}
Result
"position: fixed" removes the element from the normal flow of the page and positions it in relation to the viewport. You can use "position: sticky" with "top:0" which will make your element stick to the top even when scrolling. Here's the code sample.
.vertical-btns {
position: sticky;
padding-left: 20px;
width: 100%;
flex: auto;
flex-direction: column;
display: flex;
align-items:flex-end;
top:0;
height:0;
}
Just use position: absoulte instead of position: fixed and you can position your buttons relative to the container wherever you want ;-)
Position fixed is allways relative to viewport. Position àbsouteis allways relative to the notstatic`positioned parent element.
See example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
background-color: #71E764;
max-width: 50rem;
height: 100%;
overflow: auto;
max-height: 500px;
margin: auto;
}
.vertical-btns {
position: absolute;
top: 0;
right: 0;
padding-left: 20px;
width: inherit;
}
<div class="container">
<div class="vertical-btns">
<button>Click</button>
<button>Click</button>
<button>Click</button>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus condimentum erat rhoncus risus cursus tincidunt. Sed consequat eget tortor eget volutpat. Proin a hendrerit lacus. Vestibulum euismod sit amet velit id placerat. Nulla ipsum massa, ultricies at leo vitae, rhoncus dictum nisi. Fusce in pulvinar ante, ut dictum nunc. Aliquam erat volutpat. Pellentesque tristique sapien ante, vel dictum quam congue nec. Fusce molestie, velit at interdum malesuada, purus justo pharetra est, consectetur accumsan est lorem ac leo. Vestibulum at dolor metus. Nunc a quam ac velit dignissim vestibulum finibus sed sem. Maecenas aliquet dignissim risus, non congue justo fringilla mattis. Maecenas et scelerisque magna, eget vestibulum ipsum. Pellentesque tempor nunc felis, at tincidunt justo facilisis vel. Integer tincidunt, dolor at convallis venenatis, turpis nulla pretium erat, nec pellentesque ante justo vel risus
</p>
</div>
Note: Updated the code to comments.
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 -->
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>