I have a page with an image that takes the full height of the browser window, a column with text on the right side and a footer.
With full screen size the footer sticks at the bottom but it doesn't any more when the screen size is reduced as shown on the picture below.
How could I make the footer stick at the bottom in this configuration, and as a bonus, maybe how could the footer not hide a part of the text on the right side column when using large screens?
JSFiddle:https://jsfiddle.net/bb61c412/273/
And corresponding code:
.navbar {
background-color: #FF0000;
opacity:0.7;
border: 0 !important;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
html, body {
height: 100%;
}
body {
margin: 0;
padding-top: 50px;
}
.fill {
min-height: 100%;
height: 100%;
}
#picture{
height: 100%;
background-image: url("http://uploads2.wikiart.org/images/paul-gauguin/road-in-tahiti-1891.jpg");
background-repeat: no-repeat;
background-size:cover;
background-position: bottom center;
}
#right-column{
overflow-y : scroll;
background-color:#E8E8E8 ;
height: 100%;
}
#footer{
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 30px;
background-color: #FF0000;
opacity:0.7;
}
<link rel="stylesheet" type="text/css" href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" />
<div class="navbar navbar-default navbar-fixed-top ">
<div class="container">
<div class="navbar-header">
</div>
</div>
</div>
<div class="container fill">
<div class="col-sm-8" id="picture"></div>
<div class="col-sm-4" id="right-column">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie augue ac aliquet gravida. Vestibulum molestie euismod posuere. Nam posuere nulla sed nisl cursus fermentum. Aenean lobortis libero sodales purus fringilla placerat. Duis commodo ornare venenatis. Cras euismod arcu vel vehicula elementum. Vivamus vestibulum a lorem vitae posuere. Pellentesque faucibus vehicula auctor. In aliquam viverra fermentum. Aliquam dapibus nibh et magna laoreet, dignissim feugiat turpis eleifend. Aliquam porta fringilla elementum. Integer ut pellentesque ipsum. Nunc et purus vitae dui placerat pellentesque. Phasellus egestas diam ut eleifend lobortis. Nulla ultricies pulvinar ante et elementum.
<p>
</div>
</div>
<footer id="footer"></footer>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Please find the solution in the below link
https://jsfiddle.net/wwut6apr/1/ position:fixed
You have to add position: fixed instead of absolute for the footer.
For you to read the bottom text on the right side bar, add a padding bottom of 30px to your right-column.
Thanks
You need to wrap the content above your footer, and add a push div to make the footer stick to bottom.
Modified fiddle
It is explained here : http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
Related
I have a design here that is part of a website footer.
https://ibb.co/mBRpx7Y
The website has a box kind of layout with a dark background. But in the footer, at the bottom right corner, there is an extra image pattern comes which will overlap the content section and also covert the background part.
Right now, I used CSS to achieve this by adding two background images. The image position is correct but the image pattern does not appear on the white container because it is not transparent. Is there any way to achieve this?
Here is the sample code of what I have right now:
body{
background-image: url(https://www.nicepng.com/png/full/10-102760_dot-background-png.png),url(https://images.unsplash.com/photo-1508615070457-7baeba4003ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80) !important;
background-size: auto, cover!important;
background-position: right bottom, left top!important;
background-repeat: no-repeat!important;
background-attachment: scroll, scroll;
}
.container{
max-width: 1500px;
margin:0px auto;
}
.section1{
min-height:200px;
background: #b0f3ff;
padding:50px;
}
.section2{
min-height:150px;
background: #fff;
padding:50px;
}
<div class="container">
<div class="section1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et mi ante. Etiam gravida tincidunt magna vestibulum rutrum. Phasellus a libero vulputate, malesuada nunc non, efficitur leo. Fusce porttitor nisl in fringilla lacinia. Fusce a sem sagittis enim imperdiet pretium at a diam. Aliquam et lacus quis augue sodales venenatis eu id justo. Phasellus et blandit felis. Proin in purus lectus.
</div>
<div class="section2">
Terms and Conditions
Privacy Policy
©2021 All rights reserve
</div>
</div>
You can use pseudo element on body e.g.: body:after {}. Make it absolute to bottom right corner and add this dotted background to it instead of on body.
body {
background-image: url(https://images.unsplash.com/photo-1508615070457-7baeba4003ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80);
background-size: cover;
background-position: left top;
background-repeat: no-repeat;
background-attachment: scroll;
position: relative;
margin: 0;
}
body:after {
content: '';
background-image: url(https://www.nicepng.com/png/full/10-102760_dot-background-png.png);
width: 380px;
height: 384px;
position: absolute;
bottom: 0;
right: 0;
}
.container {
max-width: 1500px;
margin: 0px auto;
}
.section1 {
min-height: 200px;
background: #b0f3ff;
padding: 50px;
}
.section2 {
min-height: 150px;
background: #fff;
padding: 50px;
}
<div class="container">
<div class="section1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et mi ante. Etiam gravida tincidunt magna vestibulum rutrum. Phasellus a libero vulputate, malesuada nunc non, efficitur leo. Fusce porttitor nisl in fringilla lacinia. Fusce a sem sagittis enim imperdiet pretium at a diam. Aliquam et lacus quis augue sodales venenatis eu id justo. Phasellus et blandit felis. Proin in purus lectus.
</div>
<div class="section2">
Terms and Conditions
Privacy Policy
©2021 All rights reserve
</div>
</div>
Is this the kind of effect you're looking for?
.container{
max-width: 1500px;
margin:0px auto;
position: relative;
}
.section1{
min-height:200px;
background: #b0f3ff;
padding:50px;
}
.section2{
min-height:150px;
background: #fff;
padding:50px;
}
.section3 {
background-image: url(https://www.nicepng.com/png/full/10-102760_dot-background-png.png),url(https://images.unsplash.com/photo-1508615070457-7baeba4003ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80) !important;
background-size: auto, cover!important;
background-position: right bottom, left top!important;
background-repeat: no-repeat!important;
background-attachment: scroll, scroll;
width : 100%;
height : 100%;
z-index : 2;
opacity:0.5;
bottom:0;
top:0;
position: absolute;
}
<div class="container">
<div class="section3" ></div>
<div class="section1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras et mi ante. Etiam gravida tincidunt magna vestibulum rutrum. Phasellus a libero vulputate, malesuada nunc non, efficitur leo. Fusce porttitor nisl in fringilla lacinia. Fusce a sem sagittis enim imperdiet pretium at a diam. Aliquam et lacus quis augue sodales venenatis eu id justo. Phasellus et blandit felis. Proin in purus lectus.
</div>
<div class="section2">
Terms and Conditions
Privacy Policy
©2021 All rights reserve
</div>
</div>
is it possible for a child inside a div to push down other divs outside based on its own height?
Given this simple HTML:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app">
<div class="main-section">
<div class="main-form">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget
sollicitudin urna. Duis congue mattis risus nec volutpat. Cras ut
risus et diam luctus consectetur. Phasellus aliquam dui nec vehicula
convallis. Donec sit amet nunc lacus. Praesent eget elit commodo,
ultricies felis non, tristique ex.
</div>
</div>
<div class="about-section">Hello World</div>
</div>
<script src="src/index.js"></script>
</body>
</html>
I have this CSS here, there are basically two divs (main-section and about-section) and the main-form is inside the main-section:
.main-section {
background-color: red;
padding: 10px 0 0 10px;
height: 100px;
min-width: 100%;
/* display: table; solution 1*/
/* overflow: auto; solution 2, it cuts off the yellow div, which is not the desired outcome */
}
.main-form {
background-color: yellow;
width: 120px;
min-height: 180px;
/* display: table-col; solution 1*/
}
.about-section {
background-color: blue;
}
The height of the parent .main-section should be fixed at 100px.
The height of the child .main-form varies depending on the length of the text on it, but should have a min-height of 180px.
The width of the .main-form should be fixed at 120px.
I have tried changing the overflow property of the parent but it cuts off the child element.
I have also tried using the display: table on the parent and display: table-col on the child, but this solution adjusts the height of the parent element.
Here is a code sandbox: https://codesandbox.io/s/romantic-wave-29f5f?fontsize=14&hidenavigation=1&theme=dark
Is there a way to do this?
Basically what I wanted to achieve looks something like this:
float and clear can do the job:
.main-section {
background-color: red;
padding: 10px 0 0 10px;
height: 100px;
}
.main-form {
background-color: yellow;
width: 120px;
float:left; /* here */
min-height: 180px;
}
.about-section {
background-color: blue;
clear:left; /* and here */
}
<div class="main-section">
<div class="main-form">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget sollicitudin urna. Duis congue mattis risus nec volutpat. Cras ut risus et diam luctus consectetur. Phasellus aliquam dui nec vehicula convallis. Donec sit amet nunc lacus. Praesent eget
elit commodo, ultricies felis non, tristique ex.
</div>
</div>
<div class="about-section">Hello World</div>
I'm making a div that needs to be fixed, 100% height and vertically center aligned. And it has to be done with Bootstrap 4. I've managed all of that, except adding padding. Whenever I add padding to the child div, the content goes offscreen. I've even tried
overflow-y: scroll
hoping it'll fix it, but nothing happens.
Because the code snipped is not showing everything as it should on here, here's a codepen link.
Can someone please take a look at my code and let me know what I did wrong?
.card {
color: #fff;
background: tomato;
position: fixed;
min-height: 100%;
/* height: 100%; */
width: 340px;
right: 0;
top: 0;
overflow: scroll;
}
.card-block {
padding: 100px;
margin: auto;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="card rounded-0 d-flex justify-content-center">
<div class="card-block align-self-center">
<h1>This is a title</h1>
<h5>This is a subtitle</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in laoreet neque. Praesent tincidunt justo a magna tempor vulputate. Phasellus euismod feugiat sem. Nam tempus nec nisl id viverra. Cras blandit erat mauris. Cras non commodo quam. Mauris
auctor ligula vitae erat mollis, quis convallis diam consequat. Nullam ac magna vitae lorem elementum vehicula nec rhoncus nisl. Nullam dignissim at nunc a congue. Sed fringilla pulvinar consequat. Curabitur interdum, nunc in finibus auctor, tortor
libero facilisis felis, id maximus nibh ex eu nunc. Nunc in molestie lorem, bibendum maximus ipsum. Vestibulum ac finibus risus.</p>
This is a button
</div>
</div>
Just add bottom:0 to your class card-block
You need to add the properties just to card-block and not card
.card-block {
padding: 0px 40px;
margin: auto;
color: #fff;
background: tomato;
position: fixed;
width: 340px;
top: 0;
bottom:0;
right: 0;
overflow-y: scroll;
}
Feel free to change padding,margin and width. As they will still keep the scrolling intact.
Check this CODEPEN
so i'm confused as to why my footer section is hidden. I assume it is because the body is set to overflow: hidden, but it needs to be this way in order for the off-canvas menu to work. If I remove overflow: hidden on the body then the menu bar disappears when scrolling. I just don't understand why the footer section isn't showing since it is inside of the body element. Any ideas how to fix this problem?
Here is a JSFiddle:
https://jsfiddle.net/b18wmdzg/
Html
<body>
<div class="container">
<div class="menu-wrap">
<nav class="menu-top">
</nav>
<nav class="menu-side main-navigation" id="site- navigation">
Home
page 2
page 3
</nav>
</div>
<div class="menu-bar">
<button class="menu-button" id="open-button">menu</button>
<button class="nav-2">Contact</button>
<button class="nav-2">Case Study</button>
</div>
<div id="content" class="site-content content-wrap">
<div class="dummy-content">
<p>hoaubobaowbeobafohweofhwohfowuheofhowehfowhohfohwfohohohohohohohohoh</p>
</div>
</div>
<footer class="site-footer">
<p>dhooabobaweobofeobweh</p>
</footer>
</div>
`
CSS
html, body {
overflow: hidden;
width: 100%;
height: 100%;
background: #2a3032;
}
.container {
height: 100%;
}
.menu-wrap {
position: fixed;
font-weight: 700;
opacity: 0;
-webkit-transition: opacity 1s;
transition: opacity 1s;
}
.main-navigation {
background: none !important;
width: 240px !important;
clear: both;
display: block;
float: left;
}
.menu-bar {
width: 100%;
height: 6rem;
}
.container > .content-wrap {
background: #f8f7ee;
}
.content-wrap {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.container, .content-wrap {
height: 100%;
width: 100%;
}
.dummy-content {
height: 1000px;
}
footer.site-footer {
height: 400px;
width: 100%;
background: black;
}
overflow: hidden means that anything beyond the bounds of the element is hidden; no scrolling. In this case, the html and body elements default to the dimensions of the window, and your footer is beyond those dimensions, so it is cut off.
My suggestion is that if you want your navigation bar to remain at the top of the screen, you give it a fixed position:
html, body {
background: #2a3032;
}
.menu-bar {
width: 100%;
height: 6rem;
position: fixed;
top: 0;
left: 0;
background: #2a3032;
z-index: 10;
}
.site-content {
background: #f8f7ee;
}
#content {
margin-top: 6rem;
}
.dummy-content {
height: 1000px;
}
footer.site-footer {
height: 400px;
width: 100%;
background: black;
color: #fff;
}
<body>
<div class="container">
<div class="menu-bar">
<button class="menu-button" id="open-button">Menu</button>
<button class="nav-2">Contact</button>
<button class="nav-2">Case Study</button>
</div>
<div id="content" class="site-content">
<div class="dummy-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec congue magna. Sed ullamcorper velit id dolor congue convallis. In massa est, gravida a eros vitae, ornare aliquet nunc. Mauris elementum enim ut dapibus scelerisque. Etiam luctus orci id quam congue finibus. Proin consequat dapibus porttitor. Etiam pretium consectetur nibh non porttitor. Donec in leo sit amet neque cursus sagittis nec vel est. Morbi metus libero, suscipit in fringilla nec, molestie ut diam. Sed rutrum magna vitae orci pellentesque, non feugiat nibh sollicitudin.
<p>Aliquam eget efficitur eros, eu egestas mauris. Morbi vel vehicula arcu. Integer viverra ipsum sed turpis laoreet dictum a vitae ex. Cras lectus libero, pellentesque quis nisi quis, tristique lobortis ante. Maecenas mattis ligula eget dui ultrices tristique. Sed in consectetur mauris. Fusce vulputate lacinia quam, sed ornare massa consequat in. Ut et turpis dui. Sed vitae diam vel sapien commodo mollis. Curabitur ante odio, tempor vel augue rhoncus, volutpat ultrices est. Curabitur nibh ipsum, dapibus et dignissim ut, faucibus eget nulla. Phasellus eget turpis rhoncus, pellentesque eros quis, iaculis quam. Nam laoreet felis sed nisi iaculis sagittis.
</div>
</div>
<footer class="site-footer">
<p>dhooabobaweobofeobweh</p>
</footer>
</div>
</body>
If you want to have another menu that opens on top of the first menu, then you can give it a larger z-index.
In general you want to avoid nested scroll bars; if something scrolls it should be the page as a whole, not individual elements.
the main problem is setting :
.content-wrap {
height: 100%;}
whenever you set height to 100% you need to think on what that means.. in your case it meant 100% of windowHeight, and since you had another div on top your footer this was pushed below the bottom ,
here's a working fiddle
I have created a simple page to experiment with Skrollr using it in relative mode. I have 2 sections set up, the first section has an tag in it, the 2nd section has a tag in it. The first section is supposed to fade out when the bottom of the first section is at the top of the viewport. But instead of using that section, it's using the tag to trigger the animations.
<section id='burger'>
<div class='background' data-top="opacity:1" data-top-bottom="opacity:0" data-anchor-target="#burger">
<h1>Welcome to the page!</h1>
</div>
</section>
The 2nd section has a background div on it as well, and that animation should be the image of the
plane starts off 100px at the top, 0px at the center and -100px at the bottom. The image just seems to sit -100px where it should at all times.
<section id='plane'>
<div class='background' data-top="background-position: 50% 100px;" data-center="background-position: 50% 0px;" data-bottom="background-position: 50% -100px;" data-anchor-target="#plane">
<p>Cras nulla odio, fringilla nec libero in, tristique rutrum elit. Phasellus ut tellus non metus pellentesque lacinia at eget tellus. Sed dapibus turpis eu rhoncus lacinia. Mauris ornare arcu et justo facilisis iaculis. Nam ultricies accumsan lacinia. Morbi sit amet nisi vitae turpis feugiat elementum. Phasellus tempor porta arcu non semper. Quisque vitae urna sed mi scelerisque tincidunt. Mauris nulla odio, tempus sit amet fermentum ac, egestas in lacus. Aliquam suscipit velit enim, ac pharetra magna gravida sit amet. In eu libero rhoncus purus tincidunt commodo a venenatis purus. Sed a nibh sed mauris consequat blandit. Morbi ut faucibus ante. In nunc arcu, sodales vel molestie sit amet, mollis quis urna. Aenean pretium facilisis erat. </p>
</div>
</section>
css:
html, body{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: black;
}
h1{
padding: 0;
margin: 0;
}
section{
height: 100%;
min-height: 100%;
width: 100%;
}
.background{
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
min-height: 100%;
width: 100%;
}
#burger{
}
#burger .background{
background-image: url('../img/burger.jpg');
border: 3px solid green;
}
#plane .background{
background-image: url('../img/plane.jpg');
}
I'm sure I'm over looking something obvious.. but I can't seem to figure out what it might be.
I uploaded a simple date to demo what I am talking about.
Thanks for the help in advance!
demo link
Skrollr changes the height of the body. In the process of calculating everything, it is set to auto (which may be bug https://github.com/Prinzhorn/skrollr/issues/347) and later to the needed height, which conflicts with your 100% (it is overridden).
To disable this behavior, set the forceHeight options to false when initializing skrollr.
Edit: Regarding your comment (jumping of the background) that's actually pretty easy: in your case data-top === data-bottom, because the section has height:100% (the top will be at the top at the same time when the bottom will be at the bottom). What you wanted was data-bottom-top and data-top-bottom. Also data-center is superfluous.