Related
I am working on styling for a print page. What I would like to do is have a footer on every printed page, with a specified height. I am achieving this by using position:fixed; unfortunately this causes the footer to cover some of the page content. I have tried adding bottom margin/padding for #page but when I use margin, it pushes the footer up and when I use padding it doesn't seem to have any effect.
.container {
font-size:45px;
}
.print-footer {
display:none;
height:60px;
background:#fff;
width:100%;
position:fixed;
bottom:0;
}
#page {
size:8.5in 11in;
margin:0;
/*margin:0 0 60px 0;*/ /* this pushes the print-footer element up */
padding-bottom:60px; /* this doesn't seem to have an effet */
orphans:5;
widows:5;
}
#media print {
.print-footer {
display:block;
}
}
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis convallis risus vel egestas. Pellentesque augue felis, molestie ac mollis id, aliquam id mi. Mauris bibendum enim elit, eget porttitor dolor pretium vel. Phasellus lorem sapien, sollicitudin a pellentesque vitae, venenatis eu metus. Aliquam porttitor molestie vehicula. In maximus massa tellus, ut pulvinar velit viverra et. Pellentesque ornare lobortis efficitur. Quisque viverra tellus libero. Morbi ullamcorper neque est. Suspendisse consectetur metus consectetur dolor volutpat commodo. Vestibulum tempus nisl eu congue imperdiet. Suspendisse id sapien vitae nibh sodales tristique. Nam porttitor arcu non nisl aliquet, sit amet vulputate diam vehicula. Sed quis arcu vel dolor egestas volutpat laoreet sagittis urna.</p>
<p>Suspendisse quis mi nec diam faucibus feugiat et sed ipsum. Fusce tempus arcu vitae felis tempor porta. Quisque at purus sed lorem lacinia aliquet sed interdum est. Proin a lacus a neque tincidunt auctor. Maecenas interdum tempus lorem nec viverra. Integer sollicitudin diam vel risus feugiat, ac sagittis nisi ullamcorper. Aliquam non fermentum ex. Aliquam suscipit odio dolor, aliquet commodo est rhoncus a. Duis vestibulum lacinia dolor non fermentum. Morbi pulvinar in orci quis mollis.</p>
<p>Maecenas vitae risus diam. Morbi sed arcu bibendum, tempus mi vel, elementum mauris. Mauris ut vestibulum magna. Fusce ultrices erat quis rutrum consequat. Quisque lobortis orci at placerat efficitur. Pellentesque sollicitudin tellus a felis rhoncus porttitor. Maecenas tempor massa vitae dolor tempus ultrices.</p>
<p>Sed euismod facilisis auctor. Phasellus non ligula convallis, ullamcorper purus in, lobortis dolor. Sed quis pulvinar arcu. Nunc eget ultricies tortor. Quisque tincidunt sapien at leo venenatis, et dictum eros condimentum. Praesent in arcu tortor. Integer non nulla id risus rutrum molestie. Sed quam dolor, mollis non consequat vel, elementum a sem. Pellentesque consequat pulvinar tempus. Morbi vel turpis semper, lacinia orci sodales, auctor erat.</p>
<p>Praesent non mauris risus. Nullam vel urna eleifend mi sollicitudin facilisis ut vel sapien. Cras cursus, massa sed feugiat consequat, orci ex feugiat elit, vitae rutrum neque dolor a nibh. Aenean pellentesque tempor nunc in viverra. Curabitur fermentum, ante ut iaculis semper, libero elit vehicula orci, non elementum elit eros nec diam. Nullam vel sodales purus. Donec non ex accumsan, consequat orci ut, ultrices massa. Etiam sagittis porta maximus. Aenean egestas nisl eu ultricies tempor. Pellentesque id dictum elit. Fusce euismod mi non tortor lacinia dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="print-footer">Print page footer content goes here </div>
As you can see in the result form the code above, the footer is cutting off content:
I'm trying to get this layout to work so that the content in the middle section gets clipped when it reaches the top (header) panel.
I do NOT want to fill the top panel with a background colour (to hide the content), because I want to place a background image on the page. I need scroll bars for the entire page, not just the content div because that makes it look like an iframe (ugly).
The code is the one below. If you scroll the page, the text goes into the top panel. I want it to get clipped/masked when it hits the top panel.
/* Reset body padding and margins */
body {
margin: 0;
padding: 0;
}
/* Make Header Sticky */
#header_container {
border: 1px solid #666;
height: 60px;
left: 0;
position: fixed;
width: 100%;
top: 0;
}
#header {
line-height: 60px;
margin: 0 auto;
width: 940px;
text-align: center;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin: 0 auto;
overflow: auto;
padding: 80px 0;
width: 940px;
}
#content {}
/* Make Footer Sticky */
#footer_container {
background: #eee;
border: 1px solid #666;
bottom: 0;
height: 60px;
left: 0;
position: fixed;
width: 100%;
}
#footer {
line-height: 60px;
margin: 0 auto;
width: 940px;
text-align: center;
}
<body>
<html>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ipsum magna, et convallis sem. Nunc pulvinar magna vitae orci malesuada blandit. Proin ac purus dui. Suspendisse venenatis egestas egestas. Sed tincidunt diam et massa convallis et
mollis enim malesuada. Nullam eget metus nunc, eget imperdiet urna. Quisque vehicula ipsum non sapien vulputate convallis quis quis ligula. Aenean gravida mollis blandit. Nullam lacus tortor, viverra a auctor ac, porta eget neque. Duis placerat
mi metus, a gravida quam.
<br /><br /> Nam ut augue mauris, at dapibus quam. Pellentesque eu nunc enim. Proin facilisis, dolor nec sollicitudin mattis, sem velit mollis sem, sagittis sagittis libero ante id nunc. Nam congue, mauris non porttitor convallis, purus elit faucibus
nunc, in mollis sem lorem eu tortor. Cras nec justo id libero fringilla placerat ac et leo. Mauris ac vehicula odio. Cras augue erat, sodales vel porttitor ut, scelerisque nec justo. Praesent vitae lorem erat. Suspendisse elementum tortor vitae
diam venenatis eget fermentum lacus suscipit. Quisque varius vulputate tempus.
<br /><br /> Aliquam lacinia lacus vel ante sagittis vestibulum fringilla sem accumsan. Phasellus eget dictum ipsum. Sed sed aliquam nisi. Nam vitae tempus tellus. Vestibulum convallis tellus diam, sed posuere lectus. Nulla diam velit, tristique
in dignissim quis, porta eu nulla. Quisque quis nisl urna, id adipiscing quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer justo nisi, sollicitudin vitae porttitor eu, elementum ut ante.
<br /><br /> Proin id odio nibh. Integer adipiscing fermentum tellus consectetur hendrerit. Sed porta, lectus sed dictum tempor, risus orci lacinia nulla, non rutrum neque tellus vitae velit. Quisque ut lectus eget nunc vulputate ultrices eget vitae
metus. Vestibulum ac ligula urna, placerat scelerisque sem. Vestibulum porta interdum orci, quis porttitor arcu dictum pulvinar. Maecenas quis quam augue, accumsan consectetur arcu. Etiam quis augue quam, at auctor diam. Donec varius venenatis diam
at pulvinar. Donec imperdiet elit id urna tincidunt commodo eget ut metus. Nam convallis malesuada dapibus. Aenean erat nunc, tempus id facilisis ac, dignissim nec urna.
<br /><br /> Vestibulum at neque id libero ornare iaculis sed in libero. Nunc erat lectus, dignissim id congue ut, ornare sit amet nunc. Sed dignissim, massa tempus rutrum fringilla, justo lectus rutrum neque, at posuere orci nunc quis lacus. Phasellus
semper turpis et arcu euismod eget pharetra nisi ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean tempor, tellus sed interdum aliquet, dolor nibh hendrerit est, sed mattis tortor massa in
lectus. Vivamus eu ligula nibh, vel consectetur quam. Quisque in erat vitae est feugiat porttitor. Pellentesque dui nulla, pulvinar sed feugiat ut, laoreet a urna. Aenean id elit quis quam eleifend luctus sit amet at dolor. Duis eu tellus at libero
venenatis blandit. Mauris pharetra venenatis leo sed vehicula. Pellentesque rhoncus enim at nulla euismod tincidunt.
<br /><br /> Maecenas imperdiet nibh massa. In id eros in massa posuere blandit non sit amet lacus. Phasellus vitae lectus pretium nunc aliquam ullamcorper. Pellentesque quis urna ligula, nec placerat magna. Sed nisl turpis, porta at tincidunt eget,
vulputate sed magna. Nullam rutrum ipsum et lectus congue id rhoncus lectus bibendum. Vestibulum pretium velit id arcu rhoncus ac lobortis turpis tristique. Nullam viverra posuere leo sit amet dapibus. Fusce id imperdiet leo. Mauris et nisi diam.
Aenean lobortis vulputate massa, ut pellentesque mauris porta in. Fusce sollicitudin, massa consectetur ultrices varius, dolor ligula ullamcorper velit, non varius lorem urna vel diam.
<br /><br /> Morbi feugiat eleifend eros vel accumsan. Sed pellentesque vulputate libero eu mattis. Quisque sollicitudin aliquet ligula a molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pellentesque
lacinia varius. Etiam dictum hendrerit enim in euismod. Phasellus cursus odio vitae mauris mattis sed tincidunt nisi imperdiet. Duis sit amet neque diam. Aliquam aliquet molestie orci non vulputate. Maecenas non rhoncus eros. Integer auctor nisl
id elit posuere mollis. Nullam iaculis mattis justo sed accumsan.
<br /><br /> Proin ut ultricies odio. Duis consequat porta leo, in dictum urna facilisis id. Quisque facilisis massa a risus sodales accumsan. Maecenas at diam odio. Proin sem ligula, ullamcorper vel convallis at, vehicula ut augue. Pellentesque
euismod turpis eget metus fermentum adipiscing. Mauris nulla eros, imperdiet nec placerat eget, rutrum sed eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tempor hendrerit porttitor. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Praesent faucibus ultricies scelerisque. Vivamus mi enim, tincidunt et lacinia vitae, aliquet in risus. Suspendisse sed felis magna, non facilisis dolor. Quisque rutrum, risus
quis sodales porta, sem magna ullamcorper odio, dictum aliquam felis sem et risus.
<br /><br /> Aenean lacinia quam vitae leo gravida in pellentesque eros congue. Praesent sit amet eleifend mi. Sed non justo erat. Donec eleifend velit vel quam mollis tempus. Curabitur et est turpis. Etiam consectetur velit eget erat euismod tempus.
Proin egestas venenatis velit ac volutpat. Sed id egestas mauris. Aliquam nulla mi, malesuada eu venenatis ac, fermentum ut eros. Ut nec consequat mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam
eu magna urna, vel imperdiet sapien. Vestibulum lacinia porttitor mi, at molestie enim aliquet non. Sed rutrum, risus vel aliquam varius, nunc lectus porttitor velit, a sollicitudin magna quam et lacus. Praesent consectetur hendrerit arcu non viverra.
<br /><br /> Nam sit amet faucibus augue. Proin arcu lacus, fermentum ac tincidunt vel, porttitor id libero. Sed at arcu at metus congue scelerisque. Maecenas quis erat magna, ac tempor erat. Curabitur mollis nisl in nunc fringilla eget interdum
ante ullamcorper. Etiam eget magna sit amet nunc tincidunt tempus vitae vitae ligula. Morbi iaculis nisl id libero scelerisque tempor. Morbi tincidunt, felis non congue molestie, metus enim venenatis nunc, ac sodales nibh massa eget orci. Morbi
mauris lorem, auctor nec porttitor eget, interdum at tortor. Sed malesuada nibh sed enim scelerisque id tristique neque rhoncus. Nulla vulputate purus a arcu egestas ultricies.
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>
You do not need to clip the content. Use the background attribute to hide the content.
/* Reset body padding and margins */
body { margin:0; padding:0; }
/* Make Header Sticky */
#header_container { border:1px solid #666; height:60px; left:0; position:fixed; width:100%; top:0; background-color: white; }
#header{ line-height:60px; margin:0 auto; width:940px; text-align:center; }
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container { margin:0 auto; overflow:auto; padding:80px 0; width:940px; }
#content{}
/* Make Footer Sticky */
#footer_container { background:#eee; border:1px solid #666; bottom:0; height:60px; left:0; position:fixed; width:100%; }
#footer { line-height:60px; margin:0 auto; width:940px; text-align:center; }
<body>
<html>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ipsum magna, et convallis sem. Nunc pulvinar magna vitae orci malesuada blandit. Proin ac purus dui. Suspendisse venenatis egestas egestas. Sed tincidunt diam et massa convallis et mollis enim malesuada. Nullam eget metus nunc, eget imperdiet urna. Quisque vehicula ipsum non sapien vulputate convallis quis quis ligula. Aenean gravida mollis blandit. Nullam lacus tortor, viverra a auctor ac, porta eget neque. Duis placerat mi metus, a gravida quam.
<br /><br />
Nam ut augue mauris, at dapibus quam. Pellentesque eu nunc enim. Proin facilisis, dolor nec sollicitudin mattis, sem velit mollis sem, sagittis sagittis libero ante id nunc. Nam congue, mauris non porttitor convallis, purus elit faucibus nunc, in mollis sem lorem eu tortor. Cras nec justo id libero fringilla placerat ac et leo. Mauris ac vehicula odio. Cras augue erat, sodales vel porttitor ut, scelerisque nec justo. Praesent vitae lorem erat. Suspendisse elementum tortor vitae diam venenatis eget fermentum lacus suscipit. Quisque varius vulputate tempus.
<br /><br />
Aliquam lacinia lacus vel ante sagittis vestibulum fringilla sem accumsan. Phasellus eget dictum ipsum. Sed sed aliquam nisi. Nam vitae tempus tellus. Vestibulum convallis tellus diam, sed posuere lectus. Nulla diam velit, tristique in dignissim quis, porta eu nulla. Quisque quis nisl urna, id adipiscing quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer justo nisi, sollicitudin vitae porttitor eu, elementum ut ante.
<br /><br />
Proin id odio nibh. Integer adipiscing fermentum tellus consectetur hendrerit. Sed porta, lectus sed dictum tempor, risus orci lacinia nulla, non rutrum neque tellus vitae velit. Quisque ut lectus eget nunc vulputate ultrices eget vitae metus. Vestibulum ac ligula urna, placerat scelerisque sem. Vestibulum porta interdum orci, quis porttitor arcu dictum pulvinar. Maecenas quis quam augue, accumsan consectetur arcu. Etiam quis augue quam, at auctor diam. Donec varius venenatis diam at pulvinar. Donec imperdiet elit id urna tincidunt commodo eget ut metus. Nam convallis malesuada dapibus. Aenean erat nunc, tempus id facilisis ac, dignissim nec urna.
<br /><br />
Vestibulum at neque id libero ornare iaculis sed in libero. Nunc erat lectus, dignissim id congue ut, ornare sit amet nunc. Sed dignissim, massa tempus rutrum fringilla, justo lectus rutrum neque, at posuere orci nunc quis lacus. Phasellus semper turpis et arcu euismod eget pharetra nisi ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean tempor, tellus sed interdum aliquet, dolor nibh hendrerit est, sed mattis tortor massa in lectus. Vivamus eu ligula nibh, vel consectetur quam. Quisque in erat vitae est feugiat porttitor. Pellentesque dui nulla, pulvinar sed feugiat ut, laoreet a urna. Aenean id elit quis quam eleifend luctus sit amet at dolor. Duis eu tellus at libero venenatis blandit. Mauris pharetra venenatis leo sed vehicula. Pellentesque rhoncus enim at nulla euismod tincidunt.
<br /><br />
Maecenas imperdiet nibh massa. In id eros in massa posuere blandit non sit amet lacus. Phasellus vitae lectus pretium nunc aliquam ullamcorper. Pellentesque quis urna ligula, nec placerat magna. Sed nisl turpis, porta at tincidunt eget, vulputate sed magna. Nullam rutrum ipsum et lectus congue id rhoncus lectus bibendum. Vestibulum pretium velit id arcu rhoncus ac lobortis turpis tristique. Nullam viverra posuere leo sit amet dapibus. Fusce id imperdiet leo. Mauris et nisi diam. Aenean lobortis vulputate massa, ut pellentesque mauris porta in. Fusce sollicitudin, massa consectetur ultrices varius, dolor ligula ullamcorper velit, non varius lorem urna vel diam.
<br /><br />
Morbi feugiat eleifend eros vel accumsan. Sed pellentesque vulputate libero eu mattis. Quisque sollicitudin aliquet ligula a molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pellentesque lacinia varius. Etiam dictum hendrerit enim in euismod. Phasellus cursus odio vitae mauris mattis sed tincidunt nisi imperdiet. Duis sit amet neque diam. Aliquam aliquet molestie orci non vulputate. Maecenas non rhoncus eros. Integer auctor nisl id elit posuere mollis. Nullam iaculis mattis justo sed accumsan.
<br /><br />
Proin ut ultricies odio. Duis consequat porta leo, in dictum urna facilisis id. Quisque facilisis massa a risus sodales accumsan. Maecenas at diam odio. Proin sem ligula, ullamcorper vel convallis at, vehicula ut augue. Pellentesque euismod turpis eget metus fermentum adipiscing. Mauris nulla eros, imperdiet nec placerat eget, rutrum sed eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tempor hendrerit porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Praesent faucibus ultricies scelerisque. Vivamus mi enim, tincidunt et lacinia vitae, aliquet in risus. Suspendisse sed felis magna, non facilisis dolor. Quisque rutrum, risus quis sodales porta, sem magna ullamcorper odio, dictum aliquam felis sem et risus.
<br /><br />
Aenean lacinia quam vitae leo gravida in pellentesque eros congue. Praesent sit amet eleifend mi. Sed non justo erat. Donec eleifend velit vel quam mollis tempus. Curabitur et est turpis. Etiam consectetur velit eget erat euismod tempus. Proin egestas venenatis velit ac volutpat. Sed id egestas mauris. Aliquam nulla mi, malesuada eu venenatis ac, fermentum ut eros. Ut nec consequat mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam eu magna urna, vel imperdiet sapien. Vestibulum lacinia porttitor mi, at molestie enim aliquet non. Sed rutrum, risus vel aliquam varius, nunc lectus porttitor velit, a sollicitudin magna quam et lacus. Praesent consectetur hendrerit arcu non viverra.
<br /><br />
Nam sit amet faucibus augue. Proin arcu lacus, fermentum ac tincidunt vel, porttitor id libero. Sed at arcu at metus congue scelerisque. Maecenas quis erat magna, ac tempor erat. Curabitur mollis nisl in nunc fringilla eget interdum ante ullamcorper. Etiam eget magna sit amet nunc tincidunt tempus vitae vitae ligula. Morbi iaculis nisl id libero scelerisque tempor. Morbi tincidunt, felis non congue molestie, metus enim venenatis nunc, ac sodales nibh massa eget orci. Morbi mauris lorem, auctor nec porttitor eget, interdum at tortor. Sed malesuada nibh sed enim scelerisque id tristique neque rhoncus. Nulla vulputate purus a arcu egestas ultricies.
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>
I added background-color: white; to your css, and the text is now hidden behind the white background of the header element.
You can also clip the text by fixing the div size and setting some other css attributes such as overflow-y: hidden, that will cause anything that scrolls out of the center div to be hidden from view.
This question already has an answer here:
CSS - div aligning to the bottom of parent div (inline-block)
(1 answer)
Closed 7 years ago.
I'm learning HTML, and wrote up the following to try and create a side navigation menu:
<html>
<head>
<style>
* {
border: 2px solid red;
}
#mainBody {
}
#mainNav {
display: inline-block;
width: 20%;
}
.navMenu {
list-style-type: none;
}
#mainContentBody {
display: inline-block;
width: 75%
}
</style>
</head>
<body>
<header>
<p>This is a header!</p>
</header>
<section id="mainBody">
<nav id="mainNav">
<ul class="navMenu">
<li> Pascal Cropped </li>
<li> Ethics Excerpt </li>
<li> Pascal Cropped Again </li>
</ul>
</nav>
<section id="mainContentBody">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac nisl mollis, sodales neque id, efficitur velit. Aliquam et ultricies purus. Nulla facilisi. Mauris id pulvinar ipsum, ac commodo ipsum. Nunc non facilisis augue. Suspendisse nec lacus ullamcorper, ultricies augue nec, consectetur enim. Donec fermentum suscipit dapibus. Nunc quis interdum nibh, vel aliquam nunc. Nunc non tincidunt sem. Nullam vitae dapibus metus. Curabitur eget dignissim lectus. Vivamus tempus sagittis eros sit amet aliquet. Integer tincidunt porta leo ac suscipit.
Quisque a feugiat erat. Proin non ante ut leo aliquam aliquam. Etiam tempus volutpat nulla sed commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc laoreet est et rutrum dapibus. Cras luctus id ex vel volutpat. Suspendisse porttitor, mauris vitae dapibus convallis, felis eros maximus ex, vitae sodales ante nulla eu quam. Curabitur nec metus nisi. Nunc dapibus orci condimentum lobortis dictum. Proin augue orci, pharetra a mollis vel, ornare id tellus. Pellentesque lectus leo, maximus et risus id, gravida ornare diam. Etiam eget metus quis quam feugiat mattis. Praesent vitae elementum metus.
Fusce volutpat fringilla ex, sit amet imperdiet sapien efficitur a.
</p>
<p>
Proin gravida orci diam, vitae placerat ligula hendrerit vel. Donec turpis nulla, lacinia vel justo in, consequat elementum tellus. Vivamus ut gravida metus. Aliquam lobortis, dolor nec pulvinar venenatis, lorem enim viverra sapien, vitae ultricies velit nisl vel arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut a tincidunt lorem, non mollis neque. Nullam interdum dolor luctus ornare gravida. In tempus diam lectus. Sed tempor, purus in convallis suscipit, nisi nibh vehicula augue, et iaculis nisl nisl vestibulum justo. Integer posuere cursus velit, et iaculis justo aliquet et. Sed dapibus egestas neque, tincidunt aliquam nisl dapibus at. Morbi malesuada pellentesque posuere. Fusce a libero at mauris maximus maximus eu sed mi. Vivamus est nulla, viverra non felis at, elementum condimentum lacus. Sed sodales enim non tortor faucibus imperdiet.
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus est diam, mollis non purus non, posuere porta est. Donec vestibulum consequat massa vitae dictum. Sed eu lectus sed leo dignissim rutrum. Donec efficitur imperdiet purus, quis iaculis risus accumsan a. Integer ac erat id odio fringilla elementum. Pellentesque egestas ex eleifend, mollis nunc a, feugiat dui. Duis interdum id arcu vel aliquam. Aenean fringilla quam dolor, ut tempor elit cursus ut. Sed congue dui sit amet risus egestas rutrum. Nam dictum porttitor turpis, sit amet suscipit nunc consectetur ut. Donec at tincidunt nibh. Vestibulum sagittis pharetra eleifend.
Aenean pharetra, mi ac mattis suscipit, eros ante vehicula tellus, egestas ultricies felis elit sed ex. Suspendisse in nisl elit. Nullam nec libero nisl. Nulla tincidunt purus sapien, sed pulvinar diam varius non. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non libero sed lorem dignissim hendrerit. Proin felis tortor, dignissim ac maximus ornare, consectetur vitae velit. Aenean nec accumsan felis. Proin vitae fringilla magna. Pellentesque sagittis purus sed finibus pretium. Nam nec ante dapibus odio suscipit mattis. Nulla in nisi convallis, pulvinar leo ac, fringilla nisl. Nam a dictum dolor.
</p>
</section>
</section>
</body>
</html>
For some reason though, the side menu is positioned at the bottom of #mainBody, instead of near the top:
Note all the white space above the menu on the left. I tried adjusting its position with the top CSS property, but it didn't change anything.
Can anyone point me in the right direction?
Add
vertical-align:top;
to your css *{}
jsFiddle
Add a vertical-align to the #mainNav as follow:
#mainNav {
vertical-align: top;
display: inline-block;
width: 20%;
}
I'm trying to buld header that is white, but on place where logo is transparent i want header to be transparent to so you can see trough logo. Is there any way to make one part of header transparent but all others white? As you can see logo is inside the header its 50x50px and i want that part to be all transparent
header {
width: 100%;
height: 165px;
z-index: 1000;
position: fixed;
top: 0;
left: 0;
border-bottom: 1px solid black;
background-color: white;
}
.content {
width: 960px;
margin: 0 auto;
}
nav {
float: right;
}
nav ul li {
display: inline;
list-style: none;
}
nav ul li a {
text-decoration: none;
}
<header>
<div class="content">
<img src="img/headerLogo.png" alt="NKO law firm company logo">
<nav class="main-navigation">
<ul>
<li>THE FIRM
</li>
<li>TEAM
</li>
<li>PRACTICE AREA
</li>
<li>RANKINGS
</li>
<li>CLIENTS
</li>
<li>CONTACTS
</li>
</ul>
</nav>
</div>
</header>
I came up with a bit of a "hacky" solution, using pseudo elements, that allows you to scale the size.
What's happening is that we're not setting a background colour directly on any of the elements. Instead, we are "faking" it by doing three things:
Adding border-bottom to the image, giving it a height equal to the
height of the header less the height of the image, and setting its
colour to white.
Adding a :before pseudo-element to the header, positioning it
top & left, with a background colour of white and a height equal to
that of the header. Using calc to set its width allows it to
scale to the left edge of the image and, effectively, hides it when
the window width is 960px or less as the result of the calculation
will be zero or a negative value.
Adding a :after pseudo-element to the header, positioning it top
& right, with a background colour of white and a height equal to
that of the header. The really "hacky" bit is setting the width
here. Using calc to subtract the widths of the :before element
and image works, provided the window width is greater than 960px -
less than that and the negative value of the :before width causes
the :after to encroach on the image. So we use 2 media queries to
set the width, the first as just explained for when the window width
is greater than 960px and the second for when the window width is
960px or less, which simply use calc to subtract the width of the
image from the overall width of the header.
body{
background:#ddd;
font-family:arial;
margin:0;
}
header{
border-bottom:1px solid #000;
height:165px;
width:100%;
left:0;
position:fixed;
top:0;
z-index:2;
}
header:before{
background:#fff;
content:"";
display:block;
left:0;
height:165px;
position:absolute;
top:0;
width:calc((100% - 960px) / 2);
z-index:1;
}
header:after{
background:#fff;
content:"";
display:block;
height:165px;
position:absolute;
right:0;
top:0;
z-index:1;
}
#media all and (min-width:961px){
header:after{
width:calc(100% - ((100% - 960px) / 2) - 50px);
}
}
#media all and (max-width:960px){
header:after{
left:50px;
}
}
.content{
width:960px;
margin:0 auto;
position:relative;
z-index:2;
}
img{
border-bottom:115px solid #fff;
height:50px;
width:50px;
}
nav{
float:right;
}
nav ul li{
display:inline;
list-style:none;
}
nav ul li a{
text-decoration:none;
}
main{
padding:176px 10px 10px;
}
main p{
margin:0 0 10px;
}
<header>
<div class="content">
<img src="img/headerLogo.png" alt="">
<nav class="main-navigation">
<ul>
<li>THE FIRM</li>
<li>TEAM</li>
<li>PRACTICE AREA</li>
<li>RANKINGS</li>
<li>CLIENTS</li>
<li>CONTACTS</li>
</ul>
</nav>
</div>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis cursus condimentum nulla. Maecenas rutrum non mauris nec finibus. Sed dictum rhoncus turpis quis suscipit. Aliquam quam tortor, aliquam et tristique vitae, tempus in est. Donec non eros ac enim fringilla pulvinar. Praesent aliquam velit vel lectus tincidunt mattis. Maecenas id vulputate est. Ut consequat placerat enim vel lacinia. Aenean nec mattis metus, id tempus diam. Nunc viverra est et nunc tincidunt, at ullamcorper magna blandit. Maecenas egestas lectus nunc, ac cursus erat ullamcorper nec. Curabitur ut imperdiet libero.</p>
<p>Donec lorem nisi, ullamcorper in ex eu, consequat tristique lorem. Pellentesque feugiat ultrices vestibulum. Integer aliquet sodales suscipit. Integer posuere non orci id commodo. Phasellus elementum velit purus, nec efficitur diam semper ut. Vivamus at lobortis velit. Aenean egestas vestibulum ante, nec laoreet lorem vestibulum non. Donec a velit augue. Donec varius vehicula volutpat. Proin quam arcu, sodales lobortis risus sagittis, gravida consequat dui. Praesent nec quam eu ligula ullamcorper gravida. Mauris et quam volutpat, blandit orci sit amet, convallis nibh. Proin maximus neque suscipit ex egestas, et scelerisque nisi blandit. Suspendisse nunc dui, ullamcorper vel metus non, condimentum tristique nisi. Nulla nunc mauris, euismod non velit ac, consequat fringilla lectus.</p>
<p>Ut nulla purus, dictum ultrices accumsan ultricies, tincidunt vitae libero. Pellentesque auctor nisl fringilla justo fringilla condimentum. Maecenas nisi lacus, tincidunt id consequat eu, auctor sollicitudin ex. Nulla vel ante a lectus pellentesque ornare. Sed id pulvinar dolor. Integer eget dui nulla. Fusce in orci nec nisi ultrices ultricies a sed urna. Proin rutrum tristique erat, id facilisis mi. Donec nec est et odio convallis porta.</p>
<p>Sed ornare convallis nibh ultricies bibendum. Cras condimentum tristique ipsum, eu aliquam tortor porta et. Quisque auctor erat at felis feugiat pretium. Etiam finibus pharetra libero, vel suscipit odio. Mauris placerat mollis nibh sed varius. Sed at ipsum sem. Aliquam dictum pulvinar feugiat. Aenean vel suscipit libero. Nullam fringilla massa dapibus tellus tincidunt, in blandit turpis bibendum. Phasellus ac congue diam. Fusce consequat facilisis sagittis. Duis non suscipit mi.</p>
<p>Aliquam et sodales ligula, vel porta nulla. Fusce quis ante dictum, porttitor odio quis, dictum arcu. Maecenas maximus tincidunt euismod. Aliquam mauris est, posuere eu nisl hendrerit, elementum bibendum sem. Aenean in est augue. Nulla maximus neque non eros imperdiet, at malesuada tortor viverra. Curabitur dolor est, eleifend quis velit quis, placerat condimentum mi. Pellentesque tempus orci sit amet lacus lacinia, venenatis vestibulum magna euismod. Donec rutrum dignissim orci, nec dignissim sem faucibus nec. Nullam vel gravida nunc.</p>
<p>Aliquam justo velit, porta nec venenatis et, fringilla ac nisi. Praesent pharetra nulla ut nibh tristique, ac vulputate orci elementum. Mauris erat turpis, aliquet id fringilla in, iaculis in quam. Proin tortor arcu, viverra non fermentum at, pretium quis sem. Vivamus in ex molestie, tempor sem sed, feugiat dui. Aenean imperdiet augue et sem laoreet, sit amet porta tellus tristique. Aliquam et dapibus tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean ullamcorper vel lacus nec vulputate.</p>
<p>Sed sapien massa, laoreet vitae aliquam et, tincidunt in augue. Maecenas justo tellus, ullamcorper ut pellentesque non, pulvinar non mauris. Etiam eu molestie erat, ac tincidunt lectus. Morbi scelerisque dui malesuada justo venenatis, id porttitor sapien rhoncus. Vivamus sit amet turpis sit amet nibh elementum mollis eget in velit. Suspendisse hendrerit, felis at laoreet pharetra, magna lorem elementum tellus, vel vehicula arcu tortor in purus. Phasellus vehicula dui id dolor pellentesque imperdiet. Nam venenatis augue sed justo lacinia, et consequat nibh facilisis. Quisque auctor erat id sem tincidunt ultricies. Proin fringilla nisl at lectus viverra, sit amet rhoncus felis lobortis.</p>
<p>Suspendisse tempus imperdiet leo eget sollicitudin. Suspendisse blandit ultricies volutpat. Sed volutpat ligula id velit auctor, et eleifend sapien dictum. Aliquam in vestibulum odio. Donec metus orci, suscipit bibendum ex sit amet, fermentum facilisis sem. Morbi rhoncus turpis viverra dui lobortis auctor. Vestibulum sit amet ante metus. Sed ut ex id felis sollicitudin feugiat. Praesent lobortis convallis arcu, elementum malesuada sem dignissim vitae. Vivamus id vulputate nisl. Sed pulvinar vehicula lorem, vel imperdiet elit.</p>
<p>Proin orci erat, rhoncus ac fermentum nec, euismod non nisi. Sed ornare sapien vel interdum blandit. Duis odio sem, pretium ut diam non, tempus vestibulum mauris. Maecenas vitae sapien tempus, varius tortor posuere, ullamcorper purus. Nulla pulvinar quam ut orci tincidunt, eu sagittis ex aliquet. Donec vestibulum auctor est ac suscipit. Mauris tristique lacinia euismod. Nulla ante elit, ornare et luctus vitae, vehicula at ex. Nulla vel tristique dui. Nulla ac sagittis lectus. Curabitur auctor semper felis, et tempus turpis euismod eget. Morbi tempus auctor ante, nec volutpat leo accumsan sed. Nullam ullamcorper odio at nunc ornare porta. Cras at lacus dapibus, convallis lectus ut, elementum tortor. Sed at mauris mi.</p>
<p>Cras egestas mi libero, vel pharetra libero congue eget. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras pharetra, arcu quis tincidunt ullamcorper, arcu sem finibus justo, et luctus nunc justo in nunc. Fusce tempus fringilla diam a mattis. Ut nec est nisi. Fusce tristique nunc mauris, ut porttitor libero consectetur id. Donec libero orci, eleifend eget sagittis ut, venenatis ac justo.</p>
<p>Praesent auctor porta turpis at auctor. Quisque pulvinar nisi et dui convallis gravida. Aenean quis nulla neque. Pellentesque et erat at ipsum finibus ultricies. Curabitur eu euismod nulla, ac pretium augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris feugiat lacinia augue ac fermentum. Donec scelerisque finibus felis, vitae dignissim lorem ultrices in. Etiam convallis arcu sed libero convallis, non dictum dolor luctus. Etiam eget eros laoreet, ullamcorper justo quis, mattis nibh. Nullam mauris metus, aliquam at turpis vitae, luctus ullamcorper tortor. Nullam maximus posuere quam, id efficitur sapien.</p>
<p>Maecenas purus metus, egestas quis eleifend cursus, euismod nec quam. Suspendisse a volutpat ligula. Nulla dignissim lacus eget rutrum sollicitudin. Pellentesque commodo accumsan ultrices. Quisque porttitor orci laoreet, sollicitudin mauris vitae, sollicitudin velit. Nunc auctor volutpat efficitur. Sed tempor odio neque, ac vehicula dui tincidunt at. Nullam enim ex, fermentum non gravida faucibus, vulputate non augue. Praesent vulputate pharetra suscipit. Maecenas tempor venenatis leo ut ullamcorper. Cras cursus iaculis risus vel eleifend.</p>
<p>Nunc dictum lacinia leo eget venenatis. Sed aliquet scelerisque neque, a convallis nisl. Mauris tempus libero efficitur ornare molestie. Integer non finibus ex, vitae tempus massa. Donec quis sem erat. Maecenas consectetur, nibh ac porta feugiat, nisi mauris dictum quam, ac rhoncus nulla nibh in augue. Suspendisse tristique ligula ex, viverra fermentum nisi mattis a. Duis ullamcorper dapibus felis ornare maximus. Cras et hendrerit elit. Sed rutrum eleifend ante, ac interdum elit placerat ac. Duis a consequat lacus. Morbi congue orci eget est bibendum vehicula. Quisque nec erat nec sapien porta elementum vel eget libero. Donec condimentum tortor quam, eu porttitor erat lacinia non. Maecenas vitae laoreet massa. Aenean convallis erat a rhoncus fermentum.</p>
<p>Etiam augue enim, egestas vel auctor et, finibus nec mi. Cras vitae lectus vitae orci ullamcorper posuere. Aliquam enim massa, maximus eu nibh quis, rhoncus varius augue. Praesent quis libero diam. Cras ut sem tellus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec non felis ac eros vehicula lobortis. Vestibulum malesuada leo sit amet bibendum sollicitudin. Ut euismod blandit purus at egestas. Nulla pellentesque risus vel libero vehicula efficitur. Nam id facilisis diam, vestibulum pulvinar metus. Nullam arcu eros, iaculis vitae lectus eu, porttitor facilisis massa.</p>
<p>Duis pellentesque tellus semper quam convallis, non condimentum odio auctor. Maecenas vitae blandit libero. Vivamus facilisis felis et est malesuada feugiat. Aenean quis augue ut mauris ultrices molestie. Aenean a velit elit. Sed sit amet viverra ex. Sed facilisis tempor placerat. In metus metus, venenatis sed nisi sit amet, posuere ultrices arcu. Integer laoreet fringilla est, quis interdum sem imperdiet ut. Sed sagittis fringilla orci non ornare. Donec viverra leo ut justo feugiat eleifend. Fusce dapibus vel ligula non convallis. Cras sed suscipit nisl, in varius diam. Vestibulum imperdiet blandit imperdiet. Proin accumsan augue quis turpis viverra pharetra.</p>
<p>Phasellus elementum nibh ac efficitur commodo. Donec vestibulum velit felis, eget mollis libero maximus ut. Proin semper purus nec libero volutpat, non feugiat nisl pellentesque. Nam fringilla lacinia dui, at feugiat odio vulputate id. Aenean condimentum congue justo eu interdum. Pellentesque at quam felis. Nulla ac elementum orci, in tristique ante.</p>
<p>Quisque in nisi consectetur, egestas urna id, iaculis ligula. Etiam varius lacinia velit, sit amet convallis sapien dignissim a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ut blandit diam. Nunc vehicula, urna sed iaculis volutpat, nisl ipsum tempus tellus, in tincidunt nulla ipsum sed purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse non tortor at mi blandit varius id at tellus. Maecenas congue et orci ut pharetra.</p>
<p>Proin rutrum laoreet velit, a finibus lorem interdum non. Proin pharetra sagittis commodo. Duis in diam in nunc accumsan dictum vitae vel orci. In vulputate nunc dolor, nec venenatis orci ultrices at. Sed convallis ipsum pharetra tellus sagittis, a malesuada magna laoreet. Duis dapibus fermentum viverra. Maecenas varius magna sit amet lacus accumsan viverra. Nullam erat massa, vulputate ut urna et, aliquam mollis sem. Maecenas lorem diam, suscipit gravida arcu sit amet, porta vulputate tellus. Proin varius placerat ligula. Phasellus et lacus sapien. Donec feugiat ut neque id rutrum. Maecenas luctus turpis enim, in cursus ipsum egestas eu. Aenean ornare dui mauris, quis consequat orci hendrerit at. In erat purus, vulputate eget lectus id, gravida semper elit.</p>
<p>Vestibulum tincidunt pellentesque velit, vitae aliquam neque convallis a. Curabitur sit amet lectus sit amet mi pharetra interdum vitae non enim. Sed molestie euismod metus sit amet ullamcorper. Nam porta consectetur laoreet. Nunc varius ultrices vestibulum. Morbi dignissim leo libero, eget rhoncus leo semper a. Suspendisse eget varius diam. Curabitur facilisis finibus erat, sit amet placerat neque faucibus a. Aenean id nisi lacus. Nunc vehicula, justo id pretium gravida, dui dolor posuere augue, id egestas enim tortor quis dui. Donec dictum aliquet arcu, in egestas tellus ornare et. Morbi feugiat vehicula lectus quis maximus. Mauris dictum, sapien et fringilla convallis, dui urna tristique nisl, id fermentum purus dui sed est. Pellentesque faucibus pretium pharetra.</p>
<p>Maecenas quam neque, faucibus non dapibus non, porttitor et diam. Fusce quis eleifend purus. Duis condimentum vitae tortor vel iaculis. Nulla porta ultricies semper. Phasellus sit amet neque lacus. Suspendisse egestas massa at imperdiet maximus. Nam ante justo, condimentum in malesuada et, cursus eu purus.
</main>
ASIDE: Here is the Fiddle I was working on before you supplied your CSS.
Mabe somthing like this?
section {
background:#ddd;
height:1000px;
}
header {
width:100%;
height:60px;
}
.logo {
position:relative;
float:left;
width:100px;
height:60px;
background:red;
opacity:.3;
}
nav {
position:relative;
float:left;
width: calc( 100% - 100px ); /* 100% - logo-width */
height:60px;
background:#eee;
}
}
<section>
<header>
<div class="logo">Logo</div>
<nav>
<div>Rest of nav</div>
</nav>
</header>
</section>
I'm struggling to get my div (#content) to full 100% height of the page, if I resize my browser, my div (.divAboutRight) stretches accordingly to accommodate the content but my wrapper div (#content) does not? I have an image (#logo) which is centered to it's parent (#content) which it is not doing when the parent doesn't fill 100%.
I'm sure I'm missing something really basic.
Any assistance or guidance would be appreciated.
<style>
html{margin:0; padding:0; width:100%; height:100%;}
body{height:100%;min-height:100%; margin:0; padding:0; width:100%; background-color:#fb9f32; color:#FFF;}
.head{width:100%; height:60px; background-color:#FFFFFF;}
#content{width:100%;height:100%;min-height: 100%; position:relative; border:1px solid red;}
#Back
{
position:absolute;
left:0;
background:url(../images/Back.png) no-repeat;
background-size: 100% 100%;
float:left;
min-width:55%;
height:59%;
border:1px solid green;
}
#logo
{
display:block;
position: absolute;
top: 50%;
left: 50%;
max-height: 132px;
max-width: 133px;
margin: -66.5px 0 0 -66px;
z-index:9999999;
}
.divAboutRight{width:35%; margin-right:5%; margin-top:3%;float:right; border:1px solid yellow;}
</style>
<body>
<div class="head">
<!-- Header Content -->
</div>
<div id="content">
<div id="Back">
<!-- absolute positioned -->
</div>
<!-- Fixed logo to be center of content wrapper -->
<img id="logo" width="133" height="132" src="images/logo.png"/>
<div class="divAboutRight">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id est leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et volutpat metus. Cras et ante in enim sollicitudin facilisis quis eget lacus. Donec a justo in lacus ornare porttitor feugiat sit amet velit. Nunc iaculis, tellus quis sollicitudin placerat, leo nulla viverra lectus, id semper massa arcu in purus. Vivamus dictum venenatis metus quis viverra. Donec euismod, mauris vel aliquam convallis, lectus diam scelerisque lacus, id adipiscing orci augue nec arcu. Nulla molestie est lobortis tempor consectetur. Curabitur convallis malesuada velit et volutpat. Morbi a commodo velit. Integer malesuada nunc augue, ac convallis justo sollicitudin a. Nam nulla urna, facilisis quis ullamcorper dictum, venenatis eu ante. Ut consectetur sit amet lacus sed posuere. Nunc facilisis est eu ultrices scelerisque.
Cras feugiat tincidunt justo, et eleifend felis pretium ac. Nulla ornare, massa eu tincidunt tristique, sapien enim congue nisl, id pellentesque nisl lorem vel dolor. Mauris imperdiet, diam ac aliquam convallis, eros ante rhoncus justo, non malesuada mi nulla non sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse potenti. Praesent sapien velit, sodales eget odio at, ullamcorper molestie nibh. Mauris iaculis posuere leo, non sollicitudin libero ullamcorper quis. Integer lobortis et eros vitae imperdiet. Ut ligula sem, tempor quis lobortis imperdiet, interdum ac nisl. Sed non lectus mauris.
Donec mattis lorem dolor, a feugiat neque dictum in. Nullam pharetra magna mi, quis hendrerit odio vestibulum id. Donec faucibus risus sed felis mattis pharetra vel a enim. Curabitur ultrices bibendum dapibus. Nulla sit amet metus mauris. Phasellus at tellus est. Mauris sagittis, eros quis laoreet sodales, tortor justo tempus dolor, et tincidunt dui tellus et erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque vitae pulvinar sapien. Praesent pellentesque metus sem, pellentesque ullamcorper augue pellentesque eu.
In neque lectus, ultricies ultrices nisi sed, commodo viverra justo. Cras quis neque vulputate, elementum ante non, pellentesque urna. Fusce id tempus magna. Fusce nec tortor id nulla pharetra sodales nec at tellus. Suspendisse gravida felis non turpis consequat, sit amet gravida risus ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis elementum consequat mauris ut accumsan. Donec nec aliquet tortor. Donec turpis tellus, convallis at faucibus sed, volutpat ac turpis. Vestibulum consequat sapien mi, et ultricies libero convallis ultricies. Mauris placerat mollis elementum. Nulla molestie felis purus, sed hendrerit enim vehicula ac. Curabitur adipiscing fringilla ultricies. Nunc hendrerit libero non aliquet egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis dui a enim interdum aliquet.
Nulla sagittis ligula enim, in vulputate lectus tincidunt ac. Sed imperdiet gravida orci at semper. Proin mollis adipiscing neque, vitae convallis risus rutrum eget. Praesent augue neque, lacinia nec tincidunt sed, elementum non sem. Suspendisse a mi condimentum, pellentesque lorem id, tempor turpis. In tortor nibh, convallis egestas ornare scelerisque, semper non nisi. Pellentesque ullamcorper euismod malesuada. Curabitur condimentum arcu id lorem posuere tincidunt. Proin convallis, elit vel fringilla tincidunt, eros diam ullamcorper lacus, eget posuere tortor velit vestibulum lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sit amet pellentesque lacus. Maecenas molestie augue id ipsum feugiat, non pulvinar mi eleifend. Aenean augue metus, tincidunt non pellentesque eu, tristique quis metus. In a neque viverra, commodo velit ut, pretium diam.
</div>
</div>
</body>
From what I can see, Your div #content does not cover the full height because you have a div .head with a height of 60px;
Yo can either float your .head div or make it's position:absolute;
You could also include the .head div iside the #content div like this:
<body>
<div id="content">
<div class="head">
<!-- Header Content -->
</div>
<div id="Back">
<!-- absolute positioned -->
</div>
<!-- Fixed logo to be center of content wrapper -->
<img id="logo" width="133" height="132" src="images/logo.png"/>
<div class="divAboutRight">
<!-- Dynamic Content -->
</div>
</div>
</body>
If you are OK supporting IE9+, here is the code:
<style>
#content{
.
.
height:calc(100% - 60px);
.
}
</style>
Calc is supported in all modern browsers now.
On the other hand, if you can't support calc, here is one more way:
<style>
.head {
... // rest of head's css
z-index: 2;
}
#content {
position: relative;
box-sizing('border-box');
height: 100%;
padding-top: 60px; // height equal to the header
margin-top: -60px; // this will offset your content up again
z-index: 1; // make the content go BEHIND the head
... // rest of the CSS
}
</style>
note: this will make the scrollbar start from behind the head, because the content will be under the head.