Issue with CSS Margin setting along with rotate - html

I have a requirement to Print a document in A4 sheet, in such a way that first part need to be printed in first half( i.e A5 sheet measurement) and that too with 90degree rotation and second part in next A5 sheet in normal way. I could do that by randomly fine tuning the margins.( This is having problem with different devices, Android phones and tab, where something working fine , is not working in other phone) I am sure there will be a right way to do that. here is my html code.Appreciate your help on this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 210mm X 296 mm */
.A5 {
height: 148mm;
border: 2px red solid;
}
.rotate {
transform: rotate(90deg);
border: 2px magenta solid;
margin-left: 50mm;
margin-top: -75mm;
min-height: 296mm;
max-width: 148mm;
}
</style>
</head>
<div class="A5">
<div class="rotate">
***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores.
Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur
reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad
voluptates deleniti. Odio!***END**
</div>
</div>
<div class="A5">
***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt,
dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis
quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates
deleniti. Odio!***END**
</div>
</html>


This is the solution I could use
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
:root {
--page-width: 210mm;
--page-height: 296mm;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.A5 {
margin: 0px;
border: 2px black solid;
/* Note: height and width interchanged because of rotation */
width: var(--page-height);
height: var(--page-width);
display: flex;
justify-content: center;
align-items: center;
}
.rotate {
transform: rotate(90deg);
height: var(--page-height);
width: var(--page-width);
border: 2px magenta solid;
}
.al {
align-items: flex-start;
}
</style>
</head>
<div class="A5">
<div class="rotate">***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates deleniti. Odio!***END**</div>
</div>
<div class="A5 al">***START: Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, alias molestias possimus perferendis, quia eos quod laborum sapiente consequatur accusamus culpa iure quae maiores. Nesciunt, dignissimos unde! Animi, voluptates ullam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia accusantium laborum neque in numquam sit similique dolores unde. Nulla, tenetur reiciendis quam recusandae delectus dolore voluptas dolorem maxime quidem iure culpa iste sint similique ab veniam quis optio pariatur maiores eos! Beatae, repellat sed velit molestias ad voluptates deleniti. Odio!***END**</div>
</html>

Related

How to place image in column number two using the CSS column-count property?

How to place image in column number two?
$(document).ready(function() {
$(window).trigger('resize');
});
$(window).resize(function() {
divH = $('div').height();
console.log(divH);
newH = divH - 105;
$('div img').first().css({
"height": newH + "px"
})
});
.invisible {
float: right;
}
.bottom {
float: right;
padding-left: 10px;
padding-top: 0px;
clear: right;
bottom: 10px;
}
div {
max-width: 700px;
margin: 0 auto;
margin-top: 4em;
text-align: justify;
}
p {
text-align: justify;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="column-count: 2;">
<img src="http://placekitten.com/100" class="invisible" width="0" height="206"></img>
<img src="http://placekitten.com/100" class="bottom" width="100" height="100"></img>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem aspernatur ut impedit, quod, similique obcaecati velit sit distinctio ab, vitae labore, quibusdam excepturi iure maxime nihil tenetur dicta. Iure, dolor. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Possimus adipisci, porro vitae perferendis similique ullam sint, aut labore! Similique rerum inventore dolor sint quae cupiditate repellat debitis saepe quia laboriosam! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Perferendis autem in quaerat itaque, architecto deserunt inventore officiis laborum commodi, corporis quam dolorum labore optio earum unde adipisci impedit, sed sint! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut voluptatem rem
in mollitia voluptatum laboriosam expedita, ut tempora blanditiis et tempore sapiente minima consequatur facere voluptatibus quibusdam ad sed velit vero nesciunt ipsa. Possimus impedit labore non cumque, culpa nam. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Optio numquam, temporibus velit quas quod, aliquid iure, possimus molestiae laboriosam perspiciatis a iusto dignissimos magni suscipit officiis nesciunt. Sapiente corporis optio mollitia, enim temporibus dolore amet magni, at hic laboriosam
atque beatae, quas eum, laudantium. Distinctio maxime commodi sunt quis soluta sequi labore ratione ad atque saepe cupiditate tempora ab numquam consectetur tenetur voluptatem inventore porro, ut obcaecati magnam culpa. Architecto consequuntur recusandae
ut aperiam ullam harum officia maiores cumque cupiditate id. Modi, labore id dignissimos ducimus laborum temporibus pariatur, quae reprehenderit at tenetur mollitia, recusandae quas commodi quidem soluta repellat.
</div>

What about moving html tag to the end of paragraph?
$(document).ready(function() {
$(window).trigger('resize');
});
$(window).resize(function() {
divH = $('div').height();
console.log(divH);
newH = divH - 105;
$('div img').first().css({
"height": newH + "px"
})
});
.invisible {
float: right;
}
.bottom {
float: right;
padding-left: 10px;
padding-top: 0px;
}
div {
max-width: 700px;
margin: 0 auto;
margin-top: 4em;
text-align: justify;
}
p {
text-align: justify;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="column-count: 2;">
<img src="http://placekitten.com/100" class="invisible" width="0" height="206"></img>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem aspernatur ut impedit, quod, similique obcaecati velit sit distinctio ab, vitae labore, quibusdam excepturi iure maxime nihil tenetur dicta. Iure, dolor. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Possimus adipisci, porro vitae perferendis similique ullam sint, aut labore! Similique rerum inventore dolor sint quae cupiditate repellat debitis saepe quia laboriosam! Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Perferendis autem in quaerat itaque, architecto deserunt inventore officiis laborum commodi, corporis quam dolorum labore optio earum unde adipisci impedit, sed sint! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut voluptatem rem
in mollitia voluptatum laboriosam expedita, ut tempora blanditiis et tempore sapiente minima consequatur facere voluptatibus quibusdam ad sed velit vero nesciunt ipsa. Possimus impedit labore non cumque, culpa nam. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Optio numquam, temporibus velit quas quod, aliquid iure, possimus molestiae laboriosam perspiciatis a iusto dignissimos magni suscipit officiis nesciunt. Sapiente corporis optio mollitia, enim temporibus dolore amet magni, at hic laboriosam
atque beatae, quas eum, laudantium. Distinctio maxime commodi sunt quis soluta sequi labore ratione ad atque saepe cupiditate tempora ab numquam consectetur tenetur voluptatem inventore porro, ut obcaecati magnam culpa. Architecto consequuntur recusandae
ut aperiam ullam harum officia maiores cumque cupiditate id.
Modi, labore id dignissimos ducimus laborum temporibus pariatur, quae reprehenderit at tenetur mollitia, recusandae quas commodi quidem soluta repellat.
<img src="http://placekitten.com/100" class="bottom" width="100" height="100"></img>
</div>

CSS wrapper how to set default height?

I made a website but I want to improve the layout.
I wrapped all the div elements from the website inside <div class="wrapper">. I want to keep the height of div wrapper 95% by default. The problem is that if I add text to div element which is below, it will exit outside div. How to keep "div wrapper" at stable height even if other div below is empty? and later when I add text it should extend automatically so I could scroll it in the browser. Look at the picture.
<style>
body {
background-color: black;
}
.wrapper {
background-color: blue;
width: 90%;
margin: 0 auto;
}
.menu {
/* background-color: red;*/
width: 800px;
height: 100px;
}
.maintext {
border: dashed 2px black;
color: white;
}
</style>
and here's the HTML:
</head>
<body>
<div class="wrapper">
<div class="menu">
<h1>This is my little menu</h1>
</div>
<div class="maintext">
<h2>You can write here what you want</h2>
<p>Ok I will start now
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam rem officia dolor dicta. Voluptatum, sunt! Atque animi cupiditate quasi. Modi accusamus consequuntur esse quis suscipit, velit obcaecati cumque reprehenderit perferendis.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque odio tenetur, rem dolorum nesciunt voluptas quia ex alias corrupti, ullam consequatur distinctio cupiditate voluptate praesentium. Rem perspiciatis totam cumque officia.
nde amet saepe optio obcaecati blanditiis sed sequi nostrum quaerat voluptatibus, est libero culpa nemo! Quaerat, eaque.
</p>
</p>
</div>
</div>
</body>
</html>

you can use overflow: auto property on your wrapper with fixed height if you need to scroll vertically
body {
background-color: black;
}
.wrapper {
background-color: blue;
/* width: 90%; */
height:400px; /*+++*/
overflow: auto; /*+++*/
margin: 0 auto;
}
.menu {
/* background-color: red;*/
width: 800px;
height: 100px;
}
.maintext {
border: dashed 2px black;
color: white;
}
<div class="wrapper">
<div class="menu">
<h1>This is my little menu</h1>
</div>
<div class="maintext">
<h2>You can write here what you want</h2>
<p>Ok I will start now
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quam rem officia dolor dicta. Voluptatum, sunt! Atque animi cupiditate quasi. Modi accusamus consequuntur esse quis suscipit, velit obcaecati cumque reprehenderit perferendis.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Atque odio tenetur, rem dolorum nesciunt voluptas quia ex alias corrupti, ullam consequatur distinctio cupiditate voluptate praesentium. Rem perspiciatis totam cumque officia.
nde amet saepe optio obcaecati blanditiis sed sequi nostrum quaerat voluptatibus, est libero culpa nemo! Quaerat, eaque.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officiis ratione, amet doloremque nulla iste atque reiciendis, autem, delectus fugiat sequi beatae praesentium molestias minima. Nostrum, consectetur, possimus provident facere, iusto officia tempore esse sapiente obcaecati quis dolorum fugiat blanditiis! Minus, sunt ex soluta eveniet odio sit nobis vero dolorem pariatur.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente repellat placeat dignissimos provident commodi est quasi dolorem optio iusto officia earum facilis quae, magnam expedita mollitia vitae consectetur laborum quas in nam temporibus repudiandae fugit! A saepe obcaecati sapiente ullam ut labore odio. Voluptates quaerat, natus aspernatur vero debitis commodi perferendis laboriosam ut est sit nisi iste quisquam nostrum nam dolor exercitationem quos ipsum molestias eius veritatis fugit dolorem aliquid voluptate! Nam corporis fugiat nulla magnam, cupiditate maxime dolorem facilis quaerat laboriosam aspernatur illum in possimus doloribus voluptas porro voluptatem soluta, adipisci inventore, et commodi est odit nisi delectus? Rerum?
</p>
</p>
</div>
</div>

Have footer be pushed to the bottom without hovering over info

So I want my footer to be at the bottom of my body container. I have position fixed with a bottom: 0; but it still isn't inside the container. I also don't want any info to be pushed underneath my footer.
My goal is to have a footer be at the absolute bottom of the page but not cover anything.
body {
width: 90%;
max-width: 1100px;
min-height: 50vh;
margin: 15px auto;
background-color: white;
border: 3px solid black;
}
footer {
position: absolute;
bottom: 0;
background-color: #333;
width: 90%;
border: 3px solid black;
color: white;
}
<body>
<main>
<h1>
Welcome
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid expedita accusantium officia consequuntur corporis laudantium qui fuga cum, tempore sed.
</p>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nihil architecto, placeat ducimus natus earum quidem consectetur? Sunt magnam, quas. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus praesentium voluptas, debitis aliquid,
voluptatem quidem asperiores ex rerum iste eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et vitae, nihil tenetur fuga voluptatibus debitis adipisci, minima eius voluptas id.
</p>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fuga eius, velit, impedit adipisci doloribus eveniet reiciendis architecto consequuntur reprehenderit.
</p>
</footer>
</main>
</body>

There are many ways to approach this problem. Let me list out them.
Fixed footer with padding on the body.
Sticky footer, where it stays bottom always and if there's extra content, it gets pushed further at the end of the content.
Fixed Footer
This is an easier approach, considering the body has a position: relative; by default, all you need to do is, use a position: fixed; on the footer and push it to the end. Give a padding-bottom to the body of slightly above the height of the footer and that's all!
This will not disrupt any content.
body {
padding-bottom: 50px;
}
footer {
line-height: 30px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: #f5f5f5;
border-top: 2px solid #ccc;
}
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos, consectetur sequi. Natus sit iste nemo, dolor dolorum alias repellat, itaque molestiae delectus ipsum commodi perspiciatis architecto, officia at, ducimus. Dolore.</p>
<p>Modi provident officiis accusantium, quasi, quae temporibus soluta excepturi esse veniam sed, debitis nostrum harum? Esse enim dolorem soluta, nisi, voluptatibus cupiditate harum eaque voluptate. Rerum nihil, perspiciatis aliquam nesciunt.</p>
<p>Eum, vitae, praesentium. Consequuntur quae eaque sit quidem illo iste in libero magni natus eveniet quasi ab, velit id culpa tempore non quisquam dolorum doloremque officia, adipisci consectetur laboriosam expedita.</p>
<p>Qui sint, saepe, sapiente recusandae voluptatem iure quisquam. Quos numquam, ut deleniti provident minus dolore eaque, natus unde, voluptatum aperiam suscipit pariatur, cupiditate illum odio alias asperiores quo accusantium quod?</p>
<p>Fugiat harum sit, repudiandae magni cumque aliquid quam praesentium, atque quasi cupiditate nam voluptatum blanditiis. Odio reprehenderit veniam asperiores atque minus eveniet dolor doloribus, mollitia porro eius quod laboriosam dicta?</p>
<p>Quibusdam consequuntur ab aliquam et, a, corporis nisi natus eum placeat accusamus sint! Officiis vero doloremque sapiente, impedit debitis cupiditate repellendus ex commodi fugit sint aliquam molestiae suscipit, perferendis libero!</p>
<p>Tempora id adipisci tenetur aspernatur exercitationem nisi eveniet necessitatibus, itaque suscipit possimus sit minus ullam libero non animi incidunt excepturi accusamus totam molestias molestiae voluptates sed quos autem! Asperiores, optio!</p>
<p>Saepe ex dolorum sapiente eveniet alias et qui perspiciatis, culpa optio error ducimus, tenetur sed exercitationem ullam animi. Eligendi architecto nemo, reiciendis delectus nam quas, neque distinctio voluptatum dolor hic?</p>
<p>Deserunt, esse dolor, accusamus aut officiis illum, tempore aliquam saepe animi voluptas nam deleniti vitae architecto adipisci fugit. Sint ex architecto autem commodi quidem, minima porro obcaecati harum asperiores, itaque.</p>
<p>Error dolores incidunt ut nostrum perspiciatis, veniam. Consequuntur, temporibus dignissimos? Facere accusantium, vel officia, ut sequi nulla impedit alias ex dolores quos perferendis doloremque earum eum. Impedit blanditiis cupiditate, voluptatum!</p>
<p>Unde quae labore, dolor eos inventore porro qui. Eaque excepturi odio eveniet alias, voluptatibus, eius ipsum facere ad. Ullam, voluptas, inventore. Quo eius fugit nulla ipsum quibusdam odit, ullam tempora?</p>
<p>Aut omnis cumque exercitationem tempore harum odit repellendus reprehenderit quibusdam eligendi amet quam consequatur fugiat, cum enim aliquid debitis? Fuga a corporis nemo explicabo id animi nostrum, laudantium similique repellat.</p>
<p>Quasi sed deleniti nemo exercitationem, a beatae cum, vero ex similique omnis rerum perferendis facere tempora sit quaerat voluptatum nam qui temporibus! Numquam fugiat dolorum quia alias hic totam vitae!</p>
<p>Quidem, omnis corrupti tempora architecto. Officiis repudiandae provident ratione quod veritatis a dolor vel sit ullam ex error voluptates, alias itaque distinctio. Deleniti voluptatum, laudantium excepturi tempore. Aut, vero quisquam.</p>
<p>Repellendus rerum veritatis corporis! Exercitationem numquam temporibus asperiores nobis at quod est eius, similique tempore tenetur fugit eum libero beatae laborum. Dolores labore eos ullam reiciendis, repellendus neque vitae alias!</p>
<p>This is the last para!</p>
<footer>
<p>Copyright © This is Footer!</p>
</footer>
Sticky Footer
The purpose of a sticky footer is that it "sticks" to the bottom of the browser window. But not always, if there is enough content on the page to push the footer lower, it still does that. But if the content on the page is short, a sticky footer will still hang to the bottom of the browser window.
Please refer this: CSS - Sticky footer and Sticky Footer, Five Ways.

Just add position:relative to the body and absolute to the footer
body {
width: 90%;
max-width: 1100px;
min-height: 90vh;
margin: 15px auto;
background-color: white;
border: 3px solid black;
position:relative;
}
footer{
background:red;
position:absolute;
bottom:0;
}

You should place footer outside of the main tag.
<body>
<main>
<h1>
Welcome
</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid expedita accusantium officia consequuntur corporis laudantium qui fuga cum, tempore sed.
</p>
<hr>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint nihil architecto, placeat ducimus natus earum quidem consectetur? Sunt magnam, quas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus praesentium voluptas, debitis aliquid, voluptatem quidem asperiores ex rerum iste eveniet.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et vitae, nihil tenetur fuga voluptatibus debitis adipisci, minima eius voluptas id.
</p>
</main>
<footer>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus fuga eius, velit, impedit adipisci doloribus eveniet reiciendis architecto consequuntur reprehenderit.
</p>
</footer>
</body>
Set position of footer either relative or fixed.
body {
width: 90%;
max-width: 1100px;
min-height: 50vh;
margin: 15px auto;
background-color: white;
border: 3px solid black;
}
footer {
position: fixed;
bottom: 0;
background-color: #333;
width: 90%;
border: 3px solid black;
color: white;
}
This would do the job!

How do not allow absolute positioned block to grow outside of the screen

I have absolute positioned block which should grow down if its content growth but not go outside of the screen (create scroller on the inner content block).
How to do this?
UPD: header block can also has variable height, so I can't use its fixed height. But I don't want it to have scroll.
(Please, update the title of the question, I'm not sure about it)
.wrapper {
width: 200px;
border: 4px solid #000;
position: absolute;
top: 10px;
left: 10px;
}
.header {
height: 100px;
margin-bottom: 10px;
background-color: pink;
}
.article {
background-color: silver;
overflow: auto;
position: relative;
width: 100%;
}
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, eligendi amet a dolores laboriosam illo temporibus voluptatibus. Inventore voluptate, tenetur nobis architecto aut, veritatis suscipit itaque corrupti, optio totam sapiente.</div>
<div class="wrapper">
<div class="header">footer</div>
<div class="article">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugit voluptatibus ipsum molestiae incidunt voluptates in accusamus minus iure amet, voluptatum neque laborum est ducimus eius illo eligendi veritatis voluptas!</div>
<div>Fugiat dolores blanditiis illo, odio eligendi quam dolor odit asperiores dignissimos reiciendis cupiditate. Maiores, soluta. Possimus error nam ipsum eaque dolor voluptatibus autem, animi quas, sed, eveniet vitae repellat unde!</div>
<div>Officia nemo quas at facere eum esse cum aliquid quibusdam, magni quasi. Voluptas, ad odit possimus accusantium dolorem fuga voluptatum vero consequuntur ullam itaque laborum aut reprehenderit, facilis, commodi unde.</div>
<div>Iusto saepe quaerat corporis. Exercitationem ipsum aliquam nisi nemo dolor libero at quam dolorum rerum, praesentium, sequi fugit, eius mollitia provident inventore recusandae. Atque nesciunt suscipit rem tempora harum quos.</div>
</div>
</div>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam quos molestiae soluta laborum amet explicabo magnam. Consectetur quod quae ex commodi vel, aspernatur repellat sunt sequi reiciendis, qui, a temporibus.</div>

I think flex-box could help you here:
.wrapper {
width: 200px;
border: 4px solid #000;
position: absolute;
top: 10px;
left: 10px;
display: flex;
flex-direction: column;
max-height: calc(100vh - 20px); /* screen height - 10px margin top and bottom */
}
.header {
background-color: pink;
flex-grow: 1;
}
.article {
background-color: silver;
overflow: auto;
width: 100%;
flex-grow: 1; /* allow to grow as needed */
}
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, eligendi amet a dolores laboriosam illo temporibus voluptatibus. Inventore voluptate, tenetur nobis architecto aut, veritatis suscipit itaque corrupti, optio totam sapiente.</div>
<div class="wrapper">
<div class="header">footer</div>
<div class="article">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugit voluptatibus ipsum molestiae incidunt voluptates in accusamus minus iure amet, voluptatum neque laborum est ducimus eius illo eligendi veritatis voluptas!</div>
<div>Fugiat dolores blanditiis illo, odio eligendi quam dolor odit asperiores dignissimos reiciendis cupiditate. Maiores, soluta. Possimus error nam ipsum eaque dolor voluptatibus autem, animi quas, sed, eveniet vitae repellat unde!</div>
<div>Officia nemo quas at facere eum esse cum aliquid quibusdam, magni quasi. Voluptas, ad odit possimus accusantium dolorem fuga voluptatum vero consequuntur ullam itaque laborum aut reprehenderit, facilis, commodi unde.</div>
<div>Iusto saepe quaerat corporis. Exercitationem ipsum aliquam nisi nemo dolor libero at quam dolorum rerum, praesentium, sequi fugit, eius mollitia provident inventore recusandae. Atque nesciunt suscipit rem tempora harum quos.</div>
</div>
</div>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam quos molestiae soluta laborum amet explicabo magnam. Consectetur quod quae ex commodi vel, aspernatur repellat sunt sequi reiciendis, qui, a temporibus.</div>
Here is a version with less text to show how it would behave:
.wrapper {
width: 200px;
border: 4px solid #000;
position: absolute;
top: 10px;
left: 10px;
display: flex;
flex-direction: column;
max-height: calc(100vh - 20px);
}
.header {
background-color: pink;
flex-grow: 0;
}
.article {
background-color: silver;
overflow: auto;
width: 100%;
flex-grow: 1;
}
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga, eligendi amet a dolores laboriosam illo temporibus voluptatibus. Inventore voluptate, tenetur nobis architecto aut, veritatis suscipit itaque corrupti, optio totam sapiente.</div>
<div class="wrapper">
<div class="header">footer</div>
<div class="article">
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea fugit voluptatibus ipsum molestiae incidunt voluptates in accusamus </div>
</div>
</div>
<div>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quibusdam quos molestiae soluta laborum amet explicabo magnam. Consectetur quod quae ex commodi vel, aspernatur repellat sunt sequi reiciendis, qui, a temporibus.</div>

Position section element below the header

I am trying to make the section element to start from 1px below the header element, so I set its top property as in the css code. I thought I was doing every thing correctly but it is still starting half way into the header element.
Any ideas? Thanks
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
top: calc(1.5em + 1px);
background-color: red;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
</body>
</html>

Add position:relative in section top is not render without position
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
top: calc(1.5em + 1px);
background-color: red;
position:relative;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
</body>
</html>

remove top from the section and add the margin-top for it
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
background-color: red;
margin-top:45px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
</body>
</html>

There are two things you need to do.
First: Give following css to remove default margin and padding of browser.
* {
margin: 0;
padding: 0;
}
Second: Give margin-top: 1px; to section instead of top.
Check how top works.
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
header > button {
height: 1.5em;
width: 1.5em;
font-size: 1.5em;
top: 0;
}
label.pageTitle {
display: inline-block;
width: calc(100% - 5em);
text-align: center;
color: turquoise;
}
header {
border-bottom: 1px solid black;
width: 100%;
position: fixed;
top: 0;
}
section {
background-color: red;
margin-top: 1px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width" />
</head>
<body >
<header>
<button class="menuLeft" type="button" >☰</button>
<label class="pageTitle">Title of Page</label>
<button class="menuRight" type="button">⋮</button>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus adipisci, aliquid, aspernatur culpa dicta dignissimos dolore error expedita ipsa maiores neque non, officia omnis provident quae quidem recusandae rem vero?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut autem facere laborum magnam maxime numquam reprehenderit soluta vitae voluptas. Consequuntur ea exercitationem ipsa officiis, placeat provident quibusdam sequi velit voluptate!lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam architecto corporis doloribus laboriosam necessitatibus non quae, saepe temporibus! Accusamus ducimus eligendi eos fugit ipsam itaque numquam officiis praesentium repellat saepe?lorem Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab consequuntur eum facilis incidunt laudantium nisi non quis sapiente, vero voluptates. Animi deleniti et, fugit laborum molestiae nisi non possimus qui.lorem</p>
</section>
</body>
</html>

The reason for this is when the element is fixed, then it gets taken out of the "flow" of the document.
You can fix it with adding a margin-top to the section area and removing the top;
section {
margin-top: 40px;
background-color: red;
}
Hopefully this helps

You need to ensure that <section> is set to position: relative
Please see the following fiddle: https://jsfiddle.net/p741tbxx/
section {
top: calc(1.5em + 1px);
background-color: red;
position: relative;
}