I'm using laravel 5.5 and need a footer to be at the bottom of every page.
Currently I have the footer in app.blade.php along with a nav bar and the content coming from other .blade files using yields #yield('content')
the app.blade file has
html, body {
height: 100%;
}
and the footer is
footer {
position: static;
bottom: 0px;
}
When inspecting the page the html and body are 100% height but the footer is just hanging out with the content and not shifting to the bottom of the page.
Are there any larvel related styles that could be interfering with the positioning?
I don't think laravel styling has anything to do with the problem. Setting the positionproperty to static isn't going to give you the results you're looking for, as static is the default position value for almost every html element. You could set it to absolute, fixed or sticky and depending on your choice you might need to set the bottom property on your footer to 0px.
This CSS-Tricks article should give you a better idea of how you want to implement the position and bottom properties on your footer.
Here's an implementation using the fixed value on the footer and a relative value on the body element.
You can also view this codeply project and experiment with changing the footer's position value.
html, body {
height: 100%;
background-color: red;
position: relative;
}
footer {
position: fixed;
left: 0;
bottom: 0;
height: 10%;
width: 100%;
background-color: green;
}
Related
Design question here. How can I make the #main-wrapper slide over the #single-carousel on the following page: http://duijnisveld.wpengine.com/
Right now it moves up when scrolling, I need the carousel to stay put and make the main wrapper slide over it when scrolling down.
giving .header-foto-wrapper position: fixed and #main-wrapper position: relative gives unexpected behaviour for me, I'm clearly missing something important.
*note, in the url, the .header-foto-wrapper does not have the position fixed as it breaks the layout and it's a live site for the client to see.
Thanks!
You'll need to apply width. Things go a little wonky when a container calculates width once you pull it out of the content flow. A width:100% will fill the page width. You'll also want to move the content area down and apply a background color.
.header-foto-wrapper {
position: fixed;
width: 100%;
}
#main-wrapper {
position: relative;
top: 100%;
background: #fff;
}
By setting the position as absolute.
.wrapper {
position: absolute;
left: 100px;
top: 150px;
}
http://www.w3schools.com/cssref/pr_class_position.asp
I am trying to do a footer that will stick to the bottom of the page instead I am getting it stuck to bottom position for the original window. When I scroll I end up having the footer stick in the middle of the page.
I am not trying to have it fixed and be sticky to the page.
When I do not have enough content to scroll all is well. (at least it looks that way)
Corresponding HTML:
<footer class="footer_div">
<div class="container">
<p>Sam Sedighian - No rights reseved!</p>
</div>
</footer>
Corresponding CSS:
.footer_div {
background-image: url("../imgs/dark_dotted2.png");
color: #818787;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
padding-top: 10px;
text-align: center;
}
It needs to be at the bottom of the page without being sticky (fixed) and only visible when scrolled to the bottom of the page. So it should work for both these examples: sedighian.github.io/blog/absolute_not_working.html and sedighian.github.io/blog/absolute_not_working2.html
This is an extremely subtle bug. Read the position: absolute documentation carefully:
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block.
footer does not have any positioned ancestors. Note that in the Bootstrap example, they explicitly declare position: relative on html.
In addition, you'll want to add a padding-bottom equivalent to the height of your footer so space is reserved for it.
Try:
html {
min-height: 100%;
position: relative;
}
body {
padding-bottom: 40px;
}
this is all over the stackoverflow,but it doesn't work for me.
using twitter bootstrap 3, i need to set the jumbotron class div to full display height.
this is my test site:
http://test.ulkas.eu/
i read i shall include
html {
height: 100%;
}
body {
min-height: 100%;
padding-top: 50px;
}
but it still doesn't work. maybe i got some syntax error somewhere?
In order to apply 100% height property to inner divisions you need to mention the same property to all the parent divs. So add
body{height: 100%;min-height:100%;padding-top:50px;}
.jumbotron{height:100%;}
to your body as well as to jumbortron class
The height of your html / body will always only be the height of your content - those tags behave slightly different to standard div / block tags. To get something to be truly 100% high your best bet is to remove it from the standard flow of the page using position: absolute / fixed, then set your div to be 100% high. Something like this:
.fullheight {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 2;
}
I think it's always worth setting a z-index on anything I position outside the normal page flow, allows you to control which parts appear on top of others.
I have a sticky footer that is working fine on a music site, however, when I click on the genre with the most albums it doesn't make the page longer and they overlap. This makes the links unreadable as parts of the image in the footer are behind them.
This is my code for the sticky footer
html, body
{
height: 100%;
}
#wrapper
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px;
}
#footer, .push
{
height: 60px;
}
Because ASP.NET inserts the main content into a form tag, you have to set the form height to 100%.
Change your CSS to the following should fix the problem:
html, body, form
{
height: 100%;
}
EDIT
In wrapper, you specify a negative space of 80px, and in the footer you specify a height of 60px. These should be the same values unless you have child elements not shown that are expanding the footer height. Try making those values the same (either both 80 or both 60, whichever fits the footer better).
I have an absolute positioned logo on the bottom left of my website... BUT the problem is that ive positioned it to stick to the right of the page but it leaves a invisible barrier to the left of it that spreads across the page. So lets say a link is placed in alignment with that footer element, I won't be able to click it, the absolute positioned layer is spreading over it (even though nothings in it)
Heres my CSS for the logos position:
#basemenu {
margin-right: auto;
position: fixed;
bottom:0px;
width: 100%;
height: 40px;
text-align:right;
right:1%;
}
It sounds like you have an img inside of a <div id='basemenu'></div>. Is that right?
We could really use a block of HTML if you wouldn't mind posting it.
What I don't understand is why you can't target the logo itself with a bit of CSS like this:
#basemenu img {
height: 40px;
position: fixed;
bottom: 0px;
left: 0px;
}
Use the following block property display : none; to hide the block