I'm looking for a possibility to set the footer to the end of my page or the end of my content if the content is greater than one page.
I do not want to have a fixed footer where the content is scrollable.
I do not know whether it is possible.
So, this is my code.
The div with class="div1" contains the content.
The content contains the content as well as the footer.
<div class="div1">
<div class="content">
<div class="myContent"></div>
<div class="myContent"></div>
<div class="myContent"></div>
<div class="footer"></div>
</div>
</div>
The footer has a height of 50px.
My problem is following:
If I have a screen height with height:500px and the content is only 150px high, the footer is set after the last div-element with class="myContent".
It should be set to the end of the page like the effect I receive with
bottom:0;position:fixed
But if the content is 600px high the footer should be set right after the last div with class="myContent". No styles would be needed here.
Have you got an idea how to solve it?
do you mean Make the Footer Stick to the Bottom of a Page ?
or this one
the css
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
and the html
<div id="wrap">
<div id="main">
</div>
</div>
<div id="footer">
</div>
I think this may help you get rid off this problem:
.footer {position:absolute;left:0;right:0;bottom:0;background:green;height:50px}
This may solve the objective:
<div style="position:absolute">
<div style="position:absolute">
<div id="top" style="height:50px;width:100%;position:fixed;left:0;top:0;background:red"> content 1 </div>
<div id="middle" style="background:green;position:fixed;top:50px; left:0;bottom:50px;right:0">content 2 </div>
<div id="middle" style="background:blue;position:fixed;top:100px; left:0;bottom:50px;right:0">content 3 </div>
<div id="bottom" style="height:50px;width:100%;position:fixed;left:0;bottom:0;background:orange">Footer</div>
</div>
</div>
Related
I want the page to be 100vh in height, so that there are no scrollbars on the whole page. For some reason the main grid is bigger than the screen size and some of the elements are getting clipped.
<html>
<body>
<div id="root">
<div class="app_container">
<div class="navigation">
<div class="navigation_logo_container"><img src="/icon.9c86b69e.png"
class="navigation_logo"><span>Sample</span></div>
<div class="navigation_buttons_container">
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
<div><span>Sample</span></div>
</div>
</div>
<div class="game">
<div class="quiz"><span class="question_text">Sample</span>
<div class="answer_choices">
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
<div class="answer_choice"><span>Sample</span></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Codepen: https://codepen.io/GuacomoleCyclone/pen/RwKjmzO
Base on your setup the 100vh is working but your children are adding to the cause...
Meaning you have nav with height on fit-content...so lets just say 65px;
but then you have game div at height: 100%
If you remove that nav it works as you want, ..so for easily to solve this, you would have to also equate that extra height besides 100% game(nav height).
So meaning you would have to give:
.game {
height: calc(100% - 65px);
}
There are other ways to solve your setup without doing this but this is one of them.
I would like to re-create this revealing sticky-footer effect found at http://www.akc.org/dog-breeds/
I know the footer has to be fixed.
I know the content needs to have a higher z-index
I'm guessing (sort of) that the body needs to have a margin-bottom which is equal to the height of the footer???
Please would someone help me out.
I'm using Twitter Bootstrap 4. The general markup looks like this:
<body>
<div class="container"> <!-- This part should scroll up to reveal the footer below -->
<!-- Content goes in here -->
</div>
<footer class="footer"> <!-- This should be hidden initially -->
<div class="container">
<div class="row">
<!-- Footer stuff goes in here -->
</div>
</div>
</footer>
</body>
You will want to add a main content div and then give this div a background color of whatever you want your page to be otherwise you will just end up having text overlapping but yes you are right you will want to give your main content div a z-index of 1 or something and then fix your footer behind that and give it a z-index smaller than that in my example I gave it a z-index of -1. Then your main content div will scroll over the top of your footer. You will probably want to give your footer a height and your body a padding-bottom of the same height.
Here is an example of how I did it Fiddle Demo:
Html:
<div class="main-content">
<div class="container">
<div class="row">
Your main Content Scroll down
</div>
</div>
</div>
<footer>
<div Class="container">
<div CLass="row">
Footer Content
</div>
</div>
</footer>
Css:
body{
padding-bottom:200px;
}
.main-content{
min-height:200vh;
background:#fff;
z-index:1;
}
footer{
position:fixed;
bottom:0;
left:0;
width:100%;
height:200px;
background:#000;
color:#fff;
z-index:-1;
}
I want to know how can I extend every DIVs inside a div wrapper. My div wrapper is fixed and has a width of 980px.
My HTML goes here:
<div id="wrapper" >
<div id="header" >
<strong>HEADER</strong>
</div>
<nav>
<strong>Navigation</strong>
</nav>
<div id="content" >
<div class="sidebar" >
<p>sidebar</p>
</div>
<div class="main-content" >
<p>content goes here.....</p>
</div>
</div>
<footer>
<strong>copyright etc....</strong>
</footer>
</div>
Here's the FIDDLE
What I want to achieve is every DIVs which hasbackground-color will expand and max-out the width of wrapper or something like filling the width of body to the fullest. But the content or texts must still has the width of 980px and is fixed. Thanks in advance.
Check this Demo
.div-inner {
width: 500px;
margin: 0 auto;
}
EDIT 10.12am 17th April.`Your jsfiddle and on the emulator works perfectly and as I would expect however I am having no luck. My html is
<img src="/images/mobile/m_tech_fuss.png" alt="Payco Tech logo" width="100%">
<div id="wrap">
<div id="main">
<div><img src="images/mobile/m_tech_welcome.png" width="100%" />
</div>
<div><img src="images/mobile/m_tech_self_e-contracts.png" width="100%" />
</div>
<div><img src="images/mobile/m_tech_optout.png" width="100%" />
</div>
</div>
</div>
<div id="footer"><img src="images/mobile/m_tech_soundsgood.png" width="100%" />
</div>
and css is exactly as you stated however not only does this not move the orange footer image at all but it also messes with my homepage layout :(
EDIT: 5.10pm 6th April
I found a guide which appears to work ok http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
The orange footer stays at the bottom on any mobile screen however there is still some a gap between the last bit of content and the footer which forces me to scroll down whereas on a page where there is little content, the footer should just be sitting there already. Also this guide has messed up with my green strip images which are now no longer 100% in width :(
Here is my code:
<div id="container">
<div id="header"></div>
<div id="body">
<div><img src="images/mobile/m_tech_welcome.png" width="100%"></div>
<div><img src="images/mobile/m_tech_self_e-contracts.png" width="100%"></div>
<div><img src="images/mobile/m_tech_optout.png" width="100%"></div>
</div>
<div id="footer"><img src="images/mobile/m_tech_soundsgood.png" width="100%"></div>
</div>
and my css
`}
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#fff;
padding:10px;
}
#body {
padding:10px;
padding-bottom:70px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:70px; /* Height of the footer */
content:url("../images/mobile/m_tech_soundsgood.png");
}
#container {
height:100%;
}`
If all you want is for that image to always sit at the bottom of the screen, it looks like you are making it a bit too complicated. Try:
div#content
{
position: fixed;
bottom: 0px;
}
To get CSS sticky footer to work you can't have any content outside of the #wrap or the #footer divs or it will mess up the height calculations. It will push the #wrap div, which has a min-height of 100%, down the page. This means that the bottom of the #wrap div is lower than the bottom of the screen. Resulting in unreliable behavior. Especially if the height of the content outside the #wrap or the #footer divs is of variable height, which is what was happening in this particular case.
You can either place a header inside the #wrap div in a config much like this:
<div id="wrap">
<div id="header">
<!-- Header content -->
</div>
<div id="main">
<!-- Main content -->
</div>
</div>
<div id="footer">
<!-- Footer content -->
</div>
Or you can leave it outside of the #wrap and #footer div and compensate by adding a padding-top value equal to the height of the header on the #main div. This is to stop the content inside the #main div from rendering over the top of the header outside of the #wrap and #footer divs.
The general html structure of my pages is
<div id="wrapper">
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</div>
I have a 1000px layout with the content centering.
However, for a couple of the pages I have a banner in the content that should expand 100% to the sides of the browser (i.e., beyond the 1000px wrapper).
Should I delete the wrapper div for this page and apply width: 1000px; margin: 0 auto; separately? Or should I take the banner outside of the standard wrapper layout? What is a more standard way to do this?
Thank you.
Using style="overflow:show" for that content banners parent should allow it to show. Instead of width=100% you might need to use some javascript to get the screens width and make it that width.
I would take the banner outside of the wrapper.
I had same problem and done something like this:
.center
{
margin: auto;
width: 1000px;
}
<div id="wrapper">
<div id="header">
</div>
<div id="content">
<div class="center">
</div>
<div id="banner">
</div>
<div class="center">
</div>
</div>
<div id="footer">
</div>
</div>