Is there any way to stick a footer to the bottom of the browser screen or right after the content (depending on which is longer) using CSS without knowing the size of the footer in advance?
Right now I am using the absolute positioning in a container that holds the footer and the content with container's min-height as 100%, but if I change the footer I find I must change the padding at the bottom of the container to match its height.
http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
Summary:
For a site with a header, content area, and footer:
Set html, body {height: 100%;}
Set your body (or a wrapper div) to display: table; width: 100%; height: 100%;
Set your header, footer, and content area to display: table-row;. Give your header and footer height: 1px;, and give your content area height: auto;
The header and footer will both expand to fit their content. The content area will expand to fit the larger of its content, or the available space.
https://jsfiddle.net/0cx30dqf/
If you're willing to jump into the HTML5 future, you can use flexbox...
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
My more detailed answer to the same question: How to make a fluid sticky footer (full example: http://jsfiddle.net/n5BaR/)
Solved by flexbox: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
What is Flexbox from MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Try this!
Uses Flex!
NO FIXED HEIGHT, JAVASCRIPT OR TABLES
Expands when more content, and when there isn't it sticks to bottom
Note: Does not work with IE 9 & Below
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
min-height: 100%;
display: flex;
flex-direction: column;
}
.content{
flex: 1;
background: #ddd;
}
<body>
<header>
Header
</header>
<div class='content'>
This is the page content
<br>
PS. Don't forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the body css)
</div>
<footer>
Footer
</footer>
</body>
For an app with a responsive footer (i.e. changes height on resize), you can use jquery to dynamically adjust the padding of the bottom for the parent element. Adding onto this post: Keep Footer at Bottom
HTML:
<div class=”main-container”>
<header>
this is a header
</header>
<section>
this is content
</section>
<footer>
this is a footer
</footer>
</div>
CSS:
html,
body {
height: 100%;
position: relative;
}
.main-container {
min-height: 100vh; /* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px; /* height of your footer */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
CoffeeScript:
footerEventListener = ->
$(window).on "resize", ->
setFooterHeight()
setFooterHeight = ->
// get footer height in px
bottomPadding = $("footer").css("height")
$(".main-wrapper").css("padding-bottom", "#{bottomPadding}")
// init footer events
setFooterHeight()
footerEventListener()
Check out the CodePen here.
since no one knows the answer for sticky footer w/o knowing the height of it, using css (crosbrowser solution), i was forced to calculate it
jquery:
if( $(document).height() < $(window).height() )
{
$('#content').height
(
$(window).height - $('#footer').height()
);
}
html structure:
<div id="content"></div>
<div id="footer"></div>
I think the best way is just add a class to your footer. Javascript will do the rest.
//This Pen is By Mohammad Abdus Salam
//portfolio.codeexposer.com
var footerHeight = $('footer.fixed_footer').height();
if($('footer').hasClass('fixed_footer')){
$( "section" ).last().css({
"margin-bottom": footerHeight + 'px'
});
}
#import url('https://fonts.googleapis.com/css?family=Raleway:400,700,800');
body{
margin: 0;
padding: 0;
text-align:center;
font-family: 'Raleway', sans-serif;
line-height: 30px;
}
section{
padding-top: 80px;
padding-bottom: 80px;
border-bottom:1px solid #ddd;
background: #ffffff;
z-index: 9;
}
h1{
font-size: 48px;
font-weight: 800;
text-transform: capitalize;
}
a{
text-decoration: none;
}
.container{
width: 700px;
display: inline-block;
box-sizing:border-box;
padding-left: 30px;
padding-right: 30px;
}
.logo{
height: 80px;
width: 80px;
display: inline-block;
}
.footer_top{
border-bottom: 1px solid #777;
padding-bottom: 60px;
}
.logo img{
width: 100%;
height: 100%;
}
.footer_bottom {}
.footer_bottom p{
color:#aaa;
}
.footer_top{
padding-top: 100px;
}
.footer_bottom p a{
color:#158;
}
footer{
width: 100%;
left: 0;
bottom:0px;
z-index: -1;
background: #222222;
}
.fixed_footer{
width: 100%;
position:fixed;
left: 0;
bottom:0;
z-index: -99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="container">
<h1>This is Banner</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is About</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Service</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Portfolio</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Banner</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<footer class="fixed_footer">
<div class="container">
<div class="footer_top">
<a class="logo" href="portfolio.codeexposer.com">
<img src="https://lh3.googleusercontent.com/-a700z77yIxk/AAAAAAAAAAI/AAAAAAAAABM/RzvY_qm9KQY/s512-p/photo.jpg" alt="">
</a>
</div>
<div class="footer_bottom">
<p>
All Rights Reserved By Mohammad Abdus Salam
</p>
</div>
</div>
</footer>
Take a look at this, cssstickyfooter, it works great in any browser.
Update: This is from 2010, might not be relevant with current standards
Related
I have been trying to create two side by side navbars over the past few days. I have gotten over most of the issues faced but have an annoying niggle left. The very right edge of the navbar does not show. I have a workaround( set the width to 99% ) but I would like to to understand the reason why it is not appearing. It seems that you get an automatic margin on the left hand side, but not right.
I've searched this site amongst other, but they appear to have the opposite problem!
Adding right-margin statement at various places impacts the content, but not the navbar.
I have checked the output in Mozilla and Chrome to make sure it wasn't the browser.
Couple of images to clarify:
Navbar when at 100%
And at 99% set( the workaround )
Navbar at 99%
Here is the HTML code. Go easy on me, I am a beginner in CSS on a steep learning curve! Started with Bootstrap but came to the realization that without knowing the basics, BootStrap would be a life of copy pasta( plus all the bloat of the 80% you don't need ).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.mymenus {
top: 0;
/* have tried various left/right/both margin combinations here */
display: inline-flex;
flex-direction: row;
height: max-content;
width: 100%; /* 100% makes the right edge disappear 99% is workaround. */
background: tomato; /* Not required - Just to see if background is showing */
border-style: double;
border: firebrick;
position: fixed;
}
ul {
font-family: sans-serif;
font-size: larger;
font-weight: bold;
list-style: none; /* Gets rid of the bullet points */
display: flex;
flex-direction: row;
flex-wrap: wrap;
border: violet;
border-style: dotted;
justify-content: space-evenly; /* have to use justify content, not the text to get it to space evenly */
}
li {
border: solid yellow;
padding: 10px 20px 10px 10px; /* see impact of padding */
margin-bottom: 5px;
margin-top: 5px;
}
#navbar_left {
width: 70%;
background: lightcyan;
float: left;
}
#navbar_right {
width: 30%;
background: lightcyan;
float: right;
}
</style>
<title>SideBySide navbar</title>
</head>
<!-- have tried setting the right margin in body as well, impacts left side and content, but not right side of nav bar -->
<body>
<!--Using this first div as a wrapper. The padding means that the Text flow does not start right at the top which happens when you have a fixed element-->
<div style="padding-top: 0px; padding-bottom: 90px;">
<div class="mymenus">
<nav id="navbar_left">
<div>
<ul>
<li> Item One</li>
<li> Item Two</li>
<li> Item Three</li>
<li> Item Four</li>
</ul>
</div>
</nav>
<nav id="navbar_right">
<div>
<ul>
<li> Item One</li>
<li> Item Two</li>
<!-- <li> Item Three</li> -->
</ul>
</div>
</nav>
</div>>
</div>
<div class="mytext>">
<p>ipsum Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus sit repellendus dolorum corporis eius
adipisci quam! Voluptate cupiditate iure, rem molestiae corrupti odit nesciunt, culpa qui ut sequi quasi
eius?
</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam facere itaque libero magnam natus nobis eum
unde. Libero numquam, ab debitis animi cupiditate assumenda pariatur delectus et voluptatem at vel. Lorem
ipsum
dolor sit amet consectetur, adipisicing elit. Quis excepturi voluptates ratione cupiditate expedita iusto
magnam
possimus aspernatur labore exercitationem earum repudiandae, cumque quae quam in eos esse asperiores a?
Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima earum harum doloribus
quos
ut dolorum deleniti quam, tempora placeat sunt. Ad, culpa. Quam, expedita quisquam tenetur alias officia
ducimus
explicabo.
Nihil nam suscipit ab accusamus unde eos explicabo temporibus impedit, dolore voluptatibus et nulla ipsum,
rerum
eum amet enim dolor sint commodi asperiores deserunt consectetur provident. Sed unde nulla minima.
Quam unde illum quos! Cupiditate fugit debitis, blanditiis sapiente in similique maiores velit neque
repudiandae
officiis deleniti harum non tenetur nisi ea assumenda inventore numquam, necessitatibus illo. Quo,
reprehenderit
fuga?
Consequuntur, non! Nesciunt adipisci quibusdam nemo pariatur vero fugit voluptatem porro dignissimos sit est
ratione, exercitationem, odit corrupti magni blanditiis dolorem, deserunt repellat quas eius hic amet dicta!
Totam, consequuntur!
Suscipit earum, itaque dicta veniam vero, dolor in ipsa voluptatum facilis reprehenderit sed. Voluptates
quos
tenetur numquam, temporibus laboriosam ex consequuntur, nesciunt accusantium assumenda vel itaque, eius
minima
ad asperiores?
Accusantium nostrum, quo suscipit laboriosam nisi, perspiciatis beatae quibusdam, consectetur odit corporis
illum temporibus vero repellat sapiente in assumenda ab. Facere similique laborum odit neque explicabo
consectetur fuga ad quia.
Doloremque laudantium repellendus omnis amet quasi quisquam voluptatem inventore earum possimus,
exercitationem,
eius molestias officiis molestiae sed temporibus ea nisi. Asperiores dolore nam sint distinctio earum at
magni
voluptatem nobis.
Adipisci rem inventore, repellat autem recusandae aut quis molestiae non, consequuntur voluptate veniam!
Dolores, praesentium debitis. Sunt amet, atque voluptas similique quod vel, corporis laborum magni
consequuntur
dignissimos est iste?
Quam ex ratione assumenda repudiandae, suscipit eos id odio voluptate eum accusantium labore nihil optio quo
harum debitis laborum excepturi. Sed explicabo quibusdam obcaecati vero, aperiam sit earum. Officiis,
cumque!
Cumque nam odio exercitationem dignissimos similique facere magni maiores incidunt maxime ad explicabo,
dolor
recusandae tempore nihil dolore magnam repellendus dolorum eligendi libero esse labore sint aliquam minima.
Et,
atque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, suscipit. Aspernatur facilis fuga
adipisci! Sed aut est, culpa quae corporis repudiandae, iusto quas facere rem minima dolores accusantium
fugiat
alias!
Debitis odit corrupti id assumenda possimus, consequuntur inventore! Consequuntur eius tempore odio autem
laudantium, nihil architecto, molestiae aspernatur, ducimus itaque excepturi vitae? Suscipit animi officia
minima rem enim aspernatur modi.
Dignissimos tenetur ad recusandae repudiandae deserunt nihil commodi delectus labore, sint minima tempora,
sapiente illo. Quo consequatur vero nisi, nemo facilis natus numquam eos dicta repellat reprehenderit rerum
adipisci excepturi!
Beatae, molestiae quis quo veniam sint porro voluptatibus ullam labore voluptatem in consequatur quae vero
deleniti alias! Ab ipsa, quas soluta cumque voluptatibus velit odio? Obcaecati ex architecto ipsa quod.
Unde veniam quae aut corporis consequatur inventore explicabo dicta animi molestias. Debitis eius maiores
molestias, eveniet, adipisci qui autem cumque repellendus tempore laudantium quas eum dolore quis aliquid!
Eos,
magni.
Eligendi nam at debitis natus laboriosam nemo placeat quibusdam esse facere, nisi ratione doloremque fuga
sequi
magni nobis ipsam a, tempore odit dolorum? Esse odio illo veritatis doloremque error qui!
Odit perspiciatis velit nisi at ipsam nobis doloremque voluptates incidunt minus corporis sed ex deleniti
fugit,
repudiandae error quia consequatur, provident est reiciendis facere modi minima sunt temporibus nam.
Provident.
Inventore tenetur eaque est qui, perferendis magnam nihil doloremque omnis, nulla recusandae, eum voluptas
harum
cupiditate sint officia quidem non. Animi asperiores consequuntur autem earum quod minus aut sint non.
Qui tempore sapiente, ab, ipsa cupiditate porro id odit, harum nemo accusamus quisquam excepturi culpa.
Laboriosam, doloribus. A dolore unde non nesciunt sapiente necessitatibus quam, at assumenda itaque quia
deserunt?
In accusantium deserunt aspernatur. Sit eos doloremque quae non recusandae cupiditate, sequi quaerat, magni
quia
odit, culpa vero molestiae deleniti perferendis provident officia voluptatum quos temporibus dolorem maxime
dolores ad.
</p>
<p>ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae impedit voluptatibus soluta
reprehenderit.
Atque corporis odio nam repellat ratione nostrum placeat nobis, ex eaque eius ab earum consequuntur tenetur
corrupti.
Recusandae necessitatibus modi porro voluptas, quasi natus eaque nisi. Commodi est vitae accusantium. Dolor
officia provident dignissimos totam. Excepturi mollitia, omnis non illum iusto numquam quisquam deleniti
sequi
nam eius!
Fugit ab soluta non, corporis quisquam numquam minus incidunt similique hic necessitatibus repellat error
tempora, nam atque labore. Ab sequi magnam provident laudantium molestias, eius est inventore consequatur
consequuntur sed!
Exercitationem blanditiis accusantium nam commodi hic quos voluptatibus, reiciendis ea quae aspernatur alias
suscipit corporis odio quidem earum accusamus quia numquam eum temporibus eius libero fuga. Quasi
praesentium
modi itaque!</p>
</div>
</body>
</html>
Edit
Thank to both Nick and Haworth. The global heading were useful in cleaning up the layout and I understood the point about borders after playing around some more.
As far I can tell, 100vw/100% width + flex boxes + margins is just a bad combination!. It appears that stating 100% width and then adding in a margin or border makes the overall width go over 100% because as stated in the answers, they are outside the box.
So the solution appears to be leave the container alone(don't add any margins or padding ) and make the adjustment to the items within it to mask any issue or adjust the container size via a calculation.
A clearer head today plus better search terms also led me to this post:
StackExchange - flex items and margins
There are some useful settings which you often find at the start of CSS files. They do three things, set the margin and padding on all elements to start off as 0, overriding the defaults that browsers may use, and in addition set box sizing to border-box which means borders etc are counted within an element’s dimensions, not additional to it.
If we do this with your snippet you’ll see that the right hand border of your navbar is visible. The 70% plus 30% are doing what you wanted, including their borders.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
margin:0;
padding: 0;
box-sizing: border-box;
}
.mymenus {
top: 0;
/* have tried various left/right/both margin combinations here */
display: inline-flex;
flex-direction: row;
height: max-content;
width: 100%; /* 100% makes the right edge disappear 99% is workaround. */
background: tomato; /* Not required - Just to see if background is showing */
border-style: double;
border: firebrick;
position: fixed;
}
ul {
font-family: sans-serif;
font-size: larger;
font-weight: bold;
list-style: none; /* Gets rid of the bullet points */
display: flex;
flex-direction: row;
flex-wrap: wrap;
border: violet;
border-style: dotted;
justify-content: space-evenly; /* have to use justify content, not the text to get it to space evenly */
}
li {
border: solid yellow;
padding: 10px 20px 10px 10px; /* see impact of padding */
margin-bottom: 5px;
margin-top: 5px;
}
#navbar_left {
width: 70%;
background: lightcyan;
float: left;
}
#navbar_right {
width: 30%;
background: lightcyan;
float: right;
}
</style>
<title>SideBySide navbar</title>
</head>
<!-- have tried setting the right margin in body as well, impacts left side and content, but not right side of nav bar -->
<body>
<!--Using this first div as a wrapper. The padding means that the Text flow does not start right at the top which happens when you have a fixed element-->
<div style="padding-top: 0px; padding-bottom: 90px;">
<div class="mymenus">
<nav id="navbar_left">
<div>
<ul>
<li> Item One</li>
<li> Item Two</li>
<li> Item Three</li>
<li> Item Four</li>
</ul>
</div>
</nav>
<nav id="navbar_right">
<div>
<ul>
<li> Item One</li>
<li> Item Two</li>
<!-- <li> Item Three</li> -->
</ul>
</div>
</nav>
</div>>
</div>
<div class="mytext>">
<p>ipsum Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ducimus sit repellendus dolorum corporis eius
adipisci quam! Voluptate cupiditate iure, rem molestiae corrupti odit nesciunt, culpa qui ut sequi quasi
eius?
</p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam facere itaque libero magnam natus nobis eum
unde. Libero numquam, ab debitis animi cupiditate assumenda pariatur delectus et voluptatem at vel. Lorem
ipsum
dolor sit amet consectetur, adipisicing elit. Quis excepturi voluptates ratione cupiditate expedita iusto
magnam
possimus aspernatur labore exercitationem earum repudiandae, cumque quae quam in eos esse asperiores a?
Lorem
ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima earum harum doloribus
quos
ut dolorum deleniti quam, tempora placeat sunt. Ad, culpa. Quam, expedita quisquam tenetur alias officia
ducimus
explicabo.
Nihil nam suscipit ab accusamus unde eos explicabo temporibus impedit, dolore voluptatibus et nulla ipsum,
rerum
eum amet enim dolor sint commodi asperiores deserunt consectetur provident. Sed unde nulla minima.
Quam unde illum quos! Cupiditate fugit debitis, blanditiis sapiente in similique maiores velit neque
repudiandae
officiis deleniti harum non tenetur nisi ea assumenda inventore numquam, necessitatibus illo. Quo,
reprehenderit
fuga?
Consequuntur, non! Nesciunt adipisci quibusdam nemo pariatur vero fugit voluptatem porro dignissimos sit est
ratione, exercitationem, odit corrupti magni blanditiis dolorem, deserunt repellat quas eius hic amet dicta!
Totam, consequuntur!
Suscipit earum, itaque dicta veniam vero, dolor in ipsa voluptatum facilis reprehenderit sed. Voluptates
quos
tenetur numquam, temporibus laboriosam ex consequuntur, nesciunt accusantium assumenda vel itaque, eius
minima
ad asperiores?
Accusantium nostrum, quo suscipit laboriosam nisi, perspiciatis beatae quibusdam, consectetur odit corporis
illum temporibus vero repellat sapiente in assumenda ab. Facere similique laborum odit neque explicabo
consectetur fuga ad quia.
Doloremque laudantium repellendus omnis amet quasi quisquam voluptatem inventore earum possimus,
exercitationem,
eius molestias officiis molestiae sed temporibus ea nisi. Asperiores dolore nam sint distinctio earum at
magni
voluptatem nobis.
Adipisci rem inventore, repellat autem recusandae aut quis molestiae non, consequuntur voluptate veniam!
Dolores, praesentium debitis. Sunt amet, atque voluptas similique quod vel, corporis laborum magni
consequuntur
dignissimos est iste?
Quam ex ratione assumenda repudiandae, suscipit eos id odio voluptate eum accusantium labore nihil optio quo
harum debitis laborum excepturi. Sed explicabo quibusdam obcaecati vero, aperiam sit earum. Officiis,
cumque!
Cumque nam odio exercitationem dignissimos similique facere magni maiores incidunt maxime ad explicabo,
dolor
recusandae tempore nihil dolore magnam repellendus dolorum eligendi libero esse labore sint aliquam minima.
Et,
atque! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, suscipit. Aspernatur facilis fuga
adipisci! Sed aut est, culpa quae corporis repudiandae, iusto quas facere rem minima dolores accusantium
fugiat
alias!
Debitis odit corrupti id assumenda possimus, consequuntur inventore! Consequuntur eius tempore odio autem
laudantium, nihil architecto, molestiae aspernatur, ducimus itaque excepturi vitae? Suscipit animi officia
minima rem enim aspernatur modi.
Dignissimos tenetur ad recusandae repudiandae deserunt nihil commodi delectus labore, sint minima tempora,
sapiente illo. Quo consequatur vero nisi, nemo facilis natus numquam eos dicta repellat reprehenderit rerum
adipisci excepturi!
Beatae, molestiae quis quo veniam sint porro voluptatibus ullam labore voluptatem in consequatur quae vero
deleniti alias! Ab ipsa, quas soluta cumque voluptatibus velit odio? Obcaecati ex architecto ipsa quod.
Unde veniam quae aut corporis consequatur inventore explicabo dicta animi molestias. Debitis eius maiores
molestias, eveniet, adipisci qui autem cumque repellendus tempore laudantium quas eum dolore quis aliquid!
Eos,
magni.
Eligendi nam at debitis natus laboriosam nemo placeat quibusdam esse facere, nisi ratione doloremque fuga
sequi
magni nobis ipsam a, tempore odit dolorum? Esse odio illo veritatis doloremque error qui!
Odit perspiciatis velit nisi at ipsam nobis doloremque voluptates incidunt minus corporis sed ex deleniti
fugit,
repudiandae error quia consequatur, provident est reiciendis facere modi minima sunt temporibus nam.
Provident.
Inventore tenetur eaque est qui, perferendis magnam nihil doloremque omnis, nulla recusandae, eum voluptas
harum
cupiditate sint officia quidem non. Animi asperiores consequuntur autem earum quod minus aut sint non.
Qui tempore sapiente, ab, ipsa cupiditate porro id odit, harum nemo accusamus quisquam excepturi culpa.
Laboriosam, doloribus. A dolore unde non nesciunt sapiente necessitatibus quam, at assumenda itaque quia
deserunt?
In accusantium deserunt aspernatur. Sit eos doloremque quae non recusandae cupiditate, sequi quaerat, magni
quia
odit, culpa vero molestiae deleniti perferendis provident officia voluptatum quos temporibus dolorem maxime
dolores ad.
</p>
<p>ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae impedit voluptatibus soluta
reprehenderit.
Atque corporis odio nam repellat ratione nostrum placeat nobis, ex eaque eius ab earum consequuntur tenetur
corrupti.
Recusandae necessitatibus modi porro voluptas, quasi natus eaque nisi. Commodi est vitae accusantium. Dolor
officia provident dignissimos totam. Excepturi mollitia, omnis non illum iusto numquam quisquam deleniti
sequi
nam eius!
Fugit ab soluta non, corporis quisquam numquam minus incidunt similique hic necessitatibus repellat error
tempora, nam atque labore. Ab sequi magnam provident laudantium molestias, eius est inventore consequatur
consequuntur sed!
Exercitationem blanditiis accusantium nam commodi hic quos voluptatibus, reiciendis ea quae aspernatur alias
suscipit corporis odio quidem earum accusamus quia numquam eum temporibus eius libero fuga. Quasi
praesentium
modi itaque!</p>
</div>
</body>
</html>
The left and right nav bars combined take up 100% of the screen. The border is on the outside of the nav bars. The border takes up slightly more room. An example: border: 500px solid black
The above code will take up 500px outside of it's element on all four sides. The only difference between margin and border is with margin you can have a different value on all four sides of the element and with border the value is the same on all four sides.
In conclusion if you desire to fit the border on the screen consistently use a global constant like vw(view width) for the nav width and the border size.Or you could change left to 70% and right to 29% like you did. The only problem with this is that theoretically if the screen got small enough the border on the right wouldn't be on the screen. But it is unlikely that the screen will ever get that small.
I am designing a code documentation webpage having a similar design like stackoverflow. I am listing the details below:
fixed header
sticky sidebar.
The sidebar is an anchor menu linking to each section header.
The problem is that when I click on a link, the page jumps to the corresponding section, but the header is hidden behind the fixed header.
* {
margin: 0;
}
header {
position: fixed;
padding: 1em;
width: 100vw;
background-color: #ccc;
}
main {
padding-top: 6em;
width: 700px;
margin: auto;
}
section {
margin-bottom: 3em;
}
<header>
<h1>Title</h1>
</header>
<main>
Click me to visit - Eaque, voluptatum tempore.
<section>
<h2>Lorem, ipsum dolor.</h2>
<br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore unde animi ratione inventore laudantium architecto nobis voluptates rem sed veritatis eaque eum id ab eligendi, ipsum earum a, fuga impedit consequuntur, iste officia voluptate commodi?
Asperiores illo repellendus earum laboriosam accusamus ex amet delectus quo voluptatibus, temporibus natus dolores praesentium dignissimos. Excepturi optio praesentium corrupti vitae ratione tenetur dolores voluptatem.</p>
</section>
<section>
<h2>Accusamus, saepe nam?</h2>
<br>
<p>Distinctio quo tenetur molestiae asperiores! Ratione tempore recusandae mollitia et maiores, veritatis in animi officiis consectetur, quo reprehenderit possimus porro maxime amet modi deserunt iste. Qui vitae quasi tenetur totam adipisci unde deleniti
commodi iure beatae recusandae esse, explicabo incidunt placeat. Nemo, dolore? Perferendis expedita omnis consectetur facilis enim voluptate ratione ad consequuntur minus, ea debitis, itaque quas fugit minima?</p>
</section>
<section>
<h2>Soluta, at officiis.</h2>
<br>
<p>Eum accusantium, rerum nulla, esse in quas consequuntur earum a culpa voluptates repellendus? In repellendus quasi quam, nesciunt, ullam adipisci autem reiciendis rem laborum eos repudiandae. Dolores quasi ducimus quis, iusto laborum nihil. Temporibus,
ratione iure sequi exercitationem voluptates id expedita ut quo repellat dolorum, officiis mollitia accusantium? Debitis, nobis. Quo exercitationem est impedit aliquam, a expedita saepe totam? Non.</p>
</section>
<section>
<h2>Mollitia, modi deleniti!</h2>
<br>
<p>Earum iusto nesciunt, rerum laboriosam velit, cumque perferendis accusamus laborum officia voluptates enim at quidem beatae. Asperiores soluta ullam aperiam suscipit tenetur officiis blanditiis cumque. Laboriosam ut itaque magni a voluptatibus, tenetur,
consequuntur temporibus rem obcaecati consectetur at laborum, hic perspiciatis aliquid voluptate excepturi minima voluptates eius iste. Possimus culpa sit expedita. Esse quos ipsum recusandae, unde laudantium repudiandae ipsa!</p>
</section>
<section>
<h2 id="link">Eaque, voluptatum tempore.</h2>
<br>
<p>Excepturi, fugit ipsam nesciunt neque harum a magnam adipisci eius velit. Dignissimos praesentium voluptatem laboriosam corporis minus soluta aperiam eius repellendus architecto pariatur vitae dolores ipsam consectetur eligendi optio fugit laborum
ratione aliquam provident tenetur explicabo qui, officiis veniam. Ipsum minima molestias quibusdam quos delectus voluptates. Et rerum quia modi? Corrupti corporis minus necessitatibus quod earum, cupiditate amet porro eveniet.</p>
</section>
</main>
How can I fix this so that the header is visible?
I am answering my own question since I found out a better solution to the problem.
So, to fix this, we can use the pseudo class :before.
.anchor:before {
display: block;
content: "";
height: 5em;
width: 0;
position: relative;
margin-top: -5em;
}
Why shouldn't we use padding?
Adding a padding to the top will solve the problem for some cases, but it may add too much white space. Whereas, using :before, we don't need to think about it.
The answer above is better. Use :Before.
Old answer:
Put this above your header:
<h1><a class="anchor" name="anchor">Bar</a></h1>
with these CSS:
.anchor { padding-top: $your amount of padding$ px; }
What is the best way to achieve this layout:
I believe that this HTML is good, I just need the CSS:
<div>
<header style="background:blue"></header>
<div>
<nav>
<header style="background:darkgreen"></header>
<ul style="background:green">...</ul>
</nav>
<div>
<header style="background:darkred"></header>
<main style="background:red"></main>
</div>
</div>
</div>
I've tried flexbox, but I'm finding myself doing weird css calc() to get the green and red div's to stretch to the bottom.
(I'm looking for a modern, solid way- not hacks)
I am not sure how to do with your HTML. And not sure what you mean by Holy Grail. I just did this, with semantic tags and which has no hacks, compatible over a range of browsers from Internet Explorer 7:
* {
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
body {
background-color: #fcc;
}
header {
position: fixed;
top: 0;
background-color: #66f;
left: 0;
right: 0;
height: 35px;
line-height: 35px;
}
aside {
position: fixed;
left: 0;
top: 35px;
width: 200px;
bottom: 0;
}
aside header {
position: absolute;
background-color: #f90;
}
aside .content {
position: absolute;
top: 35px;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
background-color: #fc6;
}
main {
margin: 40px 10px 10px 210px;
}
main header {
top: 35px;
left: 200px;
background-color: #f33;
line-height: 20px;
height: 20px;
}
<header>
...
</header>
<aside>
<header>
...
</header>
<div class="content">
<p>Content goes here...</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae unde, eligendi dolores laborum aliquid voluptatem ducimus adipisci dolorem quod ipsum corrupti soluta. Eveniet repellendus sed cumque, consectetur eum magni saepe!</p>
<p>Tenetur debitis nemo, itaque ipsa, eum tempore doloribus mollitia quas nulla accusantium unde officia rerum optio quasi a dicta error distinctio iusto, provident deleniti? Commodi perspiciatis qui ratione autem sequi.</p>
<p>Placeat saepe libero sunt cupiditate. Expedita molestias, error sequi mollitia consequatur iste aliquid deserunt deleniti repellat saepe vitae necessitatibus eum. Soluta nemo dicta fugit repellendus! Dignissimos, aliquid. Iusto, voluptatum, voluptatibus.</p>
<p>Sequi eaque officiis ab dolores aliquid, harum, nemo nam et deleniti quo aliquam, placeat, est natus iusto. Impedit assumenda ullam, tempore saepe rem adipisci, id ex, iste, dignissimos doloribus corrupti!</p>
<p>Illum nemo nihil, exercitationem autem ullam, aliquam dolorum inventore laborum quasi similique neque vero aliquid ad perferendis asperiores iusto? Quo autem recusandae, obcaecati iusto quas minus dicta reprehenderit magni quaerat.</p>
<p>Excepturi magnam rerum facere culpa a harum explicabo nostrum aspernatur. Molestiae voluptates exercitationem hic assumenda nesciunt fugit error nemo sapiente nihil consequatur illo omnis ipsum reiciendis, veniam rerum, eaque asperiores!</p>
<p>Iusto fugit mollitia, non deserunt assumenda nobis saepe id, dolorum cum culpa magni ea consectetur odio possimus facere velit voluptatum aperiam quibusdam hic, esse animi debitis. In qui cupiditate iste!</p>
<p>Eveniet nam vero maiores reiciendis totam pariatur magni tempora, rerum magnam ex, blanditiis a, odit labore consectetur ea modi minus dolore aspernatur voluptates. Magnam, hic sed omnis vel delectus? Eligendi.</p>
<p>Eveniet nesciunt laborum a officiis, numquam magnam, incidunt libero unde dolorum voluptatum, ducimus illo in eum reiciendis ad dolor eos consequuntur saepe ex repellat porro quae. Voluptatum architecto cupiditate officia.</p>
<p>Voluptate, voluptatem culpa explicabo distinctio obcaecati quia molestiae blanditiis optio quis nihil, ipsam similique molestias exercitationem quas itaque, dignissimos quisquam modi. Impedit et dolorum, laboriosam modi aliquam dolor quasi possimus!</p>
<p>Ad dolores consequuntur accusantium laborum, provident laudantium quas voluptatibus exercitationem distinctio adipisci, corporis, amet alias optio nisi! Doloremque incidunt debitis molestiae eius similique facere nobis libero esse temporibus quisquam,
aperiam?</p>
<p>Quis accusamus itaque adipisci modi perspiciatis provident suscipit assumenda totam quo placeat reiciendis, nulla ad aperiam nobis sint velit ducimus eos culpa cupiditate in, quod veritatis nihil ut quidem! Ab.</p>
<p>Consequuntur maiores quas alias labore architecto laboriosam nisi voluptatum impedit rem. Doloribus cumque, unde ducimus possimus, voluptate cupiditate veniam est, sequi, libero velit ipsa ab deleniti earum odio? Minus, earum.</p>
<p>Molestiae iusto placeat vitae mollitia maxime ipsa ad in praesentium quasi cupiditate temporibus doloremque numquam, veritatis esse et odio dolores rerum iure alias quis, quisquam, amet maiores. Sequi, eaque reprehenderit.</p>
<p>Qui hic voluptatum adipisci reprehenderit repudiandae, libero illum aliquam iure, dolores tempora, quo consequuntur odit. Exercitationem blanditiis sunt, ea consequuntur, incidunt dolor harum neque fugiat natus tempore assumenda, deleniti dolorem?</p>
</div>
</aside>
<main>
<header>
...
</header>
</main>
Preview
If you want using flex for that do this:
<div style="display:flex;flex-direction:column;height: 100vh;">
<div style="background-color:blue;height:50px;"></div>
<div style="background-color:red;flex:1;display: flex;">
<div style="background-color: green;flex: 1;">
<div style="background-color: darkgreen;height: 80px;"></div>
<div style="overflow-y: scroll;"></div>
</div>
<div style="background-color: red;flex: 2;">
<div id="navBar" style="background-color:darkred;height:40px;"></div>
</div>
</div>
</div>
Sorry my code is not clean.
I feel like this should be a really simple problem, but I can't seem to figure it out.
HTML:
<div class="outer">
<div class="inner">
<!-- lots of text -->
</div>
<div class="inner-bottom">
This text should be inside the blue background
</div>
</div>
CSS:
.outer {
height: 300px;
background: #99EEFF;
}
.inner {
height: 100%;
overflow: scroll;
}
.inner-bottom {
text-align: center
}
Fiddle
The goal is to have both inner divs display inside their parent, which has a background specified to visually organize them.
If I don't specify height: 100%; on .inner, it overflows, no matter which I set on the display property. In fact, some values of display even cause height: 100% to not work.
Anyway, I'd really like .inner's size to be dictated by .outer's size, rather than vice versa. How do I do this?
You can do this with Flexbox just use flex: 1 on .inner
body {
margin: 0px;
}
.outer {
height: 300px;
flex-direction: column;
display: flex;
background: #99EEFF;
}
.inner {
flex: 1;
overflow-y: scroll;
}
.inner-bottom {
text-align: center
}
<div class="outer">
<div class="inner">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis fugiat nulla asperiores rerum sed dignissimos vitae odit consectetur perferendis! Suscipit qui hic iste est tempora blanditiis odit distinctio odio quas amet. Fuga mollitia maxime labore non odio laborum ea facilis distinctio blanditiis exercitationem atque et, facere illo repellat praesentium inventore iure. Minus error expedita veritatis doloribus esse, at cum molestias odit saepe animi harum similique, dolore distinctio est a quidem beatae! Aliquam, similique autem ipsa vitae eligendi iure consectetur. Quasi, odio expedita consequatur, maxime, libero maiores incidunt quia debitis hic provident cum, deleniti? Illo id pariatur, recusandae tenetur! Beatae cum, fuga! Nulla animi deserunt molestiae eum quia dolorum necessitatibus quod eos saepe sint eaque id est cupiditate impedit, doloribus consequuntur ipsum maiores consequatur alias. Magnam accusantium ab quia laudantium iste eum nobis sequi error, atque suscipit repellendus officiis laboriosam alias eos ullam. At inventore quam ullam officia sequi, aliquam. Aperiam dicta eum illo tempora, quas doloribus ducimus sequi placeat, aut id quaerat iure officiis nostrum accusamus atque odio repudiandae saepe autem distinctio. Qui expedita cum animi totam maxime minima labore vitae reprehenderit eligendi porro odio, voluptatem obcaecati sint enim, velit dolores, dolore fugit incidunt sit. Doloremque suscipit, quia libero. Odit nihil beatae eaque suscipit aperiam hic tempore ipsam non quam doloremque, nesciunt voluptate laboriosam a animi assumenda iste velit sunt cumque minima. Quos perferendis, labore. Consectetur quod sequi commodi nesciunt suscipit, molestiae, quia est cum. Beatae nulla, suscipit ducimus nobis voluptas illum enim dicta distinctio similique aliquam sapiente impedit ea non corrupti omnis est obcaecati labore laboriosam quaerat tempora molestias sunt laudantium doloremque? Perspiciatis dolore, excepturi, voluptate nulla nam culpa nostrum dolor, rerum quas iure dolorem incidunt consequatur dolores dolorum laborum ipsam eaque quasi accusamus voluptatum voluptates quisquam. Perspiciatis maxime, assumenda itaque eligendi dolore iste libero debitis ea sint expedita eius illum blanditiis inventore officiis voluptates minima iusto fuga nulla veritatis quo deserunt ad quisquam. Cumque numquam nihil tenetur itaque obcaecati soluta, libero possimus dolore ipsa eum neque amet sunt ad sapiente quos quae deleniti voluptas illo molestiae. Nihil officiis, commodi fugiat architecto blanditiis! Atque neque numquam nobis voluptates accusantium libero tempore veniam fugit officiis alias soluta rem enim, totam aut eos, nam. Fuga labore fugiat, suscipit consequatur ipsum quia praesentium. Reprehenderit praesentium maxime, ea maiores repellat, facere architecto quasi vitae a hic similique impedit commodi dolor, quas necessitatibus saepe ipsum. Nulla distinctio corporis dolor praesentium eum laudantium, asperiores magni minus tempora, iusto veritatis fuga. Totam ratione incidunt, neque blanditiis iure corporis consectetur ea dignissimos nesciunt tenetur ab placeat, harum eaque laboriosam numquam quas ipsum! Earum aperiam, voluptatibus assumenda quisquam dolorem ut eius non provident numquam nostrum rerum, magnam voluptatum beatae quibusdam quasi ad consequuntur perspiciatis fugiat soluta ipsa excepturi! Earum, accusamus quidem! Quos, eaque inventore perferendis quia officiis tempore sequi repellendus incidunt quo, numquam aut mollitia, atque earum architecto. Harum ipsa debitis necessitatibus quos sapiente ad deleniti quod non nihil libero iure voluptatem, omnis possimus tempore eos recusandae! Provident modi nulla dicta, aut possimus dolores nesciunt officiis sunt! Sunt!
</div>
<div class="inner-bottom">
This text should be inside the blue background
</div>
</div>
Flexbox is the way to go here, but if you want a non-flex answer: If you are assigning 300px to the outer div then you can assign fixed pixel values to the inner divs. how big do you want them to be? You can do:
.inner {
height: calc(100% - (insert height of .inner-bottom));
}
Or you can just use percentages that add up to 100 for the height of both elements. Or you can just use pixels that add up to 300. Your call.
You can set the height of the inner element , that is the best way
.inner {
height: 275px;
overflow-y: auto;
}
Use a padding bottom to the parent element, that is 'outer' class.
.outer {
height: 300px;
background: #99EEFF;
padding-bottom: 30px;
}
The text in the inner-bottom is out of the blue background, because the .inner div takes up all available height in the .outer DIV.
If you set the height of the .inner DIV to less than 100%, there will still be some space for the .inner-bottom to fit in the .outer DIV.
So, changing
height: 100%
to for example
height:65%
in the .inner should work.
PS. You can change the 65% to any value less than 100% and it should still work properly.
I figured out a simpler, more dynamic, and more cross-compatible approach using tables.
HTML:
<div class="table">
<div class="tr greedy">
<div class="td">
<div class="scrollable">
<!-- Lots of text -->
</div>
</div>
</div>
<div class="tr">
<div class="td centered">
Text should be inside the blue box
</div>
</div>
</div>
CSS:
.table {
display: table;
height: 300px;
background: #99EEFF;
}
.tr {
display: table-row;
}
.td {
display: table-cell;
}
.scrollable {
max-width: 100%;
max-height: 100%;
overflow: auto;
}
.greedy {
height: 100%;
}
.centered {
text-align: center;
}
I created a container inside another container that has position:absolute and top:100%. This container is used to be some kind of fade-out-container, so it actually has no real content.
Now when this containers height exceeds the browser windows height, a scrollbar appears. And this is exactly what should not happen.
Instead I thought I could apply overflow:hidden on body or the parent container, but either too much gets cut off or the fade-out-container itself becomes invisible.
Please have a look at my fiddle and tell me what I'm missing. Thanks!
HTML
<header>
<h1>Demo</h1>
</header>
<footer>
<p>
The orange container wraps the blue one.<br/>The blue containers' height is meant to be cut off of the browser window meaning it's overflow should get hidden if the browser windows' height is insufficient.
</p>
<p>position: relative;<p>
<div class="append gradient">
<p>position: absolute;<br/>
top: 100%;<br/>
left: 0;<br/>
width: 100%;<br/>
height: 100%;</p>
</div>
</footer>
...
CSS
body {background: 333;}
header, footer, .append {
font-family: consolas, console, courier, arial, helvetica;
margin: 0 auto;
color: #FFF;
padding: 15px 30px;
}
header {
background: #666;
}
footer {
background: #F86;
position: relative;
height: 300px;
/*overflow: hidden;*/
}
.append {
background: #66F;
position: absolute;
top: 100%;
width: 100%;
height: 500px;
left: 0;
}
EDIT: updated fiddle, added inline code, added images
When you give top: 100% with a position: absolute, then you are actually sending it fully to the next page. I guess you are trying to make a modal-window, then you need to set it as:
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
The above code will over everything. The overflow: hidden is not applicable here, but when you are planning to show the modal window, or the overlay, it is best to use overflow: hidden to the <body>, so that the users will not be able to scroll and you can find the modal window.
Explaining the whole concept I said using a snippet here. Click the links to invoke the modal window. Click the opened modal window to hide it back. Scroll and see. Play around with it:
$(function () {
$("body > p").append(' Open Modal');
$("p a").click(function () {
$("body").addClass("modal-open");
return false;
});
$(".mask").click(function () {
$("body").removeClass("modal-open");
});
});
.mask {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: none;
background: rgba(0,0,0,0.5);
z-index: 999;
color: #fff;
font-size: 1.5em;
text-align: center;
}
.mask p:first-child {
padding-top: 5em;
}
.modal-open {
overflow: hidden;
}
.modal-open .mask {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="mask">
<p>Click the links to invoke the modal window.</p>
<p>Click the opened modal window to hide it back.</p>
<p>Scroll and see. Play around with it</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda vitae temporibus corporis, quisquam, doloremque excepturi itaque laborum ratione sequi aliquid atque rerum rem minima, aperiam laboriosam blanditiis alias ex quas?</p>
<p>Quam dolor, perspiciatis! Perspiciatis voluptatibus magnam ad hic sint, officia voluptates aut labore, excepturi quasi sed sit modi amet temporibus exercitationem laudantium veniam cumque omnis quo! Esse, quas! Harum, iure!</p>
<p>Illo optio alias amet ex consequuntur est autem itaque reprehenderit odit, laboriosam saepe ipsa harum eligendi sit cumque modi cum perspiciatis! Dolorum, alias nostrum asperiores velit atque perferendis voluptatibus. Maiores!</p>
<p>Cumque perspiciatis laudantium sequi itaque eos facilis illum repellat necessitatibus sunt recusandae rem, tempore blanditiis consectetur distinctio nostrum enim sit corporis non odio deleniti architecto. Corporis, nam assumenda. Quibusdam, perspiciatis!</p>
<p>Illum, quasi nisi animi. Expedita recusandae nam maxime architecto, illo a? Aspernatur numquam eveniet quisquam, inventore fugit amet voluptatem porro odio corporis obcaecati nostrum earum aliquam recusandae, sint necessitatibus rem.</p>
<p>Id praesentium vitae tenetur harum voluptate error adipisci dignissimos vero voluptatibus numquam quibusdam, nemo molestias alias aliquam, est, esse at fugiat quasi ducimus ratione! Inventore, eaque repudiandae sed magnam incidunt!</p>
<p>Aliquid in, veritatis ut! Veritatis, voluptatibus? Fugiat iusto officia repellat quasi dolore eum odio vitae inventore error debitis, doloribus facilis, itaque! Perspiciatis iste, incidunt hic non qui voluptate rem quidem?</p>
<p>Explicabo laudantium quidem, ab aperiam autem tenetur quae voluptatem quam, mollitia recusandae sapiente id, praesentium quasi soluta tempora dolorum, maiores velit. Porro unde doloribus iste, nihil ipsa, pariatur molestias aliquam.</p>
<p>Aut excepturi vitae dicta, quos distinctio, nulla, nostrum architecto, atque veritatis perspiciatis voluptates odio. Similique nobis sed natus illo esse, quod quas ex tenetur dolore deserunt optio voluptate numquam quo.</p>
<p>Repudiandae inventore consequatur nisi ad ut voluptas pariatur ducimus consequuntur, exercitationem tenetur ipsam nesciunt beatae nostrum soluta similique excepturi perspiciatis consectetur illum veniam aut hic, neque eveniet. Nesciunt quas, placeat?</p>
<p>Unde nam, aut placeat. Voluptas, consequatur, quis. Perferendis illum ratione in voluptate consectetur molestias nam hic, reprehenderit similique distinctio. Repellendus veritatis excepturi hic dicta fuga mollitia! Culpa dolores doloribus, ratione.</p>
<p>Vero cupiditate quaerat sit non veritatis harum nesciunt eos suscipit tempore dolorem porro saepe a, iusto vitae, voluptatum debitis consectetur voluptas, corporis. Sequi, sint odio eligendi delectus culpa dignissimos, obcaecati?</p>
<p>Ipsam sequi facilis magnam ad officiis quae, nobis iusto, commodi culpa optio a facere numquam placeat perspiciatis saepe maxime mollitia voluptatem sunt ipsa? Sequi ipsam, nostrum blanditiis dicta repudiandae iste!</p>
<p>Facilis tenetur officia quo delectus eius quam vel minus quas nesciunt ipsa perferendis, explicabo quasi itaque, rem vero accusamus debitis quis pariatur blanditiis illo nostrum eum! Molestiae fuga eius, illum.</p>
<p>Accusantium, repellendus soluta modi animi cumque error, nemo doloremque. Commodi voluptates distinctio nesciunt animi a, odio assumenda exercitationem amet reprehenderit libero expedita fugit. Id minus, corporis quibusdam cupiditate aut harum!</p>