I can't seem to get the footer in my modal to be fixed at the bottom with the content scrolling underneath.
<div id="children-modal" class="modal" materialize="modal" [materializeParams]="[{dismissible: false}]" [materializeActions]="modalActions">
<div class="modal-content">
<h4 id="modal-title">What to do with your god damn kids</h4>
<p id="modal-text">A bunch of text</p>
</div>
<div class="modal-footer">
<a id="close-modal-button" class="right waves-effect waves-white btn-flat" (click)="closeModal()">Close</a>
</div>
</div>
.modal {
width: 95%;
padding: 0px;
}
.modal-content {
height: auto !important;
padding: 0px;
}
.modal-footer {
position: fixed;
}
The footer disappears. Any ideas?
I'm building off of sunil's answer. In addition to using bottom: 0, you need to set a height and remove the overflow on your .modal class. Next, set the height and overflow to auto on the content like so:
.modal {
position: fixed;
left:0;
right:0;
background-color: #fafafa;
max-height:70%;
height: 70%;
margin:auto
border-radius:2px;
will-change:top,opacity;
}
.modal-content[_ngcontent-c0]{
height:90%;
padding:0;
overflow: auto;
}
In short, you want it to scroll the content (and not the footer) so this is where you place the height and overflow (scrollbar).
You need to give bottom: 0; to your modal-footer class.
Related
I don't want it to be fixed on the bottom, i just want it to be at the end even if the page has no content.
As you can see... the problem is it:
i searched on google about it, and i tried to put some CSS like:
footer {
bottom: 0;
position: absolute;
width: 100%;
}
But it don't worked.
<!-- Footer -->
<footer class="page-footer font-small teal pt-4 bgFooter rodape">
<!-- Footer Text -->
<div class="container-fluid text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12 text-center mt-md-0 mt-3 text-light" style="font-family: 'Quicksand', sans-serif;">
<!-- Content -->
<h5 class="text-uppercase pb-3">Social</h5>
<div class="mb-4">
<a class="btn btn-outline-danger pl-3 pr-3" href="" target="_blank"><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-outline-danger ml-3 mr-3" href="" target="_blank"><i class="fab fa-twitter"></i></a>
<a class="btn btn-outline-danger" href="" target="_blank"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
<!-- Grid row -->
</div>
<!-- Footer Text -->
<!-- Copyright -->
<div class="footer-copyright text-center text-light small ml-2 py-3" style="font-family: 'Quicksand', sans-serif;">© 2018 Teste |
Política de privacidade
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
There's several methods to do this. Let's start with the most straight forward method.
If your footer height is set (Will not change, regardless of browser width or footer content) you can use a negative margin on the footer.
Let's take this html structure as an example:
<body>
<div class="container">
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
html,
body {
height: 100%; // First we set the height to make sure the body is always atleast big enough
}
.container {
min-height: 100%; // The container will always be 100% height at minimum;
}
.content {
padding-bottom: 100px; // This is set to the footer height
}
.footer {
height: 100px; // The footer has a set width
margin-bottom: -100px; // We move the footer in the negative space that was created by the padding
}
Recommended:
It get's a little more difficult when the footer height is not set. This will most likely be the case, since your website might be responsive.
In this case we will be using flexbox.
html,
body {
height: 100%;
margin: 0;
}
.container{
display: flex;
flex-direction: column;
height: 100vh;
}
.content {
background: gray;
flex: 1 0 auto;
}
.footer {
background: blue;
height: 30px;
flex-shrink: 0;
}
<div class="container">
<div class="content"></div>
<div class="footer"></div>
</div>
We set the container to flex. Child divs in a flex container "grow" to fill their parent. We set flex to column to display them under eachother rather than next to eachtother. This container is set to 100vh. vh stands for "Viewport height", or the height of the window.
The content is set to flex: 1 0 auto. This will allow it to grow 1, but not shrink 0, while allowing it's size to be auto
The footer is to not ever shrink flex-shrink: 0, regardless of the size of other content.
You can also take a look at css grid. However since I assume you are somewhat new to this, I recommend sticking with flex for now! Flexbox is wonderful once you realise what it can do.
I don't have your code, but a good solution is first to set your body min's height to 100% of the page.
Then you set your header to x%, your footer to y% and your page's content min height to 100-(x+y)%.
Example code :
HTML :
<body>
<header>
</header>
<main>
</main>
<footer>
</footer>
</body>
CSS:
html {
min-height: 100%;
}
body {
display: inline-block;
min-height: 100%;
}
header {
height: 10%;
display: inline-block;
}
footer {
height: 10%;
display: inline-block;
}
main {
min-height: 80%;
display: inline-block;
}
Hope it helps ;)
You just need to set min-height: 100% for html and body like the following:
html, body {
min-height: 100%;
}
Try using css grid, check this example:
HTML
<header>
</header>
<main>
</main>
<footer>
</footer>
CSS
html, body {
width: 100%;
height: 100%;
margin:0;
padding:0;
}
body {
display: grid;
grid-template-rows: auto 1fr auto;
grid-template-columns: 100%;
}
header {
background: red;
}
main {
background: grey;
}
footer {
background: purple;
}
DEMO HERE
You can do like following using the position: absolute;
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
<div id="container">
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
</div>
OR Simple method is to make the body 100% of your page, with a min-height of 100%. This works fine if the height of your footer does not change.
Give the footer a negative margin-top:
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
how to sticky div on scroll
see my screenshoot :
this screenshoot if sticky on top :
and this screenshoot sticky on scroll :
i mean like this, if sticky go to top the div back to normal (i mean without css sticky)
see this screenshoot, i want like this, if div stick go to the top back to normal (without css sticky) :
this my sticky :
#media screen and (min-width: 768px) {
.sticky {
position: fixed;
z-index: 9999;
display: block;
background-color: #2069e8;
width: 100%;
padding: 10px;
margin-top: -10px;
padding-top:10px
}
}
<div class="sticky">
<div class="col-sm-2">
<h2 style="margin:0px; width:250px;"><span class="smallnav menustater" onclick="openNav()"><i class="fa fa-th-list"></i></span> MY WEB</h2>
</div>
</div>
Please Help
Thanks before
The easiest solution is to keep your div always sticky but increase the padding-top of the div that is below it to make sure that the content can't go under the sticky div.
This will avoid this:
By moving the page content to the bottom.
Demo: https://jsfiddle.net/g9nhq3up/
You have to set padding-top: to the content (not to the nav)
See code:(JSFiddle:https://jsfiddle.net/0fp1qsw3/)
.sticky {
position: fixed;
z-index: 9999;
display: block;
background-color: #2069e8;
width: 100%;
padding: 10px;
margin-top: 15px;
padding-top:10px
}
.content{
padding-top: 50px;
}
<div class="sticky">
<div class="col-sm-2">
<h2 style="margin:0px; width:250px;"><span class="smallnav menustater" onclick="openNav()"><i class="fa fa-th-list"></i></span> MY WEB</h2>
</div>
</div>
<div class="content">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>
</div>
I have a fairly complex layout that I am building, it relies on a is affected by height, and min-height's so the usual tricks to position the footer at the bottom aren't working.
Given my JSFiddle how can I position the footer at the bottom when the content is a lot or minimal?
Here is some of the css I am currently using:
body, html, #wrapper {
height: 100%;
min-height: 100%;
}
.header {
height: 30%;
background-color: aliceblue;
}
.main {
background-color: antiquewhite;
}
.main .content {
height: 2000px;
background-color: aquamarine;
padding-bottom:80px;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: beige;
}
If I understand your requirement correctly, you want the footer to sit at the bottom of the content box.
One solution is to make the content box position:relative and move the footer inside it, so that its position:absolute will bind it to the content box, and the bottom:0 will achieve the desired effect of having it sit against the bottom of said content box.
See http://jsfiddle.net/wn6uvske/5/.
HTML:
<div id="wrapper">
<div id="sidebar"></div>
<div id="body-content">
<div class="header">
<div class="navbar navbar-default" role="navigation">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li>Toggle Menu
</li>
</ul>
</div>
</div>
</div>
<div class="main">
<div class="content container">
<p>Content</p>
<div class="footer"> <!-- moved up into content container -->
<p>Footer</p>
</div>
</div>
</div>
</div>
</div>
(relevant) CSS:
.main .content {
height: 2000px;
background-color: aquamarine;
padding-bottom:80px;
position:relative;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80px;
background-color: beige;
}
you can use the sticky footer trick. Wrap all of your content in a wrapper excluding the footer, set min-height:100% and margin: -(footer height) on said wrapper to keep it at the bottom:
FIDDLE
UPDATE
You can take the header section out and use CSS calc() to adjust the height:
NEW FIDDLE
I have multiple divs with dynamic content and all of them have the same height. Beside the content a Submit Button is inside of each div, which is directly next to the content.
But i want to display the Button at the bottom of the div.
HTML Markup:
<div class="product-teaser-row">
<div class="product-teaser">
<h2>Title</h2>
<p>Content Content Content Content Content Content Content Content Content Content Content Content Content Content</p>
<button class="btn btn-grey" type="submit" name="action">Ansehen</button>
</div>
<div class="product-teaser">
<h2>Title 2</h2>
<p>Content</p>
<button class="btn btn-grey" type="submit" name="action">Ansehen</button>
</div>
</div>
CSS Code:
div.product-teaser {
border: 1px #c7d2d6 solid;
padding: 0px 10px 10px 10px;
width: 216px;
height: 100%;
display: table-cell;
}
div.product-teaser-row {
display: table;
border-collapse: separate;
border-spacing: 10px;
}
I've already tried different things like vertical-align: bottom on the div and display: inline-block on the Button, but nothing worked for me.
Here is a JSFiddle Demo of my code.
You can try this
CSS
div.product-teaser {
border: 1px #c7d2d6 solid;
padding: 0px 10px 20px 10px; /*Increase the bottom padding so the button does not overlap the content*/
width: 216px;
height: 100%;
display: table-cell;
position: relative; /*Add this css*/
}
/*Set the button at the bottom using position: absolute;*/
.btn-grey {
bottom: 5px;
left: 5px;
position: absolute;
}
To do that you just have to position absolute your button and define the bottom position and give a padding-bottom to your container to be sure that no content will override your button.
here for a jsfiddle exemple.
You could try adding a height property to the p element.
Example:
p{
height: 95px;
}
JSFiddle Demo : http://jsfiddle.net/robcabrera/g3p2Y/1/
why don't you put button in separate <div> tag like:
<div id=my>
<button class="btn btn-grey" type="submit" name="action">
Ansehen
</button>
</div>
set according margin-top to put the button at bottom like:
#my
{
margin-top:100px;
}
FIDDLE here
I'm trying to get the first initial first section to take up the whole height of the page.
I've tried this question here: Making a div fit the initial screen but I cannot get it to work, everything just overlaps.
My nav bar is centered on the first section and will stick to the top when the page is scrolled, I just need the first part to take up the whole page.
Like this:
Spotify also do it on their website
My HTML:
Title
<body>
<span id="top"></span>
<div id="floater"></div>
<div id="centered">
<div id="sticky_navigation_wrapper">
<div id="sticky_navigation">
<div class="navbar">
<a class="navbar" href="#about">about</a> <a class="navbar" href="#portfolio">portfolio</a> <a class="navbar" href="#top"><img src="/media/nav/logo.png" alt="Logo" /></a> <a class="navbar" href="#social">social</a> <a class="navbar" href="#contact">contact</a>
</div>
</div>
</div>
</div>
<div>
<a>Random Text here, blah blah blah!</a>
</div>
</body>
My CSS
html,body{
border: 0;
margin: 0;
padding: 0;
height:100%;
width:100%;
}
#floater {
position:relative; float:left;
height:50%; margin-bottom:-25px;
width:1px;
}
#centered {
position:relative; clear:left;
height:50px;
margin:0 auto;
}
#sticky_navigation_wrapper {
width:100%; height:50px;
}
#sticky_navigation {
width:100%; height:50px; background-color:rgb(241, 241, 241); text-align:center; -moz-box-shadow: 0 0 5px #999; -webkit-box-shadow: 0 0 5px #999; box-shadow: 0 0 5px #999;
}
I think the best solution, which I use on sites like this, would be to wrap each section in a containing div (or , if all your target browsers support it or you don't mind using a html5 shiv).
like so
<div class="section">
<p>Hello World</p>
</div>
<div class="section">
<p>Hello World</p>
</div>
You can then give that div height: 100% and width: 100% like...
.section{
height: 100%;
width: 100%;
}
You can see it all put together in this jsfiddle: http://jsfiddle.net/Ucetz/
I do this to my webpages all the time. Just add a containing div with the position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; style. That should give you a shade like area to cover the whole webpage. You can then put whatever you want inside that div.
To center vertically, do a little math and use a div. Thus, if the height of your div is going to be 400px then make the position: fixed again with the same specifications above, except change the top to 50% and then margin-top a negative value to half of the height. So, in this case it would be margin-top: -200px;
<div id="container" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%;">
<div id="otherstuff" style="position: fixed; top: 50%; left: 0px; width: 100%; height: 400px; margin-top: -200px;"> I am a verticall centered div! :)
</div>
</div>
and then for your navigation bar after you get passed the first layer, put that on position: fixed; as well, just make sure it is above the code given above. That way, it appears on the bottom.
<div style="position: fixed; top: 0px; left: 0px; height: 70px; width: 100%;">Your navigation content</div>
<!-- THE CODE GIVEN ABOVE SHOULD GO HERE -->
Be sure to include height: 100% in the style for the HTML and BODY tags. Then set the height of the sections.
Use Viewport Height.
Set the height of your div (also works with section) to whatever percentage you want your div to fill up the screen.
.section_div {
/* fill up 85% of screen heigth */
height: 85vh;
/* fill up 100% of screen width */
width: 100vw;
/* you can also use min-height instead of height. */
}