I have a footer tag on my site which for some reason is out of view, or partly out of view on a nice amount of mobile devices. (I know this through using my browser's developer tools), it can be pulled in to view, but it doesn't stay in view, it gets pulled down again.
The CSS I implemented might be causing this but I need it in order to have the footer stay at the bottom of the page in all cases. (as explained in this question)
This is basically the code for my footer:
html {
height: 100%;
}
main {
padding-right: 200px;
padding-left: 200px;
background-color: white;
flex: 1 0;
}
body {
background-color: #80cbc4;
min-height: 100vh;
display: flex;
flex-direction: column;
}
footer {
text-align: center;
background-color: #d9efef;
height: auto;
flex: 0 0;
}
<html>
<body>
<main>
page content
</main>
<footer>
<p style="direction:rtl;">
רשימת המילים באתר באדיבות: <br> לקסיקון מיל"ה (MILA Hebrew Lexicon),<br> Alon Itai and Shuly Wintner. "Language Resources for Hebrew." Language Resources and Evaluation 42(1):75-98,
March 2008. [BibTeX]
</p>
</footer>
</body>
</html>
This problem happens on these devices (as emulated by my browser's developer tools):
Pixel 2/2 XL
Kindle fire HDX (footer can't even be pulled in to view)
iPhone X/6/7/8 Plus
iPad/iPad Mini/iPad Pro
Surface Duo
Blackberry PlayBook
Nexus 6/6P/7/10
Nokia N9
and not other ones (e.g. desktops), which means that the code above probably doesn't show the problem for other users.
Note:
I've been checking all the options in my dev tools, which means I've included in the list above also some uncommon devices.
Also,
Realize that the emulator does not provide the same experience as a person with an actual Pixel 2 XL device would have. They may have the same resolution, but other behaviors may, and probably will, differ. – Heretic Monkey
Which means this might be happening only in my emulator.
This is what the problem looks like:
How can I make my footer come back in to view on all devices?
This should help:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
If not, it's probably just out of view. Style the footer to always be in view, yet still at the very bottom:
footer {
bottom: 0;
}
You need to include the footer in the body tag to make it a part of the flexbox and set the min-height of body to 100vh. 100% will be dependent on the content size where as 100vh will be based on the height of the viewport.
I have created a simple codepen for this illustration. Play around with the number of list items or body tag. This should solve your problem
You have added padding-right and padding-left of 200px in the styling of <main> tag, due to which the content in <main> is overflowing from <body> while the content of <footer> remains inside the <body>. And due to this, you see additional space on the right side of the footer tag for mobile devices.
I have commented padding-right and padding-left from the main tag and now it is responsive. Also, I would suggest using overflow-x: hidden; in if you don't want your website to scroll horizontally.
html {
height: 100%;
}
main {
/* padding-right: 200px;
padding-left: 200px; */
background-color: white;
flex: 1 0;
}
body {
background-color: #80cbc4;
min-height: 100vh;
display: flex;
flex-direction: column;
/* overflow: hidden; */
}
footer {
text-align: center;
background-color: #d9efef;
height: auto;
flex: 0 0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>
</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
page content
</main>
<footer>
<p style="direction:rtl;">
רשימת המילים באתר באדיבות: <br> לקסיקון מיל"ה (MILA Hebrew Lexicon),<br> Alon Itai and Shuly Wintner. "Language Resources for Hebrew." Language Resources and Evaluation 42(1):75-98,
March 2008. [BibTeX]
</p>
</footer>
</body>
</html>
html {
height: 100%;
}
main {
padding-right: 20px;
padding-left: 20px;
background-color: white;
flex: 1 0;
}
body {
background-color: #80cbc4;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.footer {
text-align: center;
background-color: #d9efef;
height: auto;
position: sticky;
bottom: 0;
}
<html>
<body>
<main>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eleifend ex non felis pellentesque, eget faucibus risus fringilla. Integer laoreet nec ante non gravida. Ut efficitur accumsan mauris eu auctor. Aenean odio lectus, commodo ut urna quis, vehicula lacinia orci. Praesent laoreet nisl vel ante faucibus, sit amet dictum dui mattis. Vivamus tincidunt mollis lorem. Vestibulum sed erat sit amet tellus vestibulum convallis. Nunc volutpat urna ac dolor sollicitudin suscipit. Nunc vel nunc eu leo sollicitudin suscipit vitae nec elit. Vestibulum lacinia convallis sem. Mauris sed auctor felis, sit amet imperdiet purus. Phasellus sed dignissim dui. Mauris scelerisque scelerisque neque, eget bibendum mi venenatis sit amet.
Vestibulum nec sapien urna. Aenean aliquam felis nec leo eleifend pulvinar. Vivamus quam dui, dapibus nec sem sed, faucibus fringilla sapien. Ut nisl diam, consequat at ligula sit amet, convallis posuere sapien. Vestibulum bibendum a velit ut congue. Nam ac porttitor dolor. Fusce sagittis pellentesque odio, eu dignissim nunc posuere eget. Praesent ac sem eget dui lacinia aliquam. Praesent sem lectus, gravida sit amet lorem sit amet, malesuada condimentum nisi. Nam lacinia egestas mauris sed tincidunt. Vestibulum eget ipsum ut turpis rutrum sodales. Etiam hendrerit vestibulum tincidunt. In tempus at massa maximus dictum. Vivamus sollicitudin sit amet lorem in viverra. In quis ante vitae lectus aliquet elementum.
Duis blandit mauris ut ipsum feugiat, id tincidunt est consequat. Maecenas fermentum, mauris nec scelerisque pellentesque, eros ante elementum eros, et rhoncus erat augue nec urna. Vestibulum et lorem ligula. Cras nec laoreet erat. Mauris quis elementum ligula, nec pellentesque ipsum. Cras porttitor lorem odio, ac bibendum lectus dictum et. Sed imperdiet lacus arcu, nec egestas libero elementum in. Nulla aliquam accumsan dui at dignissim. Cras mattis vel quam nec condimentum. Duis at nisl dui. Proin sagittis finibus libero. Mauris posuere erat non ante rutrum varius. Vestibulum id nisl finibus, imperdiet libero sed, ornare felis. Mauris maximus, dui ac rutrum blandit, erat nisi lacinia massa, eget fermentum enim enim in est. Suspendisse vehicula lectus at mauris interdum sollicitudin.
Vestibulum tristique diam orci, sed tincidunt velit molestie aliquam. Nullam lobortis lectus eu dolor pretium feugiat. Vestibulum metus ex, euismod et neque in, molestie vestibulum augue. Nulla a lacus eget orci cursus convallis in ac metus. Vestibulum at lectus nec odio lobortis gravida in ut ipsum. Curabitur diam purus, vulputate eget condimentum vitae, molestie ac diam. Donec scelerisque convallis mi, sit amet semper orci scelerisque in.
Vestibulum vel justo sit amet sapien eleifend faucibus eu in mi. Donec rutrum sed sapien vel gravida. Maecenas at sapien euismod, semper tortor ut, vehicula nisl. Maecenas vel tortor vel leo ultricies pellentesque sit amet ac diam. Ut tempor finibus odio at venenatis. Mauris nec leo ac enim pretium aliquet. Phasellus pharetra convallis sem eu convallis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id nulla ligula. Suspendisse et est ac velit consequat tempus. Suspendisse fringilla cursus arcu sed auctor. Donec eget luctus risus, eu luctus libero. Quisque vel tellus in ipsum commodo ultrices. Donec bibendum arcu a maximus luctus.
</main>
<div class = 'footer'>
<p style="direction:rtl;">
רשימת המילים באתר באדיבות: <br> לקסיקון מיל"ה (MILA Hebrew Lexicon),<br> Alon Itai and Shuly Wintner. "Language Resources for Hebrew." Language Resources and Evaluation 42(1):75-98,
March 2008. [BibTeX]
</p>
</div>
</body>
</html>
The height of the box of your body is actually 100vh + (8px * 2) because most browsers define a margin of 8px on body.
You have to remove this margin margin: 0;
If you want to get the same feeling as before you can add:
padding: 8px; and box-sizing: border-box;.
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
Lastly I would advise to use height: 100vh instead of min-height because you want the body itself to take the whole window height. If the height of its content become greater than the body it will be scrollable.
body {
display: flex; /* or display: grid */
flex-direction: column; /* or grid-template-rows: 1fr min-content */
height: 100vh; /* css grids are awesome */
box-sizing: border-box;
padding: 8px;
margin: 0;
background-color: #80cbc4;
}
Edit: After trying it on Edge mobile emulator, I see that there is a scrollbar on x axis which doesn't change the window height, causing it to scroll vertically.
You may want to disable it overflow-x: hidden OR (better solution) make your content width responsive.
you need to include the attribute of position in the CSS like this...
footer {
text-align: center;
background-color: #d9efef;
height: auto;
flex: 0 0;
position: fixed
}
Related
referring to the following question made by me where i was asking on how could i fit the content between the header and the footer by setting content height minus footer height solved the problem but actually when i try to add the web site to Home screen on any iPhone the footer goes out of screen as the following:
As you can see the footer is visible only in part and to see it i have to scroll the whole page down (not the central content but the page) while that problem doesn't persist on web or Android devices..
I've tryed to subtract more pixels to content height if the device is an iphone but it had no effect, i've tryed the following code:
if (navigator.userAgent.match(/iPhone/i)) {
$('.tableFixHead').addClass('tableFixHead-mobile');
}
.tableFixHead-mobile {
max-height: calc(100vh - 500px) !important;
}
But the view remain still the same, the whole css and html code you can see in the following jsfiddle
If I understand your question correctly, the goal is to always have the header and footer fixed and allow the content in the center to scroll. You've accomplished this with absolute positioning and calculations based on viewHeight
The problem is that the implementation of vh is extremely inconsistent on mobile devices. And these problems are unlikely to change any time soon (see this).
So, I would recommend revamping your layout to reduce the dependency on viewHeight. There are multiple ways to do this but flexbox would give you an easy solution.
Here's a minimal example of how to implement this. You'll have to apply it to your code as needed.
.contentWrapper {
/* this needs to fill the viewport
position fixed will work on modern mobile devices. */
position: fixed;
top:0; right:0; bottom:0; left:0;
/* add flex-box */
display:flex;
flex-direction:column;
}
header, footer {
background-color: darkgray;
flex-basis: 50px;
padding: 20px;
box-sizing: border-box;
}
.mainContentArea {
/* set this to fill the center space */
flex-basis: calc(100% - 100px);
/* make it scroll */
overflow-y: auto;
}
<div class="contentWrapper">
<header>Fixed Header</header>
<div class="mainContentArea">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque nec quam et imperdiet. Nullam vel euismod nisl, sed viverra magna. Cras nec ex ligula. In laoreet ornare nunc ut pellentesque. Phasellus lobortis vehicula lacus, et tempor dui scelerisque sit amet. Cras porttitor leo a mauris eleifend, sed sodales mi tempor. Morbi molestie, est sit amet consequat viverra, lacus arcu lobortis sapien, quis maximus dui sem nec erat. Nullam blandit tellus et dui lacinia aliquam. Morbi non gravida nisl, ac viverra tellus. Donec viverra diam ut malesuada bibendum. Sed vehicula orci eu enim aliquam, ac faucibus mauris molestie.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque nec quam et imperdiet. Nullam vel euismod nisl, sed viverra magna. Cras nec ex ligula. In laoreet ornare nunc ut pellentesque. Phasellus lobortis vehicula lacus, et tempor dui scelerisque sit amet. Cras porttitor leo a mauris eleifend, sed sodales mi tempor. Morbi molestie, est sit amet consequat viverra, lacus arcu lobortis sapien, quis maximus dui sem nec erat. Nullam blandit tellus et dui lacinia aliquam. Morbi non gravida nisl, ac viverra tellus. Donec viverra diam ut malesuada bibendum. Sed vehicula orci eu enim aliquam, ac faucibus mauris molestie.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque nec quam et imperdiet. Nullam vel euismod nisl, sed viverra magna. Cras nec ex ligula. In laoreet ornare nunc ut pellentesque. Phasellus lobortis vehicula lacus, et tempor dui scelerisque sit amet. Cras porttitor leo a mauris eleifend, sed sodales mi tempor. Morbi molestie, est sit amet consequat viverra, lacus arcu lobortis sapien, quis maximus dui sem nec erat. Nullam blandit tellus et dui lacinia aliquam. Morbi non gravida nisl, ac viverra tellus. Donec viverra diam ut malesuada bibendum. Sed vehicula orci eu enim aliquam, ac faucibus mauris molestie.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pellentesque nec quam et imperdiet. Nullam vel euismod nisl, sed viverra magna. Cras nec ex ligula. In laoreet ornare nunc ut pellentesque. Phasellus lobortis vehicula lacus, et tempor dui scelerisque sit amet. Cras porttitor leo a mauris eleifend, sed sodales mi tempor. Morbi molestie, est sit amet consequat viverra, lacus arcu lobortis sapien, quis maximus dui sem nec erat. Nullam blandit tellus et dui lacinia aliquam. Morbi non gravida nisl, ac viverra tellus. Donec viverra diam ut malesuada bibendum. Sed vehicula orci eu enim aliquam, ac faucibus mauris molestie.</p>
</div>
<footer>Fixed Footer</footer>
</div>
.footer {
z-index: 9;
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
line-height: 60px;
background-color: #f5f5f5;
}
The above is your code. Just change from position:absolute to position:fixed.
Run the following snippet, if your question was correctly understood then the result is the visual effect you want to achieve. If yes, then check the dimensions of the elements and their position in the code below.
* {
margin: 0;
padding: 0;
}
body {
display;
flex;
align-items: center;
align-content: center;
justify-content: stretch;
flex-direction: column;
text-align: center;
width: 100%;
height: 100%;
}
header,
footer {
background: #000;
color: #fff;
height: 3rem;
width: 100%;
}
main div {
padding: .5rem 0;
}
main {
background: orange;
width: 100%;
min-height: calc(100% - 6rem);
height: auto;
position: relative;
top: 3rem;
margin-bottom: 2rem;
overflow: hidden;
}
main p {
height: 2rem;
}
header {
position: fixed;
top: 0;
z-index: 1;
}
footer {
position: fixed;
top: calc(100% - 3rem);
}
<header>this is header content</header>
<main>
<div>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>
<p>13</p>
<p>14</p>
<p>15</p>
<p>16</p>
<p>17</p>
<p>18</p>
<p>19</p>
<p>20</p>
</div>
</main>
<footer>this is footer content</footer>
Reading this SO it seems that when setting position: absolute, you must add left: 0 and right: 0 properties to .footer in order that the bottom: 0 will work on iphone and ipad.
Didn't test it myself yet, but it was upvoted so i guess someone else found that useful.
After digging more SO's i found also this that related to this issue.
Worth to mention that caniuseit shows that from version 11 there is full support of absolute position and they not mention any sort of the above..
I guess you will test it before me, hope that will do it.
EDIT: As those SO that i linked above (also) mention, and also following the docs, in order for the position: absolute would work as expected, it parent element should have any position - and that make sens.
Seems that form id="form" is the parent (base on this fiddle), so i would add position: relative; to body itself.
Hope that will work.. Can't test it myself.
Here is the description of the feature I really struggle to do.
Mockup
Description
A generated pdf document contains many sections
Some sections can print on many pages
We don't know the size of the content (variable height)
The page must not have margins (the headers are positioned (0,0) and have the same width as the page, documents are printed bordeless)
The content can be anything : paragraphs, titles, images, graphs, svg elements, tables, ...
Objective
When the content of a section auto break on the next page, that page should have a margin equal to the header
Exemple: the section #2 is printed on the pages 2 & 3 ; the page 3 should have a top margin.
Problem
Because the page margins are set to "0", we should define a padding/margin after a natural page break but, I can't find how to make it work nicely (1)
Technical
I'm using RelaxedJS (pdf is generated with Chromium)
Thank you so much in advance if you know how to handle that specific case. I've read so many documentation. The best candidate could be CSS Fragmentation Box Decoration Break Clone but I can't make it work with blocks, only inline elements and paragraphs.
(1) I have tried a solution using table and a thead setting the margin on top of the page... but it's not working when you fill the cells with content. I guess the has serious limitations when using #page rules.
I had to face the same issue a few days ago.
The idea was simple, you have to do this:
Set #page margins (considering the height of the header and footer)
Set header and footer position: fixed and adjust the top and bottom properties.
Control the .page-content with page-break-after to make sure the content go to the next pages.
Notice that I used the DOMPDF Laravel to generate the PDF. May be there are some differences using RelaxedJS but anyway you can try this just in case.
I hope this can help you. Here is the same code in Codepen
#page {
margin: 160px 0px;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
h2 {
text-align: left;
margin-left: 50px;
}
header {
background-color: yellow;
width: 100%;
height: 120px;
color: black;
display: flex;
align-items: center;
position: fixed;
top: -120px;
left: 0px;
right: 0px;
}
.page-content {
margin-top: 0px;
margin-bottom: 60px;
}
.page-content p {
page-break-after: always;
padding: 5px 30px;
}
.page-content p:last-child {
page-break-after: never;
}
footer {
position: fixed;
bottom: 50px;
right: 0;
left: 0;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-color: lightblue;
height: 50px;
}
footer, .page-content {
margin-left: 100px;
border-left: solid black 1px;
}
<header><h2>HEADER SECTION #</h2></header>
<div class="page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque neque vel lectus rutrum, quis suscipit tortor ornare. Maecenas a enim sit amet neque vehicula imperdiet. Donec auctor convallis tellus. Suspendisse a arcu a tortor congue aliquet vel a justo. Cras sit amet pulvinar tortor. Vestibulum vel lobortis libero, eu accumsan ipsum. Donec felis sem, consequat quis pharetra sit amet, facilisis eget odio. Suspendisse nec vestibulum urna, non fermentum lorem.</p>
<p>Sed orci neque, fringilla nec urna at, iaculis laoreet metus. Nam fringilla sit amet sapien iaculis malesuada. Duis pellentesque odio vitae quam pellentesque sollicitudin. Duis nec commodo mauris, ac eleifend nunc. Vestibulum ac finibus nisi. Aliquam at neque augue. Cras metus mi, ultricies vitae dui sit amet, lacinia aliquet nunc. Duis vitae urna et arcu auctor tristique et id lectus. Praesent ut sollicitudin nibh. Mauris quis vehicula ipsum. Quisque feugiat nec felis et cursus. Donec neque ante, accumsan a tincidunt at, ultrices et lectus. Nullam finibus, ipsum facilisis euismod accumsan, nulla quam ultrices odio, id efficitur purus nisl id lacus. Duis bibendum est quis ligula aliquam rhoncus. Nunc dapibus, odio vel tincidunt faucibus, justo dolor tempor nisl, eu maximus nibh odio nec risus. Nullam ut lacinia purus.</p>
<p>Praesent finibus nisi congue sodales elementum. Vestibulum mauris libero, varius a urna at, vestibulum eleifend nisl. Maecenas et metus dapibus, semper quam a, suscipit libero. Mauris malesuada pretium maximus. Sed semper urna vitae iaculis mattis. Praesent luctus, ipsum et consequat lacinia, purus nisi scelerisque sem, eu luctus metus erat at arcu. Aenean aliquam fermentum condimentum.</p>
<p>Pellentesque felis mi, semper ac ullamcorper vel, accumsan ac tortor. Donec vestibulum varius enim, vitae tempor ligula accumsan eget. Etiam quis nunc felis. Phasellus scelerisque, purus eget sollicitudin gravida, felis justo euismod dui, ut fringilla nulla nunc vitae risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo pretium sapien eleifend molestie. Nullam consequat ligula sit amet purus sodales vehicula. Duis placerat aliquet augue, ut dapibus turpis malesuada sit amet. Vivamus id nulla odio. Integer a velit ac eros rutrum tempus. Vestibulum quis sodales turpis.</p>
<p>Vivamus eu enim fringilla turpis euismod finibus id quis dolor. Pellentesque ex massa, congue at nisl at, lacinia ornare urna. Aenean pretium posuere dictum. Nullam justo metus, eleifend a dictum sit amet, gravida ut arcu. Fusce libero leo, sollicitudin at est non, venenatis auctor nulla. Vivamus luctus tellus eu metus interdum congue eget non magna. Curabitur congue felis nulla, eu consectetur tellus viverra et. Nunc ullamcorper ac nisl a elementum. Morbi viverra magna in orci tristique, eget suscipit nunc suscipit. Morbi sodales dolor a feugiat bibendum. Duis nunc nisl, pulvinar at sem quis, cursus lacinia arcu. Aliquam in dictum arcu.</p>
</div>
<footer>Page X</footer>
Here's a simple flex based blog layout:
<div class='Page'>
<div class='Container'>
<div class='Content'>
<h1>Hello</h1>
<p>Cras ac mauris purus. Phasellus at ligula condimentum, pretium nisi eget, aliquet enim. Sed at massa velit. Cras ac mi dolor. Nullam id felis sit amet neque tempus sodales. In ultricies et turpis in faucibus. Morbi fringilla metus pellentesque, varius enim a, dapibus ex. Sed aliquet urna nisi, eu fermentum diam pretium quis. Curabitur vel cursus turpis. Sed a varius leo, in viverra arcu. Donec porttitor, dolor vel laoreet iaculis, magna arcu tempus ex, at porttitor tellus nunc ultricies felis. Quisque congue sapien in quam tempor, non dapibus felis dignissim. Pellentesque ex eros, dignissim eget tortor non, aliquet ullamcorper nisi. Sed interdum non eros quis fringilla. Morbi condimentum tellus at blandit dignissim. Aenean metus elit, interdum et suscipit quis, ullamcorper sit amet risus.</p>
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sapien magna, lacinia sit amet quam sed, dignissim tincidunt neque. Duis sed sapien hendrerit, consectetur neque quis, tempor nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent fringilla enim odio, sit amet venenatis ex commodo in. Pellentesque in enim in libero vulputate fermentum. Suspendisse elementum felis neque, in rhoncus diam hendrerit eget. Cras tempor porta bibendum. Fusce eget tellus a enim euismod lobortis in vitae nibh. Duis ornare turpis non ex consectetur, sit amet malesuada elit feugiat.</pre>
</div>
</div>
</div>
With this CSS
.Page {
border: 1px solid blue;
}
.Container {
display: flex;
flex-direction: column;
align-items: center;
}
.Content {
border: 1px solid red;
padding: 10px;
max-width: 700px;
min-width: 0;
}
pre {
overflow: auto;
background: #f2f2f2;
border: 1px solid #ccc;
border-radius: 4px;
padding: 20px;
}
Working example: https://codepen.io/anon/pen/xdeyrY
When the browser width is >700px, the red Container is centered and the pre code block has an overflow scrollbar. But as soon as you resize the browser < 700px, the pre code block stretches the container to the full 700px and the content gets cut off.
Why is the width of the container not limited by the browser/screen width in this case?
If you remove align-items: center; everything works as expected. If you set white-space: normal on pre, it also works as expected. But neither of those is an option.
The only workaround I came up with is to add this media query:
#media only screen and (max-width: 700px) {
.Container {
align-items: initial;
}
}
This does the trick, but seems a bit like a hack. Is this some flexbox bug/edge case, or am I missing some min-width: 0 trick here? It seems like using flex + align-items:center + max-width + pre just doesn't work well together..
In addition to Michael_B's answer, if you need the flex column direction for i.e. multiple .Content elements, you can also simply set width: 100% on the .Content.
To adjust the width to your padding/border you can either use box-sizing: border-box;, which I did, or CSS Calc (width: calc(100% - 22px);)
Also, for the reason Michael gave, I removed the min-width: 0 as it has no effect
Updated codepen
Stack snippet
.Page {
border: 1px solid blue;
}
.Container {
display: flex;
flex-direction: column;
align-items: center;
}
.Content {
border: 1px solid red;
padding: 10px;
max-width: 700px;
width: 100%;
box-sizing: border-box;
}
pre {
overflow: auto;
background: #f2f2f2;
border: 1px solid #ccc;
border-radius: 4px;
padding: 20px;
}
<div class='Page'>
<div class='Container'>
<div class='Content'>
<h1>Hello</h1>
<p>Cras ac mauris purus. Phasellus at ligula condimentum, pretium nisi eget, aliquet enim. Sed at massa velit. Cras ac mi dolor. Nullam id felis sit amet neque tempus sodales. In ultricies et turpis in faucibus. Morbi fringilla metus pellentesque, varius enim a, dapibus ex. Sed aliquet urna nisi, eu fermentum diam pretium quis. Curabitur vel cursus turpis. Sed a varius leo, in viverra arcu. Donec porttitor, dolor vel laoreet iaculis, magna arcu tempus ex, at porttitor tellus nunc ultricies felis. Quisque congue sapien in quam tempor, non dapibus felis dignissim. Pellentesque ex eros, dignissim eget tortor non, aliquet ullamcorper nisi. Sed interdum non eros quis fringilla. Morbi condimentum tellus at blandit dignissim. Aenean metus elit, interdum et suscipit quis, ullamcorper sit amet risus.</p>
<pre>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sapien magna, lacinia sit amet quam sed, dignissim tincidunt neque. Duis sed sapien hendrerit, consectetur neque quis, tempor nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent fringilla enim odio, sit amet venenatis ex commodo in. Pellentesque in enim in libero vulputate fermentum. Suspendisse elementum felis neque, in rhoncus diam hendrerit eget. Cras tempor porta bibendum. Fusce eget tellus a enim euismod lobortis in vitae nibh. Duis ornare turpis non ex consectetur, sit amet malesuada elit feugiat.</pre>
</div>
</div>
</div>
It is indeed a min-width: 0 problem.
It's applied in your code, but the set-up is not quite right.
The min-width and min-height overrides work only in the direction of the main axis.
This means that the min-width: 0 override works only in flex-direction: row.
Similarly, the min-height: 0 fix applies only in flex-direction: column.
Your flex container is flex-direction: column. Your flex item has min-width: 0. Therefore, the override is having no effect.
Switch your container to row-direction. Since you're not applying flex properties to the content of the flex item, the switch won't change anything, except allow your <pre> tag to shrink.
You will also need to switch align-items: center to justify-content: center.
revised demo
More details here: Why doesn't flex item shrink past content size?
I've a lot of contents on page which i don't have control of where it breaks. And I've placed some contents using position:fixed on each page as header/footer but it overlap with text. I tried to solve the overlapping using margin and padding in following two ways.
When i added margin using #page
#page {
margin: 2cm;
}
It works on every page as it says, but my header and footer also taken away from margin.
So I tried to adding margin using body tag
body {
margin: 2cm;
/* padding: 2cm; */
}
it work by adding 2cm top margin on first page and 2cm bottom margin on last page. But not in between pages.
Is it possible to set margin/padding each page?
I encountered exactly the same problem and after searching a lot I found an interesting article offering a combinative solution which you can read here.
In short it combines two methods:
Using position: fixed technique
Using thead tbody tfoot
If you only use the first method you will face the overlapping issue, in the same way if you only use the second method, footer will stick to the bottom of the content of page which might ended in the beginng of the last page, but combination of both methods resolves the problem.
.page-header, .page-header-space {
height: 100px;
}
.page-footer, .page-footer-space {
height: 50px;
}
.page-footer {
position: fixed;
bottom: 0;
width: 100%;
border-top: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page-footer:after {
counter-increment: page;
content: counter(page)
}
.page-header {
position: fixed;
top: 0mm;
width: 100%;
border-bottom: 1px solid black; /* for demo */
background: yellow; /* for demo */
}
.page {
page-break-after: always;
}
#page {
margin: 20mm
}
#media print {
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
button {display: none;}
body {margin: 0;}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="page-header" style="text-align: center">
I'm The Header
<br/>
<button type="button" onClick="window.print()" style="background: pink">
PRINT ME!
</button>
</div>
<div class="page-footer">
I'm The Footer, Page #
</div>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="page-header-space"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<div class="page">PAGE 1</div>
<div class="page">PAGE 2</div>
<div class="page" style="line-height: 3;">
PAGE 3 - Long Content
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.
Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel
lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit
pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo
mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan
sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus
justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut
fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla
nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.
Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.
Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum.
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="page-footer-space"></div>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
Here you can see a working demo.
To make sure this solution works properly, try to print it by pressing Print Me! button.
You might even need to have page number in the footer, it's done by CSS too, you only need to add following CSS:
.page-footer:after {
counter-increment: page;
content: counter(page)
}
In some articles it's content: counter(page) " of " counter(pages);, but in my case pages returns 0 all the time for no reason, so I ignored it, maybe you can achieve the count of total pages by using CSS var().
For the record if you'd like not to observe the header and footer before printing you can add following CSS:
#media screen {
.header, .footer {
display: none;
}
}
Update 2020:
It seems page number doesn't work anymore.
Your first option was correct, what you need to do is just position your header and footer as running.
#page {
margin: 2cm;
#top-center {
content: element(pageHeader);
}
#bottom-center {
content: element(pageFooter);
}
}
#pageHeader{
position: running(pageHeader);
}
#pageFooter{
position: running(pageFooter);
}
#page {
padding: 2cm;
margin: 3cm;
}
Try this...
Be sure to have a stylesheet assigned for printing.
It could be a separate stylesheet or you can use bootstrap stylesheet:
<link rel="stylesheet" type="text/css" media="print" href="print.css">
or
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute
Then, you can write your styles for printers in the separate stylesheet or in the shared one using media queries as:
#media print {
/* Your styles here */
}
I have a fixed top div with variable height. All I need is to push the bottom contents below the fixed div to re-position itself as the height of the fixed div changes in various pages.
P.S. I'm currently doing it with jquery but it takes some rendering time and shows broken contents until the page loads completely as it is added at the end of body tag. I want to load jquery and other scripts at the very end so trying to find a way to do this completely with CSS if possible for getting rid of those rendering effects.
Following is a demo code which needs to work with CSS only -
.container {
width: 100%;
height: auto;
}
.top {
position: fixed;
height: auto;
width: 100%;
background-color: black;
color: white;
top: 0;
}
.bottom {
height: auto;
width: 100%;
}
<div class="container">
<div class="top">
This is a fixed div with variable height and the bottom content are supposed to pushed and stayed below as the height increases.
</div>
<div class="bottom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur porttitor neque at vestibulum. Nulla facilisi. Nullam tempus ligula sapien, dictum scelerisque libero tristique et. Ut sit amet magna eros. Suspendisse potenti. Donec vitae sodales nunc. Nunc eget condimentum urna. Nulla sit amet lectus ac nunc mattis porttitor eget quis purus. Ut rhoncus nulla eget velit tincidunt luctus. Donec in justo tempus, porttitor magna nec, semper eros. In bibendum magna eget lectus viverra ultricies. Integer pharetra augue lorem, eu tempus nulla volutpat dignissim.
Morbi vulputate arcu sit amet lectus porttitor hendrerit. Donec id pharetra urna, sit amet tincidunt nulla. Nam semper felis vitae odio elementum posuere. Vivamus blandit accumsan sapien, vitae blandit est lacinia et. Nam sit amet diam massa. Quisque et erat et orci dignissim congue. Maecenas pellentesque pretium sodales. Donec pellentesque rhoncus tortor et hendrerit. Phasellus nec dictum mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Fusce nec ligula mollis, iaculis est a, lobortis est. Phasellus faucibus varius arcu, eget volutpat quam venenatis vel. Sed felis nulla, pulvinar ut metus ac, luctus finibus tortor. Aliquam vulputate, nulla quis accumsan pretium, lacus elit sollicitudin ipsum, non faucibus erat mauris a felis.
</div>
</div>
try this
.bottom {
height: auto;
width: 100%;
margin-top: 1cm;
}
I have updated the fiddle and its working:https://jsfiddle.net/m0615z32/1/
Below is a pure javascript code that will work for you. Please check
What i have done is set the padding-top of below container to be equal to height of top container without using jquery.
document.getElementById("bottom-div").style.paddingTop = document.getElementById("top-div").clientHeight+"px";
OR
If You can change your top container to be relative than fixed, then also this works but is not keeping the div fixed on top
.top {
position: relative;
height: auto;
width: 100%;
background-color: black;
color: white;
top: 0;
}
Now the top content will always be on top. It will adjust according to content and below container will start after top ends.