I am working out of "HTML5 and CSS5 Illustrated Complete" Second Edition by Sasha Vodnik.
I did the initial Unit D example to a Tee, however logo styling and the positioning aren't applying correctly or at all.
/*
Lakeland Reeds Bed and Breakfast style sheet
Filename: styles.css
Author:
Date:
HTML5 and CSS3 Illustrated Unit D, Lessons
*/
/* reset styles */
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
/* body and page container */
.container {
max-width: 640px;
margin: 0 auto;
background-color: beige;
position: relative;
top: 6.2em;
}
/* headings */
header {
width: 100%;
max-width: 640px;
position: fixed;
background-color: darkgreen;
/*z-index: -1*/
}
h1 {
padding: 0.4em;
color: white;
text-align: center;
}
h2 {
padding: 0.4em 0.6em;
}
p.logo {
padding: 0.2em;
border: 2px solid beige;
color: goldenrod;
position: absolute;
top: 2em;
left: 2em;
}
/* main content */
article {
width: 70%;
float: right;
top: 6.2em;
}
article p {
padding: 0 1em 1em;
}
/* sidebar */
aside {
width: 30%;
padding: 1em 0;
background-color: goldenrod;
}
aside p {
border-bottom: 1px solid black;
border-top: 1px solid black;
padding: 0.4em 0;
margin: 0 0.6em;
}
/* footer section */
footer {
padding: 0.6em;
color: white;
background-color: darkgreen;
text-align: center;
clear: right;
}
footer p {
margin: 0.4em;
}
footer p.accent {
color: goldenrod;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lakeland Reeds Bed & Breakfast - Test Page</title>
<!--
Lakeland Reeds Bed & Breakfast test page
Filename: longpage.html
Author:
Date:
HTML5 and CSS3 Illustrated Unit D, Lessons
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.62074.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Lakeland Reeds<br>Bed & Breakfast</h1>
<p class=”logo”>ℒℛ</p>
</header>
<article>
<h2>Test Page</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra ullamcorper ultrices. Morbi egestas elementum ligula, eget congue elit pulvinar placerat. Curabitur dictum, velit et iaculis mattis, felis ante sodales lectus, consectetur convallis enim urna ut libero. Suspendisse placerat dignissim quam, et consequat ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id dolor ut nulla sodales lobortis in ac dolor. Maecenas bibendum eleifend lacus, maximus dignissim mi fermentum quis. Suspendisse sagittis tincidunt pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla nunc velit, molestie nec metus vel, dictum rutrum est. Aliquam volutpat ex massa, tempus eleifend nisl eleifend sed. Fusce egestas cursus felis in fermentum. Mauris facilisis feugiat pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec feugiat erat nec sapien tincidunt congue. Etiam urna libero, aliquet ut neque a, vulputate fermentum velit.</p>
<p>Nullam vel enim luctus, imperdiet neque et, aliquet turpis. Morbi a rhoncus metus. Nulla facilisi. Nunc tincidunt vel eros id laoreet. Fusce id nibh rhoncus, porta nulla nec, euismod ligula. Phasellus bibendum mi lectus. Donec a egestas mauris.</p>
<p>Curabitur et sapien consequat, varius diam in, viverra massa. Aliquam erat volutpat. Vestibulum facilisis urna elit, vel malesuada mauris pulvinar vitae. In ultrices tortor nisl, et faucibus ex dignissim non. Vivamus eget risus tempus, rutrum ipsum sit amet, gravida mi. Vestibulum et lobortis sem. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Donec ultricies risus quis metus cursus, in feugiat quam ultricies. Nullam sit amet enim in tellus molestie sodales et et leo. Duis pulvinar venenatis consequat. Aenean facilisis arcu libero, a auctor odio feugiat at. Donec sagittis sollicitudin maximus. Maecenas elementum, lectus vitae fringilla tempus, mi nibh faucibus sapien, in fermentum dui massa vel dui. Nullam sed ligula scelerisque, viverra quam sit amet, bibendum libero. Duis at fermentum dolor. Phasellus non dictum nulla. Morbi a semper nibh. Vivamus ullamcorper purus ac nisi consectetur bibendum. Nulla varius sodales tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur imperdiet neque nec purus pellentesque, vitae convallis libero accumsan. Praesent semper lacus in tellus eleifend, et tristique lorem egestas.</p>
<p>Praesent ut nisi massa. Nam aliquam sapien volutpat mauris suscipit facilisis. Ut accumsan lorem vel eleifend ullamcorper. Nulla at lobortis purus. Praesent viverra in velit a aliquet. In in vulputate massa. Integer ac ligula a risus iaculis pharetra imperdiet sit amet lectus. Proin vestibulum efficitur imperdiet. Suspendisse ac hendrerit ante.</p>
<p>Aenean eu ipsum eros. Aenean faucibus sollicitudin mi, vel ullamcorper nisi porttitor a. Suspendisse potenti. Mauris facilisis eu neque id dignissim. Pellentesque nunc enim, feugiat ac orci vel, bibendum tincidunt sem. Vivamus placerat finibus ultricies. Curabitur ac fringilla diam.</p>
<p>Integer mi nibh, accumsan fringilla consectetur eu, scelerisque nec ipsum. Nullam in bibendum risus. Integer fringilla enim ac diam sollicitudin, eget elementum odio accumsan. Aliquam efficitur congue ante volutpat lacinia. Nam et ante eu arcu bibendum mollis. Morbi elementum mauris tristique ullamcorper dictum. Vestibulum ultrices, nibh vel tristique lacinia, massa orci feugiat nisi, nec mattis libero sem sit amet sem. Curabitur in leo quis sapien porta blandit sit amet sed felis. Proin et diam nisi. Sed quis sapien quis lectus molestie imperdiet.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam euismod arcu molestie, congue felis non, placerat lacus. Proin semper nisi non posuere porttitor. Donec turpis ipsum, tincidunt in pellentesque in, accumsan at ipsum. Fusce rhoncus auctor sem sed fringilla. Sed sodales lorem rhoncus nunc blandit vestibulum. Vestibulum convallis egestas maximus. Donec porta velit ipsum, porttitor condimentum ipsum cursus nec. In hac habitasse platea dictumst. In volutpat gravida iaculis. In porttitor mattis eros, et feugiat lectus pulvinar ut. Vestibulum vel libero at justo posuere tristique et in mauris. Duis condimentum lacinia luctus. Mauris ut cursus lacus, pellentesque efficitur metus. Nunc gravida, ex cursus commodo hendrerit, arcu metus scelerisque ligula, eu lacinia felis massa blandit diam. Pellentesque ac consequat est.</p>
<p>Cras volutpat vitae ipsum non molestie. Aliquam id risus quam. Aenean malesuada dui sed est suscipit varius. Morbi maximus diam luctus tempus mattis. In sit amet pulvinar eros, non imperdiet neque. Nullam suscipit tortor risus, pellentesque molestie tortor pharetra vel. Proin quis malesuada lacus. Sed pharetra scelerisque leo. Praesent accumsan at ipsum eu rutrum. Nam fermentum velit quis arcu ullamcorper maximus. Pellentesque blandit vehicula libero, eget sagittis est imperdiet et. Curabitur nisl eros, consequat vel tellus vehicula, pulvinar porta tellus.</p>
<p>Integer porttitor placerat fringilla. Proin eleifend in nulla in commodo. Etiam a dictum dui. Aliquam faucibus massa in lacinia fermentum. Nunc placerat condimentum tortor, sit amet varius mauris pretium quis. In non arcu dolor. Praesent venenatis sed sem eleifend consectetur. In ex mi, vestibulum non interdum et, luctus vel sem. Duis eu diam a tellus bibendum elementum.</p>
<p>Praesent condimentum sem eget magna consequat, eget gravida libero elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a posuere metus. Nullam tellus justo, venenatis sit amet arcu eu, venenatis vulputate neque. Etiam vestibulum orci quis mauris lacinia, et blandit arcu imperdiet. Vestibulum aliquam scelerisque justo, tincidunt congue orci convallis a. Ut facilisis arcu non orci interdum, sit amet facilisis mi consequat. Cras sed venenatis erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc pharetra a sapien non ultrices. Donec finibus nulla quis purus ullamcorper, sit amet accumsan sem blandit. Ut tempus justo quis nulla viverra iaculis. In placerat turpis sit amet quam tincidunt, eget lobortis dui imperdiet. Fusce a malesuada ligula, et dapibus dolor. Maecenas euismod dui nec mauris fermentum fringilla.</p>
<p>Mauris dui lectus, luctus et auctor mollis, luctus fringilla dui. Duis pharetra massa id arcu imperdiet mollis. Nam ornare efficitur gravida. Sed ultrices nibh nisi, ut maximus purus aliquam et. In dignissim ut tortor nec tincidunt. Sed tellus arcu, posuere vitae nulla eu, pellentesque feugiat mi. Phasellus lectus enim, tincidunt nec dui eu, congue egestas augue.</p>
<p>Praesent eget purus suscipit, placerat purus ac, lacinia metus. Curabitur placerat facilisis augue, non sagittis ipsum dictum et. Mauris luctus et risus vel laoreet. Maecenas tempor ipsum a massa gravida auctor. Nunc nec massa sed urna aliquet posuere ut nec augue. Integer lacus nisi, ultricies at neque id, vestibulum suscipit lorem. Vestibulum efficitur arcu vitae magna bibendum gravida. Ut purus lorem, vestibulum quis ipsum eu, efficitur suscipit ligula. Sed nec urna libero. Pellentesque ullamcorper turpis non ullamcorper pulvinar. Nullam vestibulum, dui a congue venenatis, nibh sem tempus urna, non dapibus ligula orci et diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus facilisis lobortis est, eget convallis est cursus at. Ut id ullamcorper dolor.</p>
<p>Sed nisl lorem, sodales sed pretium et, consectetur sollicitudin mi. Etiam sed urna tempor, fermentum sapien ut, euismod nisi. Aliquam erat volutpat. Phasellus at ipsum ut odio convallis molestie. Integer ultricies ornare leo ac tempus. Mauris accumsan bibendum dapibus. Integer quis nunc vitae mauris eleifend dictum ut non velit. Aliquam non lacus ut tellus fringilla auctor. Donec et pellentesque dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum semper maximus lacus, a hendrerit erat. Quisque felis magna, tincidunt eu enim non, consequat pharetra nunc. Pellentesque sodales nulla eu facilisis venenatis. Vestibulum quis tortor quis sapien tincidunt aliquam nec mattis enim.</p>
<p>Ut eget sagittis erat. Fusce euismod volutpat diam, non semper lorem congue accumsan. Proin malesuada erat id sodales scelerisque. Aliquam non quam ut magna rutrum commodo. Nulla facilisi. Aliquam erat volutpat. Aliquam erat volutpat. Integer a sem eu metus consectetur malesuada rutrum non magna.</p>
</article>
<aside>
<p>Praesent ut nisi massa. Nam aliquam sapien volutpat mauris suscipit facilisis. Ut accumsan lorem vel eleifend ullamcorper. Nulla at lobortis purus. Praesent viverra in velit a aliquet. In in vulputate massa. Integer ac ligula a risus iaculis pharetra imperdiet sit amet lectus. Proin vestibulum efficitur imperdiet. Suspendisse ac hendrerit ante.</p>
</aside>
<footer>
<p class="accent">Philip Blaine, Proprietor</p>
<p>45 Marsh Grass Ln. • Marble, MN 55764 • (218) 555-5253</p>
</footer>
</div>
</body>
</html>
A white space appears above where the header should go, which should remain fixed at the top and follow as you scroll without overlap at the beginning. Then the "LR" is not applying any ruling at all.
Add top: 0; to your header in CSS. It should look like this:
header {
width: 100%;
max-width: 640px;
position: fixed;
background-color: darkgreen;
/*z-index: -1*/
top: 0;
}
Now you can see that the container has slipped a little. Therefore you could not give the container top: 6.2em; but approx. top: 7.5em;. At the end it should look like this:
.container {
max-width: 640px;
margin: 0 auto;
background-color: beige;
position: relative;
top: 6.2em;
}
Here is the full code:
/*
Lakeland Reeds Bed and Breakfast style sheet
Filename: styles.css
Author:
Date:
HTML5 and CSS3 Illustrated Unit D, Lessons
*/
/* reset styles */
article, body, div, footer, header, h1, h2, p {
border: 0;
padding: 0;
margin: 0;
}
/* body and page container */
.container {
max-width: 640px;
margin: 0 auto;
background-color: beige;
position: relative;
top: 7.5em;
}
/* headings */
header {
width: 100%;
max-width: 640px;
position: fixed;
background-color: darkgreen;
/*z-index: -1*/
top: 0;
}
h1 {
padding: 0.4em;
color: white;
text-align: center;
}
h2 {
padding: 0.4em 0.6em;
}
p.logo {
padding: 0.2em;
border: 2px solid beige;
color: goldenrod;
position: absolute;
top: 2em;
left: 2em;
}
/* main content */
article {
width: 70%;
float: right;
top: 6.2em;
}
article p {
padding: 0 1em 1em;
}
/* sidebar */
aside {
width: 30%;
padding: 1em 0;
background-color: goldenrod;
}
aside p {
border-bottom: 1px solid black;
border-top: 1px solid black;
padding: 0.4em 0;
margin: 0 0.6em;
}
/* footer section */
footer {
padding: 0.6em;
color: white;
background-color: darkgreen;
text-align: center;
clear: right;
}
footer p {
margin: 0.4em;
}
footer p.accent {
color: goldenrod;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Lakeland Reeds Bed & Breakfast - Test Page</title>
<!--
Lakeland Reeds Bed & Breakfast test page
Filename: longpage.html
Author:
Date:
HTML5 and CSS3 Illustrated Unit D, Lessons
-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="modernizr.custom.62074.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<header>
<h1>Lakeland Reeds<br>Bed & Breakfast</h1>
<p class=”logo”>ℒℛ</p>
</header>
<article>
<h2>Test Page</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam viverra ullamcorper ultrices. Morbi egestas elementum ligula, eget congue elit pulvinar placerat. Curabitur dictum, velit et iaculis mattis, felis ante sodales lectus, consectetur convallis enim urna ut libero. Suspendisse placerat dignissim quam, et consequat ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur id dolor ut nulla sodales lobortis in ac dolor. Maecenas bibendum eleifend lacus, maximus dignissim mi fermentum quis. Suspendisse sagittis tincidunt pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla nunc velit, molestie nec metus vel, dictum rutrum est. Aliquam volutpat ex massa, tempus eleifend nisl eleifend sed. Fusce egestas cursus felis in fermentum. Mauris facilisis feugiat pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec feugiat erat nec sapien tincidunt congue. Etiam urna libero, aliquet ut neque a, vulputate fermentum velit.</p>
<p>Nullam vel enim luctus, imperdiet neque et, aliquet turpis. Morbi a rhoncus metus. Nulla facilisi. Nunc tincidunt vel eros id laoreet. Fusce id nibh rhoncus, porta nulla nec, euismod ligula. Phasellus bibendum mi lectus. Donec a egestas mauris.</p>
<p>Curabitur et sapien consequat, varius diam in, viverra massa. Aliquam erat volutpat. Vestibulum facilisis urna elit, vel malesuada mauris pulvinar vitae. In ultrices tortor nisl, et faucibus ex dignissim non. Vivamus eget risus tempus, rutrum ipsum sit amet, gravida mi. Vestibulum et lobortis sem. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Donec ultricies risus quis metus cursus, in feugiat quam ultricies. Nullam sit amet enim in tellus molestie sodales et et leo. Duis pulvinar venenatis consequat. Aenean facilisis arcu libero, a auctor odio feugiat at. Donec sagittis sollicitudin maximus. Maecenas elementum, lectus vitae fringilla tempus, mi nibh faucibus sapien, in fermentum dui massa vel dui. Nullam sed ligula scelerisque, viverra quam sit amet, bibendum libero. Duis at fermentum dolor. Phasellus non dictum nulla. Morbi a semper nibh. Vivamus ullamcorper purus ac nisi consectetur bibendum. Nulla varius sodales tempor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur imperdiet neque nec purus pellentesque, vitae convallis libero accumsan. Praesent semper lacus in tellus eleifend, et tristique lorem egestas.</p>
<p>Praesent ut nisi massa. Nam aliquam sapien volutpat mauris suscipit facilisis. Ut accumsan lorem vel eleifend ullamcorper. Nulla at lobortis purus. Praesent viverra in velit a aliquet. In in vulputate massa. Integer ac ligula a risus iaculis pharetra imperdiet sit amet lectus. Proin vestibulum efficitur imperdiet. Suspendisse ac hendrerit ante.</p>
<p>Aenean eu ipsum eros. Aenean faucibus sollicitudin mi, vel ullamcorper nisi porttitor a. Suspendisse potenti. Mauris facilisis eu neque id dignissim. Pellentesque nunc enim, feugiat ac orci vel, bibendum tincidunt sem. Vivamus placerat finibus ultricies. Curabitur ac fringilla diam.</p>
<p>Integer mi nibh, accumsan fringilla consectetur eu, scelerisque nec ipsum. Nullam in bibendum risus. Integer fringilla enim ac diam sollicitudin, eget elementum odio accumsan. Aliquam efficitur congue ante volutpat lacinia. Nam et ante eu arcu bibendum mollis. Morbi elementum mauris tristique ullamcorper dictum. Vestibulum ultrices, nibh vel tristique lacinia, massa orci feugiat nisi, nec mattis libero sem sit amet sem. Curabitur in leo quis sapien porta blandit sit amet sed felis. Proin et diam nisi. Sed quis sapien quis lectus molestie imperdiet.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam euismod arcu molestie, congue felis non, placerat lacus. Proin semper nisi non posuere porttitor. Donec turpis ipsum, tincidunt in pellentesque in, accumsan at ipsum. Fusce rhoncus auctor sem sed fringilla. Sed sodales lorem rhoncus nunc blandit vestibulum. Vestibulum convallis egestas maximus. Donec porta velit ipsum, porttitor condimentum ipsum cursus nec. In hac habitasse platea dictumst. In volutpat gravida iaculis. In porttitor mattis eros, et feugiat lectus pulvinar ut. Vestibulum vel libero at justo posuere tristique et in mauris. Duis condimentum lacinia luctus. Mauris ut cursus lacus, pellentesque efficitur metus. Nunc gravida, ex cursus commodo hendrerit, arcu metus scelerisque ligula, eu lacinia felis massa blandit diam. Pellentesque ac consequat est.</p>
<p>Cras volutpat vitae ipsum non molestie. Aliquam id risus quam. Aenean malesuada dui sed est suscipit varius. Morbi maximus diam luctus tempus mattis. In sit amet pulvinar eros, non imperdiet neque. Nullam suscipit tortor risus, pellentesque molestie tortor pharetra vel. Proin quis malesuada lacus. Sed pharetra scelerisque leo. Praesent accumsan at ipsum eu rutrum. Nam fermentum velit quis arcu ullamcorper maximus. Pellentesque blandit vehicula libero, eget sagittis est imperdiet et. Curabitur nisl eros, consequat vel tellus vehicula, pulvinar porta tellus.</p>
<p>Integer porttitor placerat fringilla. Proin eleifend in nulla in commodo. Etiam a dictum dui. Aliquam faucibus massa in lacinia fermentum. Nunc placerat condimentum tortor, sit amet varius mauris pretium quis. In non arcu dolor. Praesent venenatis sed sem eleifend consectetur. In ex mi, vestibulum non interdum et, luctus vel sem. Duis eu diam a tellus bibendum elementum.</p>
<p>Praesent condimentum sem eget magna consequat, eget gravida libero elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin a posuere metus. Nullam tellus justo, venenatis sit amet arcu eu, venenatis vulputate neque. Etiam vestibulum orci quis mauris lacinia, et blandit arcu imperdiet. Vestibulum aliquam scelerisque justo, tincidunt congue orci convallis a. Ut facilisis arcu non orci interdum, sit amet facilisis mi consequat. Cras sed venenatis erat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc pharetra a sapien non ultrices. Donec finibus nulla quis purus ullamcorper, sit amet accumsan sem blandit. Ut tempus justo quis nulla viverra iaculis. In placerat turpis sit amet quam tincidunt, eget lobortis dui imperdiet. Fusce a malesuada ligula, et dapibus dolor. Maecenas euismod dui nec mauris fermentum fringilla.</p>
<p>Mauris dui lectus, luctus et auctor mollis, luctus fringilla dui. Duis pharetra massa id arcu imperdiet mollis. Nam ornare efficitur gravida. Sed ultrices nibh nisi, ut maximus purus aliquam et. In dignissim ut tortor nec tincidunt. Sed tellus arcu, posuere vitae nulla eu, pellentesque feugiat mi. Phasellus lectus enim, tincidunt nec dui eu, congue egestas augue.</p>
<p>Praesent eget purus suscipit, placerat purus ac, lacinia metus. Curabitur placerat facilisis augue, non sagittis ipsum dictum et. Mauris luctus et risus vel laoreet. Maecenas tempor ipsum a massa gravida auctor. Nunc nec massa sed urna aliquet posuere ut nec augue. Integer lacus nisi, ultricies at neque id, vestibulum suscipit lorem. Vestibulum efficitur arcu vitae magna bibendum gravida. Ut purus lorem, vestibulum quis ipsum eu, efficitur suscipit ligula. Sed nec urna libero. Pellentesque ullamcorper turpis non ullamcorper pulvinar. Nullam vestibulum, dui a congue venenatis, nibh sem tempus urna, non dapibus ligula orci et diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus facilisis lobortis est, eget convallis est cursus at. Ut id ullamcorper dolor.</p>
<p>Sed nisl lorem, sodales sed pretium et, consectetur sollicitudin mi. Etiam sed urna tempor, fermentum sapien ut, euismod nisi. Aliquam erat volutpat. Phasellus at ipsum ut odio convallis molestie. Integer ultricies ornare leo ac tempus. Mauris accumsan bibendum dapibus. Integer quis nunc vitae mauris eleifend dictum ut non velit. Aliquam non lacus ut tellus fringilla auctor. Donec et pellentesque dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum semper maximus lacus, a hendrerit erat. Quisque felis magna, tincidunt eu enim non, consequat pharetra nunc. Pellentesque sodales nulla eu facilisis venenatis. Vestibulum quis tortor quis sapien tincidunt aliquam nec mattis enim.</p>
<p>Ut eget sagittis erat. Fusce euismod volutpat diam, non semper lorem congue accumsan. Proin malesuada erat id sodales scelerisque. Aliquam non quam ut magna rutrum commodo. Nulla facilisi. Aliquam erat volutpat. Aliquam erat volutpat. Integer a sem eu metus consectetur malesuada rutrum non magna.</p>
</article>
<aside>
<p>Praesent ut nisi massa. Nam aliquam sapien volutpat mauris suscipit facilisis. Ut accumsan lorem vel eleifend ullamcorper. Nulla at lobortis purus. Praesent viverra in velit a aliquet. In in vulputate massa. Integer ac ligula a risus iaculis pharetra imperdiet sit amet lectus. Proin vestibulum efficitur imperdiet. Suspendisse ac hendrerit ante.</p>
</aside>
<footer>
<p class="accent">Philip Blaine, Proprietor</p>
<p>45 Marsh Grass Ln. • Marble, MN 55764 • (218) 555-5253</p>
</footer>
</div>
</body>
</html>
Related
This question already has answers here:
Creating a variable height "fixed" header in CSS with scrollable content
(5 answers)
Closed 3 years ago.
I am making a basic website with a sticky Navigation Bar, When I add text to the website, the top rows are hidden behind the Navbar. Is there any way for me to position the text to start below a certain pixel, or something like that?
Obviously I can just spam p tags until it works, But since this will be a reoccurring problem I would like to know how to fix it properly.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
color: #2EFE2E;
}
.navbar {}
<div class="navbar">
<ul>
<li>Home</li>
<li>Enemies</li>
<li>Video</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet diam nibh, vitae viverra libero ultricies nec. In elementum finibus luctus. Nulla diam odio, fringilla vitae cursus vestibulum, porta lacinia eros. Etiam ultricies lobortis
ipsum, quis tristique massa viverra eget. In eget auctor magna. Integer bibendum ligula quis felis consequat, non tempor sem volutpat. Integer accumsan, neque in aliquam egestas, dolor est facilisis velit, convallis malesuada nisl arcu at metus. Duis
sed rutrum ipsum, vel convallis risus. Duis rhoncus mi ut odio elementum, ut tincidunt nibh malesuada. Aliquam maximus sapien auctor ante cursus, non pretium est varius. Donec ac mi maximus, sodales ipsum vitae, ornare eros. Sed at pulvinar turpis.
Aliquam tortor nunc, vehicula at laoreet id, ullamcorper et libero. Ut vitae euismod est, nec lacinia ligula. Curabitur ornare felis id quam semper, ac consectetur metus facilisis. Integer mollis luctus arcu sed dignissim. Phasellus tincidunt, lorem
gravida efficitur commodo, risus neque facilisis odio, nec viverra ligula arcu ut tortor. Cras sit amet porta orci. Pellentesque sed nibh metus. Mauris id justo nec erat efficitur molestie. Donec pulvinar, enim nec mollis placerat, mauris erat vestibulum
ex, quis sagittis dolor lacus in nibh. Nulla vel egestas nunc. Proin ut nulla tincidunt, placerat nibh id, ornare lorem. Integer nunc est, vulputate sit amet tempus eu, vulputate id mauris. Sed congue tortor id diam aliquet eleifend. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum quam eu ex gravida, sed aliquet urna sodales. Aenean congue nisi sed eros aliquet, et sagittis nisl bibendum. Curabitur consectetur, massa ac suscipit vestibulum, sapien
dui pellentesque lorem, et cursus sapien lectus et risus. Duis cursus aliquet tristique. Quisque orci leo, rutrum eu lorem vitae, consequat luctus tortor. Morbi a elit augue. Maecenas et libero sed ligula aliquet cursus. Phasellus in sapien id lorem
sagittis interdum. Suspendisse non luctus sem. Sed vestibulum mi nec orci fermentum, suscipit mattis mi ornare. Ut et nulla commodo, lobortis elit non, molestie diam. Nam a ante fermentum, lobortis odio ut, porta tortor. In vel tempor leo, non hendrerit
tellus. Mauris non rutrum turpis, vel gravida turpis. Quisque iaculis lectus vitae magna congue, sed imperdiet lectus dictum. Ut et dolor ut lacus fringilla molestie a vel ipsum. Maecenas nec malesuada ex. Maecenas efficitur semper lacinia. Morbi
varius elementum feugiat. Aenean quis pellentesque eros. Ut quam arcu, blandit non eros et, mattis malesuada nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis accumsan tristique molestie. Vivamus rhoncus arcu eget euismod varius.
Fusce purus urna, semper vitae orci vitae, cursus facilisis tellus. Quisque laoreet commodo quam eu consectetur. Proin ligula felis, rutrum nec neque quis, scelerisque lacinia erat. Aliquam tortor leo, volutpat accumsan mollis sit amet, tristique
sit amet lacus. Maecenas imperdiet nibh vitae laoreet tempor. Nulla viverra, nulla ut luctus aliquam, erat nisi accumsan quam, vitae efficitur velit dolor fermentum felis. Sed nec lorem non lectus pellentesque dictum.</p>
</div>
You just add this CSS in your code.
.content{
margin-top: 40px;
}
Maybe a padding. This is what I do.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 9;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
color: #2EFE2E;
}
.content {
width: 100%;
position: relative;
float: left;
padding-top: 40px;
}
<div class="navbar">
<ul>
<li>Home</li>
<li>Enemies</li>
<li>Video</li>
</ul>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet diam nibh, vitae viverra libero ultricies nec. In elementum finibus luctus. Nulla diam odio, fringilla vitae cursus vestibulum, porta lacinia eros. Etiam ultricies lobortis
ipsum, quis tristique massa viverra eget. In eget auctor magna. Integer bibendum ligula quis felis consequat, non tempor sem volutpat. Integer accumsan, neque in aliquam egestas, dolor est facilisis velit, convallis malesuada nisl arcu at metus. Duis
sed rutrum ipsum, vel convallis risus. Duis rhoncus mi ut odio elementum, ut tincidunt nibh malesuada. Aliquam maximus sapien auctor ante cursus, non pretium est varius. Donec ac mi maximus, sodales ipsum vitae, ornare eros. Sed at pulvinar turpis.
Aliquam tortor nunc, vehicula at laoreet id, ullamcorper et libero. Ut vitae euismod est, nec lacinia ligula. Curabitur ornare felis id quam semper, ac consectetur metus facilisis. Integer mollis luctus arcu sed dignissim. Phasellus tincidunt, lorem
gravida efficitur commodo, risus neque facilisis odio, nec viverra ligula arcu ut tortor. Cras sit amet porta orci. Pellentesque sed nibh metus. Mauris id justo nec erat efficitur molestie. Donec pulvinar, enim nec mollis placerat, mauris erat vestibulum
ex, quis sagittis dolor lacus in nibh. Nulla vel egestas nunc. Proin ut nulla tincidunt, placerat nibh id, ornare lorem. Integer nunc est, vulputate sit amet tempus eu, vulputate id mauris. Sed congue tortor id diam aliquet eleifend. Orci varius natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum quam eu ex gravida, sed aliquet urna sodales. Aenean congue nisi sed eros aliquet, et sagittis nisl bibendum. Curabitur consectetur, massa ac suscipit vestibulum, sapien
dui pellentesque lorem, et cursus sapien lectus et risus. Duis cursus aliquet tristique. Quisque orci leo, rutrum eu lorem vitae, consequat luctus tortor. Morbi a elit augue. Maecenas et libero sed ligula aliquet cursus. Phasellus in sapien id lorem
sagittis interdum. Suspendisse non luctus sem. Sed vestibulum mi nec orci fermentum, suscipit mattis mi ornare. Ut et nulla commodo, lobortis elit non, molestie diam. Nam a ante fermentum, lobortis odio ut, porta tortor. In vel tempor leo, non hendrerit
tellus. Mauris non rutrum turpis, vel gravida turpis. Quisque iaculis lectus vitae magna congue, sed imperdiet lectus dictum. Ut et dolor ut lacus fringilla molestie a vel ipsum. Maecenas nec malesuada ex. Maecenas efficitur semper lacinia. Morbi
varius elementum feugiat. Aenean quis pellentesque eros. Ut quam arcu, blandit non eros et, mattis malesuada nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis accumsan tristique molestie. Vivamus rhoncus arcu eget euismod varius.
Fusce purus urna, semper vitae orci vitae, cursus facilisis tellus. Quisque laoreet commodo quam eu consectetur. Proin ligula felis, rutrum nec neque quis, scelerisque lacinia erat. Aliquam tortor leo, volutpat accumsan mollis sit amet, tristique
sit amet lacus. Maecenas imperdiet nibh vitae laoreet tempor. Nulla viverra, nulla ut luctus aliquam, erat nisi accumsan quam, vitae efficitur velit dolor fermentum felis. Sed nec lorem non lectus pellentesque dictum.</p>
</div>
Margin-top u have to give
<!DOCTYPE html>
<html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
color: #2EFE2E;
}
.navbar {
}
.content{
margin-top:
55px
}
</style>
<body>
<div class="navbar">
<ul>
<li>Home</li>
<li>Enemies</li>
<li>Video</li>
</ul>
</div>
<div class="content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent imperdiet diam nibh, vitae viverra libero ultricies nec. In elementum finibus luctus. Nulla diam odio, fringilla vitae cursus vestibulum, porta lacinia eros. Etiam ultricies lobortis ipsum, quis tristique massa viverra eget. In eget auctor magna. Integer bibendum ligula quis felis consequat, non tempor sem volutpat. Integer accumsan, neque in aliquam egestas, dolor est facilisis velit, convallis malesuada nisl arcu at metus. Duis sed rutrum ipsum, vel convallis risus. Duis rhoncus mi ut odio elementum, ut tincidunt nibh malesuada. Aliquam maximus sapien auctor ante cursus, non pretium est varius. Donec ac mi maximus, sodales ipsum vitae, ornare eros. Sed at pulvinar turpis.
Aliquam tortor nunc, vehicula at laoreet id, ullamcorper et libero. Ut vitae euismod est, nec lacinia ligula. Curabitur ornare felis id quam semper, ac consectetur metus facilisis. Integer mollis luctus arcu sed dignissim. Phasellus tincidunt, lorem gravida efficitur commodo, risus neque facilisis odio, nec viverra ligula arcu ut tortor. Cras sit amet porta orci. Pellentesque sed nibh metus. Mauris id justo nec erat efficitur molestie. Donec pulvinar, enim nec mollis placerat, mauris erat vestibulum ex, quis sagittis dolor lacus in nibh. Nulla vel egestas nunc.
Proin ut nulla tincidunt, placerat nibh id, ornare lorem. Integer nunc est, vulputate sit amet tempus eu, vulputate id mauris. Sed congue tortor id diam aliquet eleifend. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum quam eu ex gravida, sed aliquet urna sodales. Aenean congue nisi sed eros aliquet, et sagittis nisl bibendum. Curabitur consectetur, massa ac suscipit vestibulum, sapien dui pellentesque lorem, et cursus sapien lectus et risus. Duis cursus aliquet tristique. Quisque orci leo, rutrum eu lorem vitae, consequat luctus tortor. Morbi a elit augue. Maecenas et libero sed ligula aliquet cursus. Phasellus in sapien id lorem sagittis interdum. Suspendisse non luctus sem. Sed vestibulum mi nec orci fermentum, suscipit mattis mi ornare.
Ut et nulla commodo, lobortis elit non, molestie diam. Nam a ante fermentum, lobortis odio ut, porta tortor. In vel tempor leo, non hendrerit tellus. Mauris non rutrum turpis, vel gravida turpis. Quisque iaculis lectus vitae magna congue, sed imperdiet lectus dictum. Ut et dolor ut lacus fringilla molestie a vel ipsum. Maecenas nec malesuada ex. Maecenas efficitur semper lacinia. Morbi varius elementum feugiat. Aenean quis pellentesque eros. Ut quam arcu, blandit non eros et, mattis malesuada nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis accumsan tristique molestie. Vivamus rhoncus arcu eget euismod varius.
Fusce purus urna, semper vitae orci vitae, cursus facilisis tellus. Quisque laoreet commodo quam eu consectetur. Proin ligula felis, rutrum nec neque quis, scelerisque lacinia erat. Aliquam tortor leo, volutpat accumsan mollis sit amet, tristique sit amet lacus. Maecenas imperdiet nibh vitae laoreet tempor. Nulla viverra, nulla ut luctus aliquam, erat nisi accumsan quam, vitae efficitur velit dolor fermentum felis. Sed nec lorem non lectus pellentesque dictum.</p></div>
</body>
</html>
I have a dynamically generated HTML page that has to be saved as pdf. The page has border that has to appear on the edge of the page thus in the #media print, I have set the #page size as A4 and margins as 0. The problem is that the content will get overwritten on the page border.
When I set the padding to the border, the top of the page first page gets properly printed but the content gets overwritten on the border at the bottom and in the remaining pages.
This can be clearly seen as shown in the images below.
Since I gave padding to the top border, the top of the first page is fine but not the bottom.
In this second page, the entire content gets inside the margin.
Here is the HTML for the same document.
body {
margin: 0px;
padding: 0px;
}
#pageborder {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 10px solid #F5821F;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
margin: 0px;
padding: 0px;
}
#pageborder2 {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 10px solid #F5821F;
margin: 0px;
padding: 0px;
}
#pageborder3 {
position: fixed;
left: 20px;
right: 20px;
top: 20px;
bottom: 20px;
border: 3px solid #F5821F;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
padding-top: 90px;
padding-bottom: 90px;
}
#innerContent {
margin: 50px;
}
#media print {
#page{
margin: 0;
}
#pageborder3 {
padding-top: 90px;
padding-bottom: 90px;
}
}
<body>
<div id="pageborder">
</div>
<div id="pageborder2">
</div>
<div id="pageborder3">
</div>
<div id='innerContent'>
<h1>Test</h1>
<p>Lorem Ipsum</p>
</div>
</body>
A combination between page-break-inside: avoid and padding/margin on paragraphs will do the trick.
This will look strange if there are very large paragraph around the page break, as this will make a big gap at the bottom of the page, so you should divide the text in smaller paragraphs.
/* I have removed your pageborder styles from answer to only include
the relevant styles for the sollution to the problem. */
#page{
size: A4;
margin: 0;
}
#innerContent {
/* This is the margin around the content */
margin: 50px;
}
h1, h2, h3, h4, h5, h6, p, .flow-control
/* Add any element types here that can occur as top element in the document flow
or just add class="flow-control" where needed */
{
page-break-inside: avoid; /* Make sure no page breake inside a paragraph */
padding-top: 50px; /* Creates a buffer to enlarge the area for page break.
This is also the visual padding for the firs paragraph on each page. */
margin-top: -50px; /* Cancel the top padding for all except the first paragraph on each page. */
}
h1, h2{
margin-top: -20px; /* Reduce the cancelling of top padding, so that
these elements actually will have some top padding */
}
p {
padding-bottom: 20px; /* This is the margin between paragraphs and also
works as buffer size at bottom of the page */
}
<body>
<div class="pageborder" id="pageborder1"></div>
<div class="pageborder" id="pageborder2"></div>
<div class="pageborder" id="pageborder3"></div>
<article id='innerContent'>
<h1>Lorem Ipsum</h1>
<section>
<blockquote cite="https://la.wikisource.org/wiki/De_finibus_bonorum_et_malorum/Liber_Primus">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</blockquote >
<blockquote cite="https://www.quora.com/What-is-the-origin-of-lorem-ipsum-text">
There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain...
</blockquote >
</section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vestibulum, justo quis elementum elementum, dui dolor accumsan ligula, vitae condimentum est magna a dui. Praesent accumsan mi eget augue cursus, vel maximus ante cursus. Nullam luctus massa gravida ipsum luctus dignissim. In eget turpis ut sapien consequat euismod. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ac porttitor nisl. Fusce ac sapien eget lacus gravida pharetra non id risus. Donec luctus finibus commodo. Cras convallis in nunc a venenatis. Curabitur at nisi nec nisl semper sagittis sed vel sem.</p>
<p>Sed dictum massa quam, nec bibendum neque egestas non. Ut mattis lacus nisi, gravida hendrerit erat scelerisque sit amet. Nulla eget leo venenatis eros rhoncus bibendum et at quam. Morbi ac leo convallis, maximus velit et, porttitor justo. Aliquam erat volutpat. Donec aliquam ultricies nunc, vitae dapibus sapien sollicitudin non. Pellentesque ac diam ut odio posuere efficitur non finibus ante. Vivamus aliquam leo a suscipit finibus. Mauris a ex metus. Phasellus luctus augue sit amet ipsum venenatis, at imperdiet nunc sollicitudin. Cras iaculis lorem ac justo posuere, sed venenatis nibh fringilla.</p>
<p>Duis imperdiet euismod sem, id dignissim erat gravida vel. Duis nec nibh lectus. Donec in rhoncus sapien. Nulla nisi nisl, gravida at vulputate at, ornare id tortor. Nulla varius ligula ac turpis porta, non tristique leo efficitur. Quisque suscipit, est ut aliquam interdum, mi nulla pharetra metus, imperdiet imperdiet ex sapien sed metus. Integer sit amet lectus ut justo tincidunt laoreet sit amet ac ipsum.</p>
<p>Donec mollis tempus cursus. Mauris et tincidunt ante. Nam leo ex, volutpat non velit ac, imperdiet luctus tellus. Vestibulum vitae consectetur mauris, eu imperdiet dolor. Vestibulum viverra mi id diam viverra, at convallis ex bibendum. Nam mollis feugiat pulvinar. Maecenas neque ipsum, consequat a iaculis at, semper in ipsum. Vivamus a porta sapien. Fusce pulvinar, nulla at euismod semper, ipsum arcu vestibulum orci, sed egestas lectus odio et mi. Sed venenatis felis accumsan, consectetur orci sed, convallis risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin mattis, orci ac rutrum lobortis, odio tellus euismod mi, et scelerisque tellus massa ut risus.</p>
<p>Aenean in elit vitae risus pharetra suscipit eu sed risus. Maecenas sollicitudin nunc ac lacus fermentum tincidunt. Maecenas a pretium ipsum. In viverra eros sit amet lectus eleifend, at auctor velit mollis. Proin aliquam risus vel arcu pellentesque, eget volutpat justo facilisis. Nunc in ex tellus. Mauris euismod luctus commodo. Pellentesque arcu justo, aliquam ut quam in, egestas dapibus ante. Morbi facilisis mi nec leo semper laoreet. Aenean ac dolor vel erat suscipit vulputate. Praesent sit amet eleifend libero, sit amet viverra lorem. Ut eleifend lectus non tempus placerat. Praesent magna ipsum, porta sit amet mattis vel, condimentum eleifend magna.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Maecenas velit tortor, faucibus vitae rhoncus eget, laoreet vel sem. Proin interdum ut risus a tempor. Aliquam malesuada, tellus et luctus iaculis, est est aliquet nisl, volutpat elementum augue nunc ut lorem. Nulla facilisis ipsum vestibulum, iaculis magna in, maximus libero. Suspendisse tortor odio, euismod nec leo placerat, mattis varius elit. Suspendisse a ipsum vehicula, viverra metus eget, scelerisque dui. Suspendisse potenti. Vivamus a sapien eget felis mollis imperdiet.</p>
<p>Sed accumsan eu dolor nec vestibulum. Aenean interdum porttitor mattis. Curabitur finibus, erat nec posuere luctus, elit nisi imperdiet neque, eget maximus nulla dolor at justo. In sem odio, feugiat quis condimentum id, sodales id felis. Nulla facilisi. Vestibulum odio ex, blandit vel ullamcorper ac, tincidunt et justo. Vestibulum congue congue vehicula. Praesent tempor tortor ut tellus vulputate hendrerit. Proin lectus ante, dapibus eu laoreet varius, dictum sit amet lacus.</p>
<p>Integer vel mollis justo, quis commodo diam. Morbi cursus mauris nibh. Proin vestibulum ornare turpis, in consequat tellus condimentum quis. Praesent nulla magna, commodo sit amet molestie a, sollicitudin laoreet elit. Fusce ut augue vitae ligula commodo mattis sit amet non augue. Nulla a lectus purus. Sed sed consequat magna, in tempus quam. Cras sed consectetur nulla, tempus luctus ligula. Proin porttitor porttitor nisl, quis pretium turpis imperdiet id. Fusce commodo nulla sem, vitae gravida nulla molestie eu. Donec accumsan ex eget faucibus luctus. Ut leo eros, accumsan id aliquam et, aliquet at tellus.</p>
<p>Proin fringilla congue metus, ac semper ex aliquam ullamcorper. Integer porttitor tempor leo ac elementum. Vivamus a nisi vitae tellus interdum rhoncus. Nam eleifend ipsum sit amet enim feugiat, vitae pulvinar elit dignissim. </p>
<p>Vivamus tempus felis enim, non fermentum erat venenatis a. Morbi dolor ante, iaculis in nulla sit amet, eleifend aliquam nisl. Phasellus ultrices turpis ut ipsum molestie, a euismod sem venenatis. Duis a leo ac quam gravida sagittis nec vitae dui. Proin pellentesque, nulla sed fringilla malesuada, dui erat dignissim ex, eget sollicitudin enim purus pellentesque risus. Aenean a porta lacus, nec ullamcorper tellus.</p>
<div class="flow-control"><!-- This is to make sure there are no page brake
between the header and next paragraph -->
<h2>Header test</h2>
<p>Curabitur eros metus, maximus ornare mollis suscipit, commodo sed erat. Suspendisse dolor lectus, suscipit auctor risus a, malesuada auctor magna. Cras erat augue, venenatis luctus erat ac, ultrices pretium tellus. Mauris faucibus convallis euismod. Mauris tincidunt sit amet metus quis mattis. Quisque luctus quam rutrum mollis mollis. Donec velit tortor, iaculis in mattis sed, consequat vitae ligula. Vestibulum tempus lacinia blandit. Integer eleifend lacus id lorem feugiat, at varius sapien accumsan. Nam fermentum hendrerit lorem, et euismod diam tincidunt sit amet. Donec vitae dolor in nunc eleifend tincidunt. Curabitur vel maximus purus. Donec varius lorem justo, a commodo dolor vehicula in. In condimentum risus sed placerat condimentum. Ut enim ex, pellentesque eget metus vel, gravida viverra arcu. Suspendisse interdum leo ac porta vestibulum.</p>
</div>
<p>Fusce ipsum justo, convallis et venenatis id, tincidunt non orci. Nam vestibulum molestie egestas. Vivamus ultricies ultrices fermentum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin sit amet dui porta, tempor nibh finibus, suscipit felis. Aenean rhoncus enim at imperdiet porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce tellus eros, euismod sit amet gravida sit amet, mattis ut tortor. Fusce nec lectus a massa iaculis tempor. Morbi tortor ante, facilisis eget diam suscipit, dignissim pulvinar nulla. Nunc ultrices eros sed facilisis mattis.</p>
<p>Vestibulum lobortis metus velit, id cursus justo viverra id. Sed euismod nisi nunc, id malesuada nulla porttitor ultricies. Quisque cursus ut nisl eu vehicula. Ut a convallis nulla. Maecenas vehicula dolor a dui mattis, non sollicitudin lorem malesuada. Sed faucibus vulputate turpis in fringilla. Donec feugiat dui at nulla iaculis rhoncus. Mauris venenatis congue maximus. Vivamus maximus volutpat dictum. Cras vehicula sodales ante ut viverra.</p>
<p>Vivamus at rutrum justo. Vestibulum vulputate scelerisque convallis. Etiam vulputate nunc tempor tortor varius lobortis. Suspendisse ut posuere augue. Proin nunc metus, fermentum at tincidunt in, gravida ut massa. Curabitur eu ex tristique, accumsan justo in, luctus dui. Praesent a dolor eu tellus gravida lobortis sed ut magna. Nunc feugiat elit ultricies, bibendum lacus nec, cursus elit. Proin facilisis mauris a dolor imperdiet, vel lacinia enim rutrum. Sed tristique ultricies magna ac lobortis. Integer nec varius sapien. Vestibulum convallis finibus enim, sed tincidunt lectus scelerisque quis.</p>
<p>Nam faucibus lorem et ultrices luctus. Aliquam id pharetra nisi. Curabitur malesuada elit eget nisi imperdiet fringilla. Quisque orci eros, pulvinar eget finibus ut, mollis vitae magna. Nulla molestie massa at convallis facilisis. Maecenas sagittis facilisis feugiat. Quisque rutrum, urna at consectetur pellentesque, mauris dolor faucibus nisl, vel tristique leo est vitae magna. Curabitur fermentum dignissim nisi tincidunt rhoncus.</p>
<p>Suspendisse pretium enim volutpat, fringilla urna tempor, dictum metus. Nunc vel purus vel arcu molestie hendrerit. Vestibulum sed mollis mauris. Fusce nisi velit, imperdiet sed porttitor at, elementum at mauris. Quisque at magna volutpat, rhoncus velit volutpat, aliquet dolor. Ut metus ante, commodo non risus sed, congue posuere metus. Mauris a sem metus. Duis accumsan mi non facilisis mollis. Maecenas et dolor eget felis rhoncus pretium. Aenean vitae arcu cursus, ultricies massa vel, congue leo. Proin suscipit nisi odio, malesuada interdum nisi aliquam at. Aliquam ac congue magna.</p>
</article>
</body>
Add these lines of code in your CSS, it will work :)
#pageborder2:after{
content: "";
width: 92%;
background: #FFF;
height: 10px;
position: fixed;
margin-left: 15px;
top: 10px;
border-radius: 10px;
}
#pageborder3:after{
content: "";
width: 92%;
background: #FFF;
height: 10px;
border-radius: 10px;
position: fixed;
bottom: 10px;
}
I'm trying to create a layout that looks like this:
The nav and content panes should have independent vertical scrollbars.
I managed to get most of it working. But the "nav" div is not showing the scrollbar, even if overflow is set to scroll.
How can I get the vertical scrollbar to show? If possible I'd like to get this done without the use of JS plugins
body {
height:95%;
width:95%
}
#header {
position: absolute;
top: 0px;
left: 0px;
height: 80px;
right: 0px;
overflow:hidden;
margin: 10px;
border-bottom: 1px solid black
}
#footer {
position: absolute;
bottom: 0px;
height: 80px;
left: 0px;
right: 0px;
overflow: hidden;
margin: 10px;
border-top: 1px solid black
}
#content {
position: absolute;
top: 90px;
bottom: 90px;
left: 160px;
right: 0px;
overflow-y: scroll;
}
#nav {
position: absolute;
top: 90px;
bottom: 90px;
left: 0px;
right: 0px;
overflow-y: scroll
}
<body>
<div id="header">
<p>HEADER</P>
</div>
<div id="nav" style="">
<ul>
<li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li>
</ul>
</div>
<div id="content" style="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in convallis turpis, pellentesque faucibus odio. Aliquam sem neque, posuere vitae suscipit ut, tincidunt congue arcu. Suspendisse blandit sodales enim, nec eleifend nisl cursus nec. Phasellus interdum ante nunc, in porta arcu bibendum id. In hac habitasse platea dictumst. Maecenas a congue nisi, a pellentesque mi. Mauris imperdiet orci vitae enim fringilla, at feugiat diam vehicula. Ut volutpat, leo vitae congue sagittis, justo mi fermentum lacus, et finibus arcu ligula at lacus. Nunc a scelerisque tortor, at congue ante. Ut vel nibh ultrices, tempus purus auctor, hendrerit dolor. Pellentesque tempus, lacus vitae hendrerit consectetur, nulla diam venenatis quam, porta gravida leo nulla eget justo.</p>
<p>Sed finibus iaculis sem, nec suscipit nunc. Suspendisse pellentesque est tellus, ut consequat magna dictum ut. Sed orci enim, ultrices bibendum justo vitae, tristique fringilla orci. Nullam semper arcu quam, ut facilisis massa semper ut. Donec dictum porttitor erat et molestie. Proin ac justo dapibus, luctus velit vestibulum, eleifend tellus. Morbi ac molestie est, ut pellentesque nibh. Nunc at venenatis velit. Nullam scelerisque laoreet magna volutpat pellentesque. Donec a tincidunt metus, a mollis neque. Etiam urna mauris, dapibus sed felis et, consequat ultrices ligula. Nullam vitae bibendum lacus, eu condimentum sapien. Nunc sollicitudin sit amet eros at cursus. Duis gravida eros turpis, eu venenatis nibh vulputate vel.</p>
<p>Nulla augue nisi, iaculis non massa at, varius lacinia nibh. Suspendisse congue arcu leo, a placerat nisl rhoncus eu. Quisque augue ipsum, accumsan a nulla et, sodales porttitor eros. Integer nec cursus tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam tempus magna urna, eget egestas purus hendrerit eu. Fusce in velit euismod, sodales libero feugiat, auctor mauris. In hac habitasse platea dictumst. Donec ornare commodo massa. Integer ut urna arcu. Cras maximus, mi in tristique auctor, lorem ipsum semper mauris, nec tincidunt nisl turpis et justo. Donec vitae purus aliquet ex porta vestibulum at nec magna. Pellentesque varius vehicula ante vitae dictum. Sed quis justo eget tellus commodo porta a in felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Integer vestibulum mollis magna, id tincidunt diam condimentum vel. Cras lacinia quam vel tincidunt dictum. Donec interdum nec magna vel pharetra. Suspendisse et tempor neque, et rutrum velit. Ut ligula lacus, commodo ut mollis quis, auctor faucibus magna. Morbi feugiat hendrerit libero id elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum pulvinar sapien ac finibus condimentum. Etiam rutrum auctor elementum. Sed hendrerit, neque eget vehicula dignissim, justo dolor blandit ipsum, eget gravida purus erat vitae nisi. Phasellus in tellus tincidunt, interdum diam id, dictum mauris.</p>
<p>Fusce mattis convallis suscipit. Nam aliquam risus tincidunt arcu aliquam efficitur. Nulla euismod sed ligula quis bibendum. Sed felis dolor, dignissim ac aliquam vitae, maximus eget augue. Proin eu ligula vitae nisi accumsan convallis eget eu erat. Vivamus laoreet arcu dignissim pulvinar dapibus. Vivamus laoreet lorem nec faucibus molestie. Phasellus sit amet bibendum ligula. Pellentesque at augue felis. Nulla luctus dapibus dui eu maximus. Proin sapien quam, scelerisque id egestas vel, efficitur id arcu. Vestibulum pellentesque lectus in rhoncus egestas. Ut a pellentesque arcu, vel ultrices augue. Praesent viverra urna laoreet sem lobortis dapibus. Aliquam mauris odio, maximus vel risus imperdiet, consequat accumsan odio.</p>
<p>Aenean gravida metus eu orci egestas, vitae venenatis ligula faucibus. Fusce eget eros vitae nibh porta pretium. Sed nulla quam, commodo id interdum nec, blandit sed ligula. Duis sed ante eleifend velit tempus porttitor vel sit amet diam. Donec tempus sollicitudin urna quis interdum. Nunc mattis in elit sed volutpat. Maecenas laoreet elit a metus fringilla molestie. Etiam vel rhoncus risus.</p>
<p>Fusce nec dignissim dolor. Aenean venenatis enim a condimentum venenatis. Duis viverra, risus quis auctor venenatis, velit dui mollis mauris, quis fermentum mauris leo eu nunc. Aenean ultrices justo ac metus pretium laoreet. Aliquam mattis nisi arcu, at pretium magna tempus id. Donec elementum turpis eget ligula semper faucibus. Cras erat felis, ornare vitae convallis eu, faucibus in erat. Aliquam porttitor rutrum massa, quis consectetur nulla aliquet eu. Duis ut diam eu nulla finibus vehicula eget ac augue. Ut urna ante, varius a metus ut, sollicitudin eleifend sapien. Morbi facilisis pretium sem. Suspendisse dapibus augue leo, nec dignissim lacus lacinia et.</p>
<p>Etiam laoreet in tortor a rhoncus. Pellentesque eget maximus lectus. Etiam tristique arcu a leo commodo rhoncus. Aliquam non sem a quam consectetur ultricies id non felis. Vestibulum commodo, risus in lacinia dictum, diam libero tincidunt magna, ac viverra elit velit eget orci. Nullam dolor risus, blandit eget nunc non, ultrices consequat tortor. Sed in odio tincidunt, mollis urna sit amet, condimentum enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla consectetur dignissim odio id imperdiet. Maecenas semper pellentesque dignissim. Cras urna tellus, auctor vel tincidunt non, eleifend in diam. In rhoncus nisi dolor. Donec sed posuere enim, nec dapibus orci. Nullam metus lectus, interdum eget mollis a, fringilla non quam. Fusce sollicitudin neque vitae commodo sodales. Suspendisse potenti.</p>
<p>Sed sed turpis sagittis, varius nunc quis, elementum nibh. Etiam eget scelerisque ex, sit amet hendrerit nulla. Nam eleifend pharetra ipsum, id pretium nibh imperdiet quis. In hac habitasse platea dictumst. Ut mattis, turpis sed auctor efficitur, metus eros scelerisque tortor, eget rhoncus erat urna ut tellus. Integer id nisi sapien. Phasellus non rutrum nunc, nec molestie nisl. Suspendisse quis enim blandit, efficitur urna pellentesque, vehicula nulla. Aenean rhoncus sem non elit tristique vestibulum eget ac erat. Nunc vestibulum odio libero. Donec sit amet iaculis lacus. Duis vel sodales enim. Sed et ultrices dolor, sit amet vehicula magna.</p>
<p>Pellentesque sem turpis, mollis vitae ligula a, venenatis tristique augue. In hac habitasse platea dictumst. Morbi et felis vel turpis efficitur fermentum eu in libero. Mauris bibendum ligula sapien, non eleifend nisl interdum ac. Duis pharetra lorem nibh, vitae aliquam neque bibendum a. Ut eu scelerisque erat, et dignissim metus. Vivamus egestas fermentum magna at commodo. In sodales velit in ante suscipit consequat. Vivamus porttitor nisl at lectus vestibulum, et porta dui volutpat. Phasellus sit amet dui quis diam auctor maximus et ac massa. Integer tempor eu mauris non facilisis. Donec et rhoncus ligula, vitae interdum purus. Nulla vel tellus ex.</p>
<p>Cras magna orci, imperdiet at euismod eu, ullamcorper id tortor. Vivamus eget elit elementum, porta mi quis, mollis sem. In ac risus id nunc eleifend tincidunt a commodo mi. In quis dictum purus. Quisque molestie aliquam ex, quis feugiat mi porta ut. Suspendisse feugiat condimentum quam, ac dapibus velit convallis sed. Donec sed enim cursus, tincidunt mauris nec, dictum dui. Nulla vel diam dictum, ultricies ligula eget, porta mauris. Nullam ante metus, sagittis at mauris eu, mattis blandit dolor. Vivamus bibendum auctor orci. Pellentesque pellentesque tincidunt dui ut rutrum.</p>
<p>Donec consequat lacus eget imperdiet euismod. Suspendisse in ligula nisi. Nulla facilisi. Nam lacus nulla, tempus sit amet cursus convallis, malesuada eu felis. Curabitur non urna justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tincidunt est ut urna accumsan auctor. Aliquam pretium rutrum diam, ut interdum libero. In eget tempus ligula. Etiam risus dui, sollicitudin id ipsum eget, iaculis tempus libero. Aenean commodo euismod felis eu faucibus. Nulla facilisis at metus sed malesuada. Duis gravida consequat accumsan. Cras mollis purus in nunc pharetra lacinia. Nunc varius nisl a enim egestas, in facilisis enim tincidunt.</p>
</div>
<div id="footer">
<p>FOOTER</P>
</div>
</body>
your #nav element is too wide. the scrollbar is getting hidden;
#nav {
width:160px;
}
Try setting width for both content and nav in percentage values.
#content {
position: absolute;
top: 90px;
bottom: 90px;
width: 80%;
right: 0px;
overflow-y: scroll;
}
#nav {
position: absolute;
top: 90px;
bottom: 90px;
left: 0px;
width: 20%;
overflow-y: scroll
}
body {
height:95%;
width:95%
}
#header {
position: absolute;
top: 0px;
left: 0px;
height: 80px;
right: 0px;
overflow:hidden;
margin: 10px;
border-bottom: 1px solid black
}
#footer {
position: absolute;
bottom: 0px;
height: 80px;
left: 0px;
right: 0px;
overflow: hidden;
margin: 10px;
border-top: 1px solid black
}
#content {
position: absolute;
top: 90px;
bottom: 90px;
width: 80%;
right: 0px;
overflow-y: scroll;
}
#nav {
position: absolute;
top: 90px;
bottom: 90px;
left: 0px;
width: 20%;
overflow-y: scroll
}
<body>
<div id="header">
<p>HEADER</P>
</div>
<div id="nav" style="">
<ul>
<li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li><li>Nav</li>
</ul>
</div>
<div id="content" style="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in convallis turpis, pellentesque faucibus odio. Aliquam sem neque, posuere vitae suscipit ut, tincidunt congue arcu. Suspendisse blandit sodales enim, nec eleifend nisl cursus nec. Phasellus interdum ante nunc, in porta arcu bibendum id. In hac habitasse platea dictumst. Maecenas a congue nisi, a pellentesque mi. Mauris imperdiet orci vitae enim fringilla, at feugiat diam vehicula. Ut volutpat, leo vitae congue sagittis, justo mi fermentum lacus, et finibus arcu ligula at lacus. Nunc a scelerisque tortor, at congue ante. Ut vel nibh ultrices, tempus purus auctor, hendrerit dolor. Pellentesque tempus, lacus vitae hendrerit consectetur, nulla diam venenatis quam, porta gravida leo nulla eget justo.</p>
<p>Sed finibus iaculis sem, nec suscipit nunc. Suspendisse pellentesque est tellus, ut consequat magna dictum ut. Sed orci enim, ultrices bibendum justo vitae, tristique fringilla orci. Nullam semper arcu quam, ut facilisis massa semper ut. Donec dictum porttitor erat et molestie. Proin ac justo dapibus, luctus velit vestibulum, eleifend tellus. Morbi ac molestie est, ut pellentesque nibh. Nunc at venenatis velit. Nullam scelerisque laoreet magna volutpat pellentesque. Donec a tincidunt metus, a mollis neque. Etiam urna mauris, dapibus sed felis et, consequat ultrices ligula. Nullam vitae bibendum lacus, eu condimentum sapien. Nunc sollicitudin sit amet eros at cursus. Duis gravida eros turpis, eu venenatis nibh vulputate vel.</p>
<p>Nulla augue nisi, iaculis non massa at, varius lacinia nibh. Suspendisse congue arcu leo, a placerat nisl rhoncus eu. Quisque augue ipsum, accumsan a nulla et, sodales porttitor eros. Integer nec cursus tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam tempus magna urna, eget egestas purus hendrerit eu. Fusce in velit euismod, sodales libero feugiat, auctor mauris. In hac habitasse platea dictumst. Donec ornare commodo massa. Integer ut urna arcu. Cras maximus, mi in tristique auctor, lorem ipsum semper mauris, nec tincidunt nisl turpis et justo. Donec vitae purus aliquet ex porta vestibulum at nec magna. Pellentesque varius vehicula ante vitae dictum. Sed quis justo eget tellus commodo porta a in felis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Integer vestibulum mollis magna, id tincidunt diam condimentum vel. Cras lacinia quam vel tincidunt dictum. Donec interdum nec magna vel pharetra. Suspendisse et tempor neque, et rutrum velit. Ut ligula lacus, commodo ut mollis quis, auctor faucibus magna. Morbi feugiat hendrerit libero id elementum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum pulvinar sapien ac finibus condimentum. Etiam rutrum auctor elementum. Sed hendrerit, neque eget vehicula dignissim, justo dolor blandit ipsum, eget gravida purus erat vitae nisi. Phasellus in tellus tincidunt, interdum diam id, dictum mauris.</p>
<p>Fusce mattis convallis suscipit. Nam aliquam risus tincidunt arcu aliquam efficitur. Nulla euismod sed ligula quis bibendum. Sed felis dolor, dignissim ac aliquam vitae, maximus eget augue. Proin eu ligula vitae nisi accumsan convallis eget eu erat. Vivamus laoreet arcu dignissim pulvinar dapibus. Vivamus laoreet lorem nec faucibus molestie. Phasellus sit amet bibendum ligula. Pellentesque at augue felis. Nulla luctus dapibus dui eu maximus. Proin sapien quam, scelerisque id egestas vel, efficitur id arcu. Vestibulum pellentesque lectus in rhoncus egestas. Ut a pellentesque arcu, vel ultrices augue. Praesent viverra urna laoreet sem lobortis dapibus. Aliquam mauris odio, maximus vel risus imperdiet, consequat accumsan odio.</p>
<p>Aenean gravida metus eu orci egestas, vitae venenatis ligula faucibus. Fusce eget eros vitae nibh porta pretium. Sed nulla quam, commodo id interdum nec, blandit sed ligula. Duis sed ante eleifend velit tempus porttitor vel sit amet diam. Donec tempus sollicitudin urna quis interdum. Nunc mattis in elit sed volutpat. Maecenas laoreet elit a metus fringilla molestie. Etiam vel rhoncus risus.</p>
<p>Fusce nec dignissim dolor. Aenean venenatis enim a condimentum venenatis. Duis viverra, risus quis auctor venenatis, velit dui mollis mauris, quis fermentum mauris leo eu nunc. Aenean ultrices justo ac metus pretium laoreet. Aliquam mattis nisi arcu, at pretium magna tempus id. Donec elementum turpis eget ligula semper faucibus. Cras erat felis, ornare vitae convallis eu, faucibus in erat. Aliquam porttitor rutrum massa, quis consectetur nulla aliquet eu. Duis ut diam eu nulla finibus vehicula eget ac augue. Ut urna ante, varius a metus ut, sollicitudin eleifend sapien. Morbi facilisis pretium sem. Suspendisse dapibus augue leo, nec dignissim lacus lacinia et.</p>
<p>Etiam laoreet in tortor a rhoncus. Pellentesque eget maximus lectus. Etiam tristique arcu a leo commodo rhoncus. Aliquam non sem a quam consectetur ultricies id non felis. Vestibulum commodo, risus in lacinia dictum, diam libero tincidunt magna, ac viverra elit velit eget orci. Nullam dolor risus, blandit eget nunc non, ultrices consequat tortor. Sed in odio tincidunt, mollis urna sit amet, condimentum enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla consectetur dignissim odio id imperdiet. Maecenas semper pellentesque dignissim. Cras urna tellus, auctor vel tincidunt non, eleifend in diam. In rhoncus nisi dolor. Donec sed posuere enim, nec dapibus orci. Nullam metus lectus, interdum eget mollis a, fringilla non quam. Fusce sollicitudin neque vitae commodo sodales. Suspendisse potenti.</p>
<p>Sed sed turpis sagittis, varius nunc quis, elementum nibh. Etiam eget scelerisque ex, sit amet hendrerit nulla. Nam eleifend pharetra ipsum, id pretium nibh imperdiet quis. In hac habitasse platea dictumst. Ut mattis, turpis sed auctor efficitur, metus eros scelerisque tortor, eget rhoncus erat urna ut tellus. Integer id nisi sapien. Phasellus non rutrum nunc, nec molestie nisl. Suspendisse quis enim blandit, efficitur urna pellentesque, vehicula nulla. Aenean rhoncus sem non elit tristique vestibulum eget ac erat. Nunc vestibulum odio libero. Donec sit amet iaculis lacus. Duis vel sodales enim. Sed et ultrices dolor, sit amet vehicula magna.</p>
<p>Pellentesque sem turpis, mollis vitae ligula a, venenatis tristique augue. In hac habitasse platea dictumst. Morbi et felis vel turpis efficitur fermentum eu in libero. Mauris bibendum ligula sapien, non eleifend nisl interdum ac. Duis pharetra lorem nibh, vitae aliquam neque bibendum a. Ut eu scelerisque erat, et dignissim metus. Vivamus egestas fermentum magna at commodo. In sodales velit in ante suscipit consequat. Vivamus porttitor nisl at lectus vestibulum, et porta dui volutpat. Phasellus sit amet dui quis diam auctor maximus et ac massa. Integer tempor eu mauris non facilisis. Donec et rhoncus ligula, vitae interdum purus. Nulla vel tellus ex.</p>
<p>Cras magna orci, imperdiet at euismod eu, ullamcorper id tortor. Vivamus eget elit elementum, porta mi quis, mollis sem. In ac risus id nunc eleifend tincidunt a commodo mi. In quis dictum purus. Quisque molestie aliquam ex, quis feugiat mi porta ut. Suspendisse feugiat condimentum quam, ac dapibus velit convallis sed. Donec sed enim cursus, tincidunt mauris nec, dictum dui. Nulla vel diam dictum, ultricies ligula eget, porta mauris. Nullam ante metus, sagittis at mauris eu, mattis blandit dolor. Vivamus bibendum auctor orci. Pellentesque pellentesque tincidunt dui ut rutrum.</p>
<p>Donec consequat lacus eget imperdiet euismod. Suspendisse in ligula nisi. Nulla facilisi. Nam lacus nulla, tempus sit amet cursus convallis, malesuada eu felis. Curabitur non urna justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec tincidunt est ut urna accumsan auctor. Aliquam pretium rutrum diam, ut interdum libero. In eget tempus ligula. Etiam risus dui, sollicitudin id ipsum eget, iaculis tempus libero. Aenean commodo euismod felis eu faucibus. Nulla facilisis at metus sed malesuada. Duis gravida consequat accumsan. Cras mollis purus in nunc pharetra lacinia. Nunc varius nisl a enim egestas, in facilisis enim tincidunt.</p>
</div>
<div id="footer">
<p>FOOTER</P>
</div>
</body>
I managed to fix this by wrapping both the nav and content panes in another div:
#content {
overflow-y: scroll;
height: 100%;
}
#nav {
overflow-y: scroll;
height: 100%;
width: 160px;
float: left;
}
#wrapper {
position: absolute;
top: 90px;
bottom: 90px;
left: 0px;
right: 0px;
}
<div id="wrapper">
<div id="nav">
...
</div>
<div id="content">
...
</div>
</div>
Usually the sticky footer is not an issue for me but today it's a bit frustrating. I've tried various resources on here as well as just searching and I cannot figure out what is wrong with my footer. If anyone can help me figure this out that would be very much appreciated! Thank you!
html {
height: 100%;
}
body {
background: url('footer_lodyas.png') fixed;
font-family: 'Sahitya', serif;
max-width: 100%;
margin: 0 auto 0 auto;
overflow-x: hidden;
height: 100%;
}
.all {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
#footer_links {
position: relative;
width: 100%;
text-align: center;
background: #1FA0A3;
font-size: 16px;
font-size: 1.6rem;
border-top: none;
padding: 20px;
}
<body>
<div class="all">
<div class="wrapall">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed tortor vitae est tincidunt dignissim eu id neque. Vivamus blandit, ex et maximus ullamcorper, ligula diam cursus risus, a fringilla elit odio et dolor. Etiam vestibulum lorem ut tellus
venenatis, eget ornare libero dapibus. Vestibulum ut eros in elit finibus elementum. Fusce egestas ornare massa. Proin ut egestas metus. Sed mollis pulvinar ipsum. Nullam et quam nunc. Aenean porttitor nulla eros, non sagittis magna convallis
id. Sed sollicitudin dui ac semper euismod. Curabitur volutpat mollis ante sit amet suscipit. Etiam eget massa pharetra, interdum turpis non, rhoncus augue. Morbi malesuada rutrum porta. Integer semper condimentum tellus ac accumsan. Integer scelerisque,
diam et placerat gravida, justo erat maximus urna, sed tristique metus risus sed eros. Donec quis tempus tellus. Donec malesuada lectus eu libero ultrices, at placerat nulla mattis. Sed sollicitudin est nec egestas placerat. Donec non enim nec
tortor tincidunt feugiat. Suspendisse id elit est. In at tincidunt ipsum, eu rutrum enim. Nulla facilisi. Suspendisse malesuada, odio et dapibus euismod, nunc mi finibus lorem, quis ornare dui turpis convallis sem. Cras luctus facilisis sapien
suscipit ullamcorper. Nullam massa metus, tempor non dui sed, efficitur aliquet nunc. Donec ullamcorper sagittis nulla et tempus. Phasellus sollicitudin mollis interdum. Fusce eu massa sapien. Vivamus id turpis sed dolor porttitor molestie. Curabitur
luctus ex porta ligula lobortis, non aliquet purus egestas. Aenean nibh tortor, auctor sed libero sed, auctor semper purus. Nullam porttitor vulputate orci ut euismod. Ut accumsan nisl ut nulla suscipit iaculis. Vestibulum tristique magna ac lobortis
pharetra. Pellentesque hendrerit eros nec nisi rutrum porta. Sed dolor orci, ornare sit amet viverra tempor, ultricies at mi. Praesent congue dapibus massa, eget tempor nisl porta quis. Integer dignissim iaculis eros eu aliquam. Cras luctus, velit
et pulvinar volutpat, urna ligula lacinia sem, malesuada pretium lorem lorem interdum enim. Quisque volutpat, diam non pharetra volutpat, odio leo iaculis odio, nec mollis leo enim in nisl. Proin eleifend ac lacus sed venenatis. Vivamus pulvinar
commodo tellus a maximus. Phasellus ut magna odio. Nunc ac lectus ac est tincidunt ornare non at turpis. Sed sagittis neque at rhoncus rutrum. Donec volutpat erat vitae turpis mattis maximus. Cras finibus, massa nec tincidunt suscipit, enim nulla
vehicula augue, ut lobortis dolor lacus quis diam. Suspendisse in congue nisl, vitae semper diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec varius felis eget leo egestas, ut vehicula ex dignissim.
Nam aliquet quis neque et venenatis. Praesent aliquam nisl vulputate, semper lacus ac, tristique sapien. Praesent vel lacinia libero. Morbi leo metus, dictum id ante in, fringilla consectetur elit. Donec eleifend nibh et elit pretium, non hendrerit
arcu accumsan. Proin vehicula felis a augue convallis, quis rhoncus lacus molestie. Quisque a suscipit purus. Aliquam et tellus vel libero imperdiet mattis at sit amet magna. Morbi porta a eros ut cursus. Vivamus ornare dolor nec lectus malesuada
vestibulum. Sed fermentum ligula vel turpis fermentum posuere. Duis cursus interdum nulla in pharetra. Sed at sodales eros, vel semper dolor. Vestibulum sit amet dui erat. Aliquam non vehicula ante. Etiam dapibus felis ut maximus rhoncus.
</p>
<div id="footer_links"></div>
</div>
</div>
</body>
Try putting your footer div outside .all and .wrapall. Like this: https://jsfiddle.net/fb3uno9s/
html {
height:100%;
}
body{
background: url('footer_lodyas.png') fixed ;
font-family: 'Sahitya', serif;
max-width:100%;
margin: 0 auto 0 auto;
overflow-x: hidden;
height: 100%;
}
.all{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
#footer_links {
position: relative;
width: 100%;
text-align: center;
background: #1FA0A3;
font-size: 16px;
font-size: 1.6rem;
border-top: none;
padding:20px;
}
<div class="all">
<div class="wrapall">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed tortor vitae est tincidunt dignissim eu id neque. Vivamus blandit, ex et maximus ullamcorper, ligula diam cursus risus, a fringilla elit odio et dolor. Etiam vestibulum lorem ut tellus venenatis, eget ornare libero dapibus. Vestibulum ut eros in elit finibus elementum. Fusce egestas ornare massa. Proin ut egestas metus. Sed mollis pulvinar ipsum. Nullam et quam nunc. Aenean porttitor nulla eros, non sagittis magna convallis id. Sed sollicitudin dui ac semper euismod. Curabitur volutpat mollis ante sit amet suscipit. Etiam eget massa pharetra, interdum turpis non, rhoncus augue. Morbi malesuada rutrum porta.
Integer semper condimentum tellus ac accumsan. Integer scelerisque, diam et placerat gravida, justo erat maximus urna, sed tristique metus risus sed eros. Donec quis tempus tellus. Donec malesuada lectus eu libero ultrices, at placerat nulla mattis. Sed sollicitudin est nec egestas placerat. Donec non enim nec tortor tincidunt feugiat. Suspendisse id elit est. In at tincidunt ipsum, eu rutrum enim. Nulla facilisi. Suspendisse malesuada, odio et dapibus euismod, nunc mi finibus lorem, quis ornare dui turpis convallis sem. Cras luctus facilisis sapien suscipit ullamcorper. Nullam massa metus, tempor non dui sed, efficitur aliquet nunc. Donec ullamcorper sagittis nulla et tempus.
Phasellus sollicitudin mollis interdum. Fusce eu massa sapien. Vivamus id turpis sed dolor porttitor molestie. Curabitur luctus ex porta ligula lobortis, non aliquet purus egestas. Aenean nibh tortor, auctor sed libero sed, auctor semper purus. Nullam porttitor vulputate orci ut euismod. Ut accumsan nisl ut nulla suscipit iaculis.
Vestibulum tristique magna ac lobortis pharetra. Pellentesque hendrerit eros nec nisi rutrum porta. Sed dolor orci, ornare sit amet viverra tempor, ultricies at mi. Praesent congue dapibus massa, eget tempor nisl porta quis. Integer dignissim iaculis eros eu aliquam. Cras luctus, velit et pulvinar volutpat, urna ligula lacinia sem, malesuada pretium lorem lorem interdum enim. Quisque volutpat, diam non pharetra volutpat, odio leo iaculis odio, nec mollis leo enim in nisl.
Proin eleifend ac lacus sed venenatis. Vivamus pulvinar commodo tellus a maximus. Phasellus ut magna odio. Nunc ac lectus ac est tincidunt ornare non at turpis. Sed sagittis neque at rhoncus rutrum. Donec volutpat erat vitae turpis mattis maximus. Cras finibus, massa nec tincidunt suscipit, enim nulla vehicula augue, ut lobortis dolor lacus quis diam. Suspendisse in congue nisl, vitae semper diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec varius felis eget leo egestas, ut vehicula ex dignissim.
Nam aliquet quis neque et venenatis. Praesent aliquam nisl vulputate, semper lacus ac, tristique sapien. Praesent vel lacinia libero. Morbi leo metus, dictum id ante in, fringilla consectetur elit. Donec eleifend nibh et elit pretium, non hendrerit arcu accumsan. Proin vehicula felis a augue convallis, quis rhoncus lacus molestie. Quisque a suscipit purus. Aliquam et tellus vel libero imperdiet mattis at sit amet magna. Morbi porta a eros ut cursus. Vivamus ornare dolor nec lectus malesuada vestibulum. Sed fermentum ligula vel turpis fermentum posuere. Duis cursus interdum nulla in pharetra. Sed at sodales eros, vel semper dolor. Vestibulum sit amet dui erat. Aliquam non vehicula ante. Etiam dapibus felis ut maximus rhoncus.
</p>
</div>
</div>
<div id="footer_links"></div>
You can use display: flex; to achieve sticky footer. I can't see any efforts for getting sticky footer in your code.
.wrapall {
display: flex;
flex-direction: column;
height: 100%;
}
.wrapall p {
flex: 1;
}
html {
height: 100%;
}
body {
background: url('footer_lodyas.png') fixed;
font-family: 'Sahitya', serif;
max-width: 100%;
margin: 0 auto 0 auto;
overflow-x: hidden;
height: 100%;
}
.all {
min-height: 100%;
height: 100%;
margin: 0 auto;
}
.wrapall {
display: flex;
flex-direction: column;
height: 100%;
}
.wrapall p {
flex: 1;
}
#footer_links {
position: relative;
width: 100%;
text-align: center;
background: #1FA0A3;
font-size: 16px;
font-size: 1.6rem;
border-top: none;
padding: 20px;
}
<body>
<div class="all">
<div class="wrapall">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed tortor vitae est tincidunt dignissim eu id neque. Vivamus blandit, ex et maximus ullamcorper, ligula diam cursus risus, a fringilla elit odio et dolor. Etiam vestibulum lorem ut tellus
venenatis, eget ornare libero dapibus. Vestibulum ut eros in elit finibus elementum. Fusce egestas ornare massa. Proin ut egestas metus. Sed mollis pulvinar ipsum. Nullam et quam nunc. Aenean porttitor nulla eros, non sagittis magna convallis
id. Sed sollicitudin dui ac semper euismod. Curabitur volutpat mollis ante sit amet suscipit. Etiam eget massa pharetra, interdum turpis non, rhoncus augue. Morbi malesuada rutrum porta. Integer semper condimentum tellus ac accumsan. Integer scelerisque,
diam et placerat gravida, justo erat maximus urna, sed tristique metus risus sed eros. Donec quis tempus tellus. Donec malesuada lectus eu libero ultrices, at placerat nulla mattis. Sed sollicitudin est nec egestas placerat. Donec non enim nec
tortor tincidunt feugiat. Suspendisse id elit est. In at tincidunt ipsum, eu rutrum enim. Nulla facilisi. Suspendisse malesuada, odio et dapibus euismod, nunc mi finibus lorem, quis ornare dui turpis convallis sem. Cras luctus facilisis sapien
suscipit ullamcorper. Nullam massa metus, tempor non dui sed, efficitur aliquet nunc. Donec ullamcorper sagittis nulla et tempus. Phasellus sollicitudin mollis interdum. Fusce eu massa sapien. Vivamus id turpis sed dolor porttitor molestie. Curabitur
luctus ex porta ligula lobortis, non aliquet purus egestas. Aenean nibh tortor, auctor sed libero sed, auctor semper purus. Nullam porttitor vulputate orci ut euismod. Ut accumsan nisl ut nulla suscipit iaculis. Vestibulum tristique magna ac lobortis
pharetra. Pellentesque hendrerit eros nec nisi rutrum porta. Sed dolor orci, ornare sit amet viverra tempor, ultricies at mi. Praesent congue dapibus massa, eget tempor nisl porta quis. Integer dignissim iaculis eros eu aliquam. Cras luctus, velit
et pulvinar volutpat, urna ligula lacinia sem, malesuada pretium lorem lorem interdum enim. Quisque volutpat, diam non pharetra volutpat, odio leo iaculis odio, nec mollis leo enim in nisl. Proin eleifend ac lacus sed venenatis. Vivamus pulvinar
commodo tellus a maximus. Phasellus ut magna odio. Nunc ac lectus ac est tincidunt ornare non at turpis. Sed sagittis neque at rhoncus rutrum. Donec volutpat erat vitae turpis mattis maximus. Cras finibus, massa nec tincidunt suscipit, enim nulla
vehicula augue, ut lobortis dolor lacus quis diam. Suspendisse in congue nisl, vitae semper diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec varius felis eget leo egestas, ut vehicula ex dignissim.
Nam aliquet quis neque et venenatis. Praesent aliquam nisl vulputate, semper lacus ac, tristique sapien. Praesent vel lacinia libero. Morbi leo metus, dictum id ante in, fringilla consectetur elit. Donec eleifend nibh et elit pretium, non hendrerit
arcu accumsan. Proin vehicula felis a augue convallis, quis rhoncus lacus molestie. Quisque a suscipit purus. Aliquam et tellus vel libero imperdiet mattis at sit amet magna. Morbi porta a eros ut cursus. Vivamus ornare dolor nec lectus malesuada
vestibulum. Sed fermentum ligula vel turpis fermentum posuere. Duis cursus interdum nulla in pharetra. Sed at sodales eros, vel semper dolor. Vestibulum sit amet dui erat. Aliquam non vehicula ante. Etiam dapibus felis ut maximus rhoncus.
</p>
<div id="footer_links">
</div>
</div>
</div>
</body>
Try this: use vh - viewport height
.wrapall {
height: 100vh;
position: relative;
}
#footer_links {
background: #1fa0a3 none repeat scroll 0 0;
border-top: medium none;
bottom: 0;
font-size: 1.6rem;
padding: 20px;
position: absolute;
text-align: center;
width: 100%;
}
This question already has an answer here:
Heights rendering differently in Chrome and Firefox [duplicate]
(1 answer)
Closed 6 years ago.
I am trying to create a page that has an optional banner at the top, and a scrollable master view, with a detail.
Here is a plunk:
https://plnkr.co/edit/RxVw5RJVhQInhXV0AtWn?p=preview
This works great in Chrome and Safari. However in Firefox the banner is scrollable, and you have to scroll the banner off the screen to see the remaining content in the master view.
I could use fixed heights and offsets to get this to work, but I don't want to do that as my banner is optional and may not be present in some situations.
Is this a bug in firefox w/ flexbox? Something I am doing wrong? Thanks in advance for any help.
body {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
html {
height: 100%;
}
.container {
display: flex;
flex-direction: row;
height: 100%;
}
.banner {
flex: 1 1 auto;
background-color: #555;
color: #fff;
padding: 10px 0px;
}
.detail {
flex: 4 1 auto;
position: relative;
order: 2;
background-color: blue;
}
.master {
order: 1;
display: flex;
flex-direction: column;
width: 200px;
flex:1 1 auto;
background-color: yellow;
}
.master-items {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
<div class="banner">
<div class="banner-text">
Optional banner at the top of my page
</div>
</div>
<div class="container">
<div class="master">
<div class="master-items">
orem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis nulla quis dapibus tincidunt. Praesent porta lectus in blandit fermentum. Curabitur tristique diam eu augue ultricies accumsan. Vestibulum hendrerit velit mauris, quis tincidunt ligula faucibus at. Nunc auctor lacus ante, a semper lorem blandit non. Proin tortor nunc, ultrices sit amet faucibus a, tristique vitae nunc. Vestibulum vitae dignissim tortor. Nullam hendrerit odio non neque rutrum, vitae egestas purus imperdiet. Morbi fermentum velit et elit commodo ultricies.
Integer ornare orci diam, vitae scelerisque erat feugiat sit amet. Etiam ut rhoncus diam. Ut ornare id ipsum quis gravida. Duis dignissim, dolor et laoreet bibendum, tellus odio aliquet erat, et molestie purus dolor vel diam. Aliquam erat volutpat. Sed bibendum et augue non pulvinar. Donec a tellus sed massa facilisis varius eu id neque. In tincidunt, arcu quis laoreet vulputate, lectus enim elementum velit, malesuada tempus justo neque sed justo. Fusce pulvinar, massa scelerisque hendrerit pharetra, nisi enim interdum sapien, id tempus dui libero ut arcu. Integer est magna, luctus a fermentum sit amet, facilisis at ante. Vestibulum ultricies urna ipsum, eu malesuada urna porta vitae. Mauris tincidunt molestie posuere. Nullam dictum urna maximus lobortis varius. Curabitur ut lorem at augue viverra tincidunt at at massa. Morbi venenatis dolor id nisi imperdiet, eu mollis ante aliquet.
Donec luctus ex vitae euismod egestas. In hac habitasse platea dictumst. Nullam non ligula tempor, dignissim ante sed, volutpat quam. Donec enim erat, interdum vitae efficitur vitae, vulputate eget libero. Phasellus ut lobortis nunc, a mollis dolor. Quisque a quam ligula. Sed eu gravida mi, interdum ullamcorper nulla. Ut eu lectus in enim dignissim ornare. Ut sit amet elit a magna pharetra laoreet eget id nibh. Ut rhoncus, urna fringilla porttitor euismod, urna dui viverra leo, at laoreet ipsum ipsum id risus. Aliquam in tellus sed lorem egestas posuere. Praesent iaculis commodo tortor ac euismod. Integer cursus dui vitae interdum vehicula.
Nam malesuada orci purus, vel placerat urna maximus ac. Fusce malesuada dolor nec arcu aliquet convallis. In lobortis at dolor id bibendum. Mauris semper, sem eu pretium ultricies, massa quam tempor dui, id consequat tellus arcu id nibh. Morbi ligula turpis, rutrum pulvinar finibus non, bibendum eu felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum justo arcu, gravida et turpis a, elementum mollis orci. Maecenas sagittis luctus massa at semper. Cras interdum efficitur nibh ac maximus. Pellentesque porta lacus eu lectus laoreet, quis luctus velit sagittis. Etiam condimentum sapien id metus efficitur gravida. Curabitur fermentum non justo a varius.
Ut nisi nisi, convallis in pellentesque feugiat, finibus a nisi. Proin ac lorem nec libero interdum auctor ut eu ex. Quisque felis neque, molestie id bibendum cursus, sollicitudin nec orci. Phasellus aliquet auctor massa, ut euismod tellus tincidunt vestibulum. Suspendisse pellentesque mattis sagittis. In hac habitasse platea dictumst. Proin faucibus posuere neque ullamcorper ultricies. Cras iaculis diam non mauris varius blandit. Praesent erat quam, tempor ac vehicula nec, feugiat a risus. Praesent viverra ornare faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Nunc nec arcu ultrices, porta urna non, lacinia lacus. Nam efficitur sem non odio rhoncus consectetur. Praesent non molestie ligula. Sed luctus sodales diam, vel hendrerit ipsum tristique sed. Morbi eu vehicula urna, et gravida diam. Maecenas in iaculis ante, eget faucibus arcu. Etiam vehicula lectus elit, eu tempus erat semper eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vestibulum eleifend sapien nec consectetur. Nunc ut mauris accumsan diam fermentum vulputate quis et nibh.
Duis porttitor nisl a lacus scelerisque, quis rutrum libero porttitor. Nunc blandit finibus ante eget pellentesque. Sed tempor leo ut mi sodales aliquam. Nunc sagittis nibh tincidunt velit mattis blandit. Mauris viverra mi massa, non pellentesque libero rutrum nec. Morbi malesuada nisi lectus, at placerat dui convallis ac. Donec risus nisi, rhoncus ac venenatis sed, finibus sed nibh.
Praesent molestie molestie arcu. Pellentesque sit amet augue tristique, pharetra nisi nec, tempor elit. Vestibulum a dictum eros. Integer eros neque, eleifend vitae tortor a, volutpat vestibulum leo. Proin tempor nisi et metus malesuada, non condimentum orci tincidunt. Quisque accumsan metus vitae sollicitudin efficitur. Duis vulputate volutpat dolor eu sollicitudin. Vivamus eu nisl bibendum, lobortis purus quis, sollicitudin quam. Nulla id odio luctus, varius ex ullamcorper, pulvinar lacus. Nunc sollicitudin cursus purus, eget consequat lorem maximus sed. Phasellus gravida, sem vel bibendum lacinia, felis nibh faucibus lectus, eu pretium lorem elit in augue. In a massa magna. Nunc bibendum ultrices arcu in bibendum. Sed elit lectus, pulvinar sed euismod et, tincidunt ut justo.
Praesent viverra bibendum ipsum ac dapibus. Pellentesque malesuada interdum ex eu sagittis. Vestibulum pellentesque urna vitae justo tincidunt, non mattis purus maximus. In nec purus ac velit tempus tristique ac non nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ac auctor lacus. Etiam vel pellentesque nunc. Nam odio orci, elementum sit amet metus eu, sodales laoreet erat. Integer nec quam ac ipsum mattis aliquam ut id nulla. Vestibulum eu erat hendrerit, iaculis est ac, ultricies mi. Nunc imperdiet non risus vitae fringilla. Vestibulum suscipit nec mauris bibendum viverra. Curabitur libero nibh, vulputate a aliquet sed, ultricies in nunc. Integer ut mollis dui. Ut ipsum lorem, luctus vitae dictum interdum, pretium vel nisl.
</div>
</div>
<div class="detail">
</div>
</div>
Don't flex the nav, just let it be sized by its contents:
.banner {
flex: auto;
}
Make the container fill the remaining space left by the banner (or all available space if there is no banner):
.container {
flex: 1;
overflow: auto;
}
body {
margin: 0;
height: 100%;
display: flex;
flex-direction: column;
}
html {
height: 100%;
}
.container {
display: flex;
flex-direction: row;
flex: 1;
overflow: auto;
}
.banner {
background-color: #555;
color: #fff;
padding: 10px 0px;
}
.detail {
flex: 4 1 auto;
position: relative;
order: 2;
background-color: blue;
}
.master {
order: 1;
display: flex;
flex-direction: column;
width: 200px;
flex: 1 1 auto;
background-color: yellow;
}
.master-items {
flex: 1 1 auto;
overflow-y: auto;
min-height: 0;
}
<div class="banner">
<div class="banner-text">
Optional banner at the top of my page
</div>
</div>
<div class="container">
<div class="master">
<div class="master-items">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sagittis nulla quis dapibus tincidunt. Praesent porta lectus in blandit fermentum. Curabitur tristique diam eu augue ultricies accumsan. Vestibulum hendrerit velit mauris, quis tincidunt ligula faucibus at. Nunc auctor lacus ante, a semper lorem blandit non. Proin tortor nunc, ultrices sit amet faucibus a, tristique vitae nunc. Vestibulum vitae dignissim tortor. Nullam hendrerit odio non neque rutrum, vitae egestas purus imperdiet. Morbi fermentum velit et elit commodo ultricies. Integer ornare orci diam, vitae scelerisque erat feugiat sit amet. Etiam ut rhoncus diam. Ut ornare id ipsum quis gravida. Duis dignissim, dolor et laoreet bibendum, tellus odio aliquet erat, et molestie purus dolor vel diam. Aliquam erat volutpat. Sed bibendum et augue non pulvinar. Donec a tellus sed massa facilisis varius eu id neque. In tincidunt, arcu quis laoreet vulputate, lectus enim elementum velit, malesuada tempus justo neque sed justo. Fusce pulvinar, massa scelerisque hendrerit pharetra, nisi enim interdum sapien, id tempus dui libero ut arcu. Integer est magna, luctus a fermentum sit amet, facilisis at ante. Vestibulum ultricies urna ipsum, eu malesuada urna porta vitae. Mauris tincidunt molestie posuere. Nullam dictum urna maximus lobortis varius. Curabitur ut lorem at augue viverra tincidunt at at massa. Morbi venenatis dolor id nisi imperdiet, eu mollis ante aliquet. Donec luctus ex vitae euismod egestas. In hac habitasse platea dictumst. Nullam non ligula tempor, dignissim ante sed, volutpat quam. Donec enim erat, interdum vitae efficitur vitae, vulputate eget libero. Phasellus ut lobortis nunc, a mollis dolor. Quisque a quam ligula. Sed eu gravida mi, interdum ullamcorper nulla. Ut eu lectus in enim dignissim ornare. Ut sit amet elit a magna pharetra laoreet eget id nibh. Ut rhoncus, urna fringilla porttitor euismod, urna dui viverra leo, at laoreet ipsum ipsum id risus. Aliquam in tellus sed lorem egestas posuere. Praesent iaculis commodo tortor ac euismod. Integer cursus dui vitae interdum vehicula. Nam malesuada orci purus, vel placerat urna maximus ac. Fusce malesuada dolor nec arcu aliquet convallis. In lobortis at dolor id bibendum. Mauris semper, sem eu pretium ultricies, massa quam tempor dui, id consequat tellus arcu id nibh. Morbi ligula turpis, rutrum pulvinar finibus non, bibendum eu felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum justo arcu, gravida et turpis a, elementum mollis orci. Maecenas sagittis luctus massa at semper. Cras interdum efficitur nibh ac maximus. Pellentesque porta lacus eu lectus laoreet, quis luctus velit sagittis. Etiam condimentum sapien id metus efficitur gravida. Curabitur fermentum non justo a varius. Ut nisi nisi, convallis in pellentesque feugiat, finibus a nisi. Proin ac lorem nec libero interdum auctor ut eu ex. Quisque felis neque, molestie id bibendum cursus, sollicitudin nec orci. Phasellus aliquet auctor massa, ut euismod tellus tincidunt vestibulum. Suspendisse pellentesque mattis sagittis. In hac habitasse platea dictumst. Proin faucibus posuere neque ullamcorper ultricies. Cras iaculis diam non mauris varius blandit. Praesent erat quam, tempor ac vehicula nec, feugiat a risus. Praesent viverra ornare faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc nec arcu ultrices, porta urna non, lacinia lacus. Nam efficitur sem non odio rhoncus consectetur. Praesent non molestie ligula. Sed luctus sodales diam, vel hendrerit ipsum tristique sed. Morbi eu vehicula urna, et gravida diam. Maecenas in iaculis ante, eget faucibus arcu. Etiam vehicula lectus elit, eu tempus erat semper eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent vestibulum eleifend sapien nec consectetur. Nunc ut mauris accumsan diam fermentum vulputate quis et nibh. Duis porttitor nisl a lacus scelerisque, quis rutrum libero porttitor. Nunc blandit finibus ante eget pellentesque. Sed tempor leo ut mi sodales aliquam. Nunc sagittis nibh tincidunt velit mattis blandit. Mauris viverra mi massa, non pellentesque libero rutrum nec. Morbi malesuada nisi lectus, at placerat dui convallis ac. Donec risus nisi, rhoncus ac venenatis sed, finibus sed nibh. Praesent molestie molestie arcu. Pellentesque sit amet augue tristique, pharetra nisi nec, tempor elit. Vestibulum a dictum eros. Integer eros neque, eleifend vitae tortor a, volutpat vestibulum leo. Proin tempor nisi et metus malesuada, non condimentum orci tincidunt. Quisque accumsan metus vitae sollicitudin efficitur. Duis vulputate volutpat dolor eu sollicitudin. Vivamus eu nisl bibendum, lobortis purus quis, sollicitudin quam. Nulla id odio luctus, varius ex ullamcorper, pulvinar lacus. Nunc sollicitudin cursus purus, eget consequat lorem maximus sed. Phasellus gravida, sem vel bibendum lacinia, felis nibh faucibus lectus, eu pretium lorem elit in augue. In a massa magna. Nunc bibendum ultrices arcu in bibendum. Sed elit lectus, pulvinar sed euismod et, tincidunt ut justo. Praesent viverra bibendum ipsum ac dapibus. Pellentesque malesuada interdum ex eu sagittis. Vestibulum pellentesque urna vitae justo tincidunt, non mattis purus maximus. In nec purus ac velit tempus tristique ac non nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur ac auctor lacus. Etiam vel pellentesque nunc. Nam odio orci, elementum sit amet metus eu, sodales laoreet erat. Integer nec quam ac ipsum mattis aliquam ut id nulla. Vestibulum eu erat hendrerit, iaculis est ac, ultricies mi. Nunc imperdiet non risus vitae fringilla. Vestibulum suscipit nec mauris bibendum viverra. Curabitur libero nibh, vulputate a aliquet sed, ultricies in nunc. Integer ut mollis dui. Ut ipsum lorem, luctus vitae dictum interdum, pretium vel nisl.
</div>
</div>
<div class="detail"></div>
</div>