Related
I have 3 divs inside one div.
I want my third div to be beside my first div and my second div to be under the first div.
please check this image:
I want something like this image:
I've used flex property and it works but my second div goes under the third one.
#container{
background-color: #fff;
padding: 50px;
display: flex;
flex-wrap: wrap;
}
#n1{
width: 20%;
order: 1;
height:150px;
background-color:yellow;
}
#n2{
width: 20%;
order: 3;
clear:right;
height:180px;
background-color:green;
}
#n3{
width:80%;
order: 2;
height:500px;
background-color:red;
}
<div id="container">
<div id="n1">
n1 text...
</div>
<div id="n2">
n2 text...
</div>
<div id="n3">
n3 text...
</div>
</div>
Please notice that:
I don't have access to HTML and I have to just use CSS
I can't use absolute position because the third div height is not fixed.
As an alternative to flexbox you can make the boxes float:
#container {
background-color: #fff;
padding: 50px;
}
#n1 {
float: left;
width: 20%;
height:150px;
background-color:yellow;
}
#n2 {
clear: left;
float: left;
width: 20%;
height:180px;
background-color:green;
}
#n3 {
margin-left: 20%;
width:80%;
height:500px;
background-color:red;
}
Fiddle: https://jsfiddle.net/9whj3rL6/3
If you want to use Flexbox to do this what you can do is set fixed height on flex-container and then use flex-direction: column. Then you just need to set red div to take full height and it will break to right column.
* {
box-sizing: border-box;
}
#container {
padding: 50px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
height: 500px;
}
#n1 {
width: 20%;
height: 150px;
background-color: yellow;
}
#n2 {
width: 20%;
height: 180px;
background-color: green;
}
#n3 {
width: 80%;
flex: 0 0 100%;
background-color: red;
}
<div id="container">
<div id="n1">
n1 text...
</div>
<div id="n2">
n2 text...
</div>
<div id="n3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias fugiat, aspernatur harum tempora repellat itaque explicabo facere impedit cumque ipsum ducimus sunt, officia autem, sit alias mollitia modi suscipit atque voluptatibus necessitatibus exercitationem! Voluptate veritatis sint facere ratione dolore, itaque mollitia quod tempore fuga beatae quis, velit reiciendis odio consectetur, voluptatem consequuntur consequatur reprehenderit suscipit autem ipsum ullam dolor modi. Adipisci aut voluptatibus architecto quo est voluptatem necessitatibus quia, voluptates quaerat commodi, perferendis minus! Quos eligendi dolore sapiente id iste reiciendis ab minus esse, excepturi, expedita vitae labore dolorem non atque maiores perspiciatis omnis adipisci! Natus qui quas obcaecati sapiente. Nesciunt veniam commodi quia dolor fugit sapiente repellendus reiciendis odio facilis iste expedita impedit maiores, voluptatibus doloribus optio quidem, tempora sequi magni quo. Cum amet magni, distinctio pariatur, cupiditate dignissimos veniam blanditiis laboriosam alias sunt deserunt et reiciendis perferendis consectetur natus. Voluptatum maiores omnis nihil delectus non aliquam possimus inventore quos tempore! Vel earum sit molestias ipsa, neque commodi delectus distinctio expedita hic esse ratione tempora animi provident officia vitae fugit libero quam explicabo nam qui, alias reiciendis aliquam suscipit beatae. Corporis nihil asperiores doloremque perferendis, rerum impedit incidunt, sequi vero cumque, officia tenetur! Alias sapiente enim ad reprehenderit, nulla aliquam consectetur expedita officia itaque error asperiores commodi quae sed provident minus libero. Assumenda, excepturi. Cum deserunt, eaque sequi. Nemo saepe, quas molestiae quibusdam ipsum at ducimus. Esse repellat nihil ipsa eaque, nobis facilis sint eius consequatur harum, neque maxime reiciendis consectetur, nostrum cupiditate laudantium non quisquam labore quas, iste porro nam perspiciatis hic voluptatem. Atque expedita dignissimos illo dolorum facilis impedit! Et molestias ut veniam! Provident perferendis, ex ipsa magnam, ipsum delectus. Unde, laudantium sunt nulla ad id doloribus minima molestias, pariatur nostrum consequuntur atque alias accusamus asperiores ullam labore voluptatibus repellat quod. Eaque dolor, nostrum labore, fugiat in repellendus expedita modi quia, libero dolore quam soluta repudiandae cupiditate rerum voluptates! Earum architecto mollitia debitis dolore excepturi consequuntur incidunt provident ab non dicta nobis, asperiores, rerum quis odit, eaque eius natus ea impedit esse accusantium id! Illum necessitatibus, rem dolorum! Itaque nobis eos, magni repellat ducimus harum accusantium facere, necessitatibus, iste laudantium quasi! Libero veritatis mollitia repellendus eum facilis possimus nihil dignissimos praesentium ea? Alias aliquid fugit magni animi incidunt porro dolorem, sapiente omnis sunt illo. Ipsum debitis, soluta aliquid assumenda distinctio illum ab! Nulla eos, sunt praesentium accusantium architecto, maiores nostrum. Itaque quibusdam nulla, reiciendis quo adipisci corrupti.
</div>
</div>
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
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>
I have just been playing around in FF32 & Safari 7, with position: sticky. And it works perfecly with top: 0px or left: 0px (to stick horizontally), but it doesn't seem to work when I try bottom: 0px or even better, combine bottom: 0; left: 0 it doesn't set itself to the bottom of the element. This behaviour could be tried out here: http://html5-demos.appspot.com/static/css/sticky.html, by simply changing the top: 10px attribut to bottom: 0. Is that not supposed to work?
I think it is a valid use-case to stick something to the bottom in the same way as one would want to stick something to the top.
In our case it is, because I am interested in having something sticky on horizontal scroll, but I want this element to be at the bottom of the parent element.
Anyway, any suggestions and extra info are welcome.
position: sticky;
bottom: 30px;
does work. Keep in mind sticky elements are relative to their parent.
http://codepen.io/corysimmons/pen/QyBMXN?editors=1100 (in Firefox)
In this case, <section> (the blue area) is the parent.
It does not work with Stickyfill though https://github.com/wilddeer/stickyfill#what-it-doesnt
I suggest you play around with it for a bit longer til you get the hang of it.
Let me know if you need a JS plugin that will behave like position: sticky without having to use position: sticky (can't wait for browser support or a stronger polyfill though).
The way to think about an element with position: sticky is as follows:
"The item that has position: sticky shall always remain in its normal place inside its parent, UNLESS said normal place goes outside of the viewport, in which case sticky item should become fixed relative to the viewport. All bets are off if the parent container also leaves the viewport, in which case the sticky items gets scrolled away with it".
This Codepen illustrates it really well. Notice how the red box stays in its normal place as long as the parent blue box is in normal view. However, when you scroll such that the red box starts to go out of the viewport, it gets fixed. Finally when the blue parent gets scrolled out of the view entirely, the red box also disappears.
* {
box-sizing: border-box;
}
body {
height: 3000px;
padding: 3rem;
}
section {
background: dodgerblue;
color: white;
line-height: 1.5;
padding: 30px;
}
div {
display: block;
width: 100px;
height: 100px;
background: tomato;
position: sticky;
bottom: 30px;
}
<section>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt. Numquam voluptate, velit quisquam ipsa molestias laudantium odit reiciendis nisi corporis voluptatibus, voluptatum sunt natus, accusantium magnam consequatur fugit officiis minima voluptatem consequuntur nam, earum necessitatibus! Cupiditate ullam repellendus, eius iure voluptas at commodi consectetur, quia, adipisci possimus, ex mollitia. Labore harum error consectetur officiis aut optio, temporibus iste nobis ducimus cumque laudantium rem pariatur. Ut repudiandae id, consequuntur quasi quis pariatur autem corporis perferendis facilis eius similique voluptatibus iusto deleniti odio officia numquam tenetur excepturi, aspernatur sunt minima aut fugiat ipsam. Ea nesciunt, amet fugit facere similique dolor nam tempora perferendis aut fugiat non, ex pariatur excepturi odio aspernatur libero saepe ducimus rem magni cumque. Laboriosam nisi fuga accusantium quos qui? Maiores ratione aliquam eos odio eius molestiae nesciunt exercitationem dolor perspiciatis quam. Necessitatibus rem nihil ad culpa, tenetur iusto consectetur rerum, delectus neque? Error, quas, eaque! Quibusdam voluptas expedita possimus consequatur accusantium distinctio, esse quisquam, ipsa blanditiis, officia perferendis et? Iste, nam optio vero earum tenetur voluptatibus modi a, odit aliquid eos corporis nulla saepe vel neque voluptate ratione, facilis quo sed nisi voluptates nostrum dolor. Non mollitia dignissimos laudantium quos libero nisi, nobis harum, asperiores soluta reprehenderit doloremque ipsa id unde voluptates beatae deserunt. Minima repellendus ipsam molestias veritatis pariatur nobis nihil, alias quasi, esse, aspernatur saepe beatae, hic consequatur. Sit sequi, libero quisquam quibusdam fuga tempore ab molestiae praesentium, necessitatibus, vero odio ullam qui non totam voluptas reprehenderit ad neque voluptate. Nam atque impedit ducimus, dolore reiciendis delectus inventore beatae cumque. Magni, id quos officiis soluta consequatur nam quis, modi fugit adipisci vel autem dolorum iusto cumque, libero reprehenderit amet doloremque voluptatem sunt sapiente reiciendis omnis, similique nulla enim. Autem repellendus, illo eveniet recusandae quae quibusdam itaque, delectus, consequatur provident vitae vero magnam repudiandae fugit, placeat sapiente! Omnis, possimus natus obcaecati sunt harum impedit, veniam quae numquam cum eos. Suscipit nihil totam itaque odio assumenda nemo? Eos iusto voluptas, consectetur sit totam velit fuga ea impedit laboriosam, dignissimos neque ipsum! Nostrum, recusandae. Autem sit aperiam culpa neque quaerat, voluptatibus repellendus. Magnam voluptatem illo quidem sapiente, nemo neque temporibus unde harum mollitia sit dignissimos eligendi accusantium, deserunt numquam, recusandae aperiam iure vero tenetur ea suscipit. Necessitatibus vel, omnis praesentium pariatur officia! Odio maxime dolor vitae ab deleniti et accusantium, iure molestiae eaque soluta sequi, autem, quae ex labore hic dicta temporibus quibusdam animi modi qui necessitatibus nulla. Perspiciatis molestiae architecto culpa quaerat amet fuga, fugiat laboriosam tempore at adipisci, tempora laborum ducimus alias corporis beatae dolor repellendus reiciendis aut cum. Quos enim quae dolores voluptates deleniti est eum beatae impedit unde quidem cumque, labore, quod a asperiores tempora vel blanditiis? Facere corporis mollitia vitae! Exercitationem esse perferendis, et aliquid iste saepe, quos, qui dolore est facere porro. Sapiente nesciunt, ad nostrum hic optio omnis libero autem minus eius, perferendis numquam adipisci corporis nisi ipsa assumenda possimus repudiandae distinctio vel accusamus quam animi esse eos natus pariatur. Molestiae in temporibus ipsum, eveniet itaque minus facilis magnam corporis amet, aspernatur ducimus iste quis numquam laudantium saepe optio nam nisi dolore necessitatibus perferendis hic non ea labore. Impedit rerum laudantium amet aperiam. Debitis tenetur veniam molestiae ab labore maxime incidunt iste commodi recusandae, adipisci obcaecati, molestias placeat aperiam atque, dolorum facere quae nesciunt. Facere aspernatur dolore consequatur tempora veritatis qui et eos quo voluptatum ipsum nemo rerum debitis nostrum, atque ratione aliquam nulla cumque aperiam officiis? Corporis a sunt, quis vel, quae molestias vitae recusandae magni! Nostrum animi totam dolore nemo voluptatem? Nihil consequuntur corrupti quaerat quis dolorum! Culpa, at quibusdam, saepe quas accusamus sequi tempore molestiae perferendis error fugiat, in totam laboriosam. Mollitia necessitatibus eius nisi, blanditiis rem commodi doloremque dicta, hic cumque quod possimus, obcaecati nesciunt deserunt. Vel id quas aliquam, fugiat repellendus perferendis voluptate consectetur deleniti cumque harum odit dolores ducimus facere? Mollitia qui dolore ut quod facere, recusandae repellendus debitis minus aliquid delectus inventore numquam ipsam fugit doloribus, voluptatum, earum eveniet ipsa, impedit fuga! Illo ipsa dolor id enim facere ipsam similique consectetur porro sequi ea perspiciatis soluta provident, ex amet nulla quos sit. Rerum nam, odit dignissimos! Delectus, corporis perspiciatis magni tempore praesentium dolorem magnam architecto earum animi, vero, obcaecati alias distinctio quae eligendi eos doloremque assumenda. Neque temporibus doloremque, natus deserunt ipsam repellendus. Dolorum consequuntur culpa esse modi adipisci, rem natus at fuga id, architecto delectus! Culpa quaerat nulla magnam sint repudiandae, impedit quisquam iure illum, natus at nesciunt fuga obcaecati excepturi fugiat ea sed repellendus repellat aliquid vel, sunt dolores quae. Omnis nulla soluta natus consequuntur tempore, in esse autem reprehenderit cum totam fugit voluptate libero hic asperiores perspiciatis a, odio voluptatibus non alias inventore delectus impedit praesentium doloribus. Veritatis qui adipisci quisquam voluptates, similique consequatur repudiandae dignissimos accusantium rerum beatae fuga inventore. Sequi soluta maxime facere laudantium sint quae ab, dolores provident doloremque maiores quo eaque commodi veritatis, eligendi illo ipsum. Suscipit, veniam, cumque quidem, distinctio debitis magnam nesciunt dolore reiciendis minus accusantium quod ullam eaque magni. Adipisci debitis a, repellat suscipit doloribus officiis asperiores vero veritatis aliquam praesentium nihil corrupti, ipsam. Quae esse hic fugit, in harum illum laboriosam odio mollitia at dolor nam quisquam aperiam quidem error vero voluptatibus, quos dolorem ratione odit illo libero unde sunt distinctio rerum! Repellat omnis dolorum fuga dolor, molestias earum. Iure, repellendus quae nostrum temporibus odio ad. Nihil quidem enim unde nesciunt, velit esse eveniet nisi architecto ad perferendis obcaecati eum iste ipsum eligendi ut necessitatibus veritatis officiis minus non laborum. Tempore explicabo nostrum nihil. Sed eius, iure nisi saepe. Neque eaque, consectetur nostrum aliquam amet praesentium, dicta excepturi ducimus voluptatibus illum consequatur, rerum veniam omnis eos enim. At asperiores, soluta sapiente amet. Ipsum in sint iusto, cumque possimus iure quia fugiat. Facere ratione consequuntur deleniti nisi, nostrum esse. Et amet deserunt unde aliquid, magni, incidunt fugiat illo neque consequatur eum cum, alias repellendus odit voluptate. Hic ducimus, quidem, excepturi delectus rerum placeat illo exercitationem nesciunt natus voluptatum modi sequi consectetur praesentium quae eaque mollitia! Architecto excepturi atque, molestias natus.
</p>
<div></div>
</section>
If you know the height of the sticky element then you can use something like this:
.sticky-element {
position: sticky;
top: calc(100vh - 50px);
}
This would also work with Stickyfill. Not sure about browser support though.
body {
min-width: 600px;
min-height: 400px;
}
.container {
background-color: #9588c170;
/* , */
position: absolute;
width: 100%;
height: 100%;
/* overflow: scroll; */
overflow: auto;
}
.sticky {
width: 300px;
height: 200px;
background-color: #9588c1;
/* , */
position: sticky;
left: 1000px;
top: 900px;
}
<div class="container">
<div class="sticky">div</div>
</div>
.sticky-container {
position: sticky;
top: 100vh; // push it to the bottom from top
transform: translateY(-100%); // move it up again depending on its own height
width: 100%;
background: white;
padding: 20px 0;
}
with the following html:
<div id="bottom-left">I'm in the bottom left!</div>
and the following css:
#bottom-left {
width: 250px;
height: 250px;
color: #fff;
background-color: #000;
position: fixed;
bottom: 0;
left: 0;
}
you should have a sticky div in the bottom left corner of the page
Example: http://jsfiddle.net/wjxws9hy/