http://swimclub-theme.myshopify.com/search?q=asfsf
I'm using the following theme. As you can see when you search for something that isn't available the page isn't 100% high the 'footer' part hangs out around the center of the page. Is there a way to make it so the container is always 100% high? I tried adding min-height and such but it doesn't seem to want to budge.
Does anyone have any idea why it's stuck like that?
Thanks!
Don't mess with the content height.
What you are looking for is called "sticky footer". The following is best practice CSS-only solution :
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 400px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 260px;
width: 100%;
}
Source: http://mystrd.at/modern-clean-css-sticky-footer/
You could make the html and body have a min height of 100%. If the footer is put to bottom it will then be able to go there.
html, body {
min-height:100%;
}
As you said this wont work. The only thing you can do in css is to set
position: absolute; http://jsfiddle.net/52vpw2wg/1/
But you can do it with JavaScript or jQuery. Like this http://jsfiddle.net/52vpw2wg/2/
Related
I am using DataTables for jQuery plugin for my table. I want my table height always end at the fixed pagination.
I want to achieve this for the user so that they don't need to scroll in webpage, only in datatable..
This is what exactly want I to achieve.. I have no idea how to get this:
I think you can try to set in your footer{position:fixed; bottom:0; width:100%;} that would help to make footer always stays at the bottom of the viewport. (I'm assuming that you want to achieve that).
This is the CSS I found that will force a DataTable.Net to a fixed height (change min-height to your desired size). Info on left, pager control on right.
div.dataTables_wrapper { min-height: 530px; }
div.fg-toolbar.ui-toolbar.ui-corner-tl { position: inherit; }
div.fg-toolbar.ui-toolbar.ui-corner-bl { position: absolute; bottom: 0; width: 100% }
div.dataTables_paginate { position: relative; float: right;}
Ok, so I have a mobile application with Cordova and AngularJS. For the styling I use Less and Bootstrap.
Problem
In the mobile app I have tried to size my divs with percentage (%). But this does not seem to work. I cannot seem to change the following behavior: The divs are as big as the content inside of them. This problem sounds quite easy and I have tried many options on here (stackoverflow) aswell as on the web. Yet I have not found the solution to fix it and it is getting quite annoying.
I have tried
Adding html, body { height: 100% },
Adding html, body, #canvas { height: 100%}
Adding #canvas { min-height: 100% }
Adding html { height: 100% } body { min-height: 100% }
And a lot of other variations. Using px works, but I don't know how big my mobile device is, so that isn't realy handy.. (I also use bootstrap and some media queries for styling).
Example
When I add elements to my div I get the following behavior:
I want to remove that white empty space, but I can only achieve that when using px instead of %.
Less example:
html, body {
background: transparent;
height: 100%;
margin: 0;
padding: 0;
}
#canvas {
min-height: 100%;
}
body {
-webkit-touch-callout: none; //prevent callout to copy image, etc when tap to hold
-webkit-text-size-adjust: none; //prevent webkit from resizing text to fit
-webkit-user-select: node; //prevent copy paste, to allow, change 'none' to 'text'
min-height: 100%;
margin: 0;
padding: 0;
background-color: #cgiColor;
}
.header {
top: 0px;
width: 100%;
height: 5%;
background: #companyColor;
color: #textColor;
}
.incidentContainer {
background: #appBodyColor;
width: 100%;
height: 70%;
}
.footer {
position: absolute;
color: #textColor;
bottom: 0px;
height: 15%;
width: 100%;
background: #companyColor;
}
Extra information
I am using AngularJS, so my application is a single page application. My index.html looks as follows:
<body oncontextmenu="return false" >
<div class="{{ pageClass}}" ng-view ></div>
<script type="text/javascript" src="cordova.js"></script>
<script data-main="main" src="lib/require.js"></script>
</body>
With of course the standard links to my CSS sheets, and so on.
All the other pages are includes in the 'ng-view' and don't have any or tags. This because they are included.
Solution
The solution was to add the following CSS rule:
div[ng-view]{
height: 100%;
}
This worked, because all divs (except for html & body) are children of this item. Adding the 100% made the div space span to 100% of the screen and thus provides a space for percentage to work.
Credits go to Jai for this answer!
Have you tried to add the following css and set Important attribute
html, body { height: 100% !important }
What seems to me, the directive ng-view is the parent of your application and header, content, footer are loaded in this div. So you have your header div at correct place, your footer is also placed correctly as it is absolutely positioned.
But in case of your content area, that is relative to the ng-view div.
I would recommend you to make it 100% height. Something like:
div[ng-view]{
height: 100%;
}
This most likely is because of the fact that in CSS the 100% is a relative value.
With width the default 100% is the width of the screen, or whatever you are looking at.
Height however does not take the height of the screen as 100%. It needs a solid value.
I think that if you change
html, body {
background: transparent;
height: 100%;
margin: 0;
padding: 0;
}
with
html, body {
background: transparent;
height: 100vh;
margin: 0;
padding: 0;
}
it should work.
The 100vh should set the height of the html to the height of the viewport.
I guess this way works, I have to say though that I myself have not used something to get my page to have a height that is 100% of the screen.
Yay, rendered HTML!
class="incident" is only expanded as large as it needs to be. I believe your fix should be to make that element have a height of 70% (because it will be relative to the whole-page) and then incidentContainer should have a height of 100%.
Percentage heights are relative to the parent element, not the root, so you need to be very aware of any containers, even ones stealthily added by a framework.
Also, if it helps, Jelmergu suggested the vh unit type. This could fit your use case - one "Viewport Height" is equivalent to "1% of the browser's content area". So, 100vh would take up the whole screen. This is true even on deep-level children.
I have this site:
http://dl.dg-site.com/functionmentes/
There is a div with color #D9D9D9
Code CSS:
#full_bar{background:#D9D9D9;width:100%;height:100px;}
I want to my div to be the full width site and to be glued to footer.
How can i make this?
I use a theme in Wordpress.
Thanks in advance!
By making the position fixed, this will ensure that it will follow the user as they scroll up and down your website.
#full_bar {
background: #d9d9d9;
width: 100%;
height: 100px;
position: fixed;
bottom: 0;
left: 0;
}
If you add position:absolute; left: 0; to the css, the bar will more or less do what you're trying to do, but it's a dirty hack.
The real problem is that you're adding your 'full_bar' in the wrong place (inside a div which restricts the width). Personally I would opt for placing the full-bar in your <footer> tag.
You should placed your gray bar outside the section, between section and footer or on footer on html.
But if you want a css solution, you need to put your section parent to position relative and set your gray bar on absolute bottom with full width:
section {
position: relative;
padding-bottom: 100px; // Your bar height
}
#full_bar{
background:#D9D9D9;
width:100%;
height:100px;
position: absolute;
bottom: 0;
left: 0;
}
You are putting #full_bar inside class="container". container is the parent of div id #full_bar, that's why its not taking full width.
Do your code outside contaner class and you can see the changes.
See the attachment, i think you want this as per i understand your question.
In my HTML page, I have made a container that contains the entire body (header and footer included). But the problem I am facing is that when I set the container to a fixed width, the header and the left side of the footer display properly, but the right side of the footer extends on indefinitely. Here is my CSS:
.container
{
width: 1024px;
}
.footer
{
float: left;
margin: 0px;
width:100%;
background: #0B3B17;
height: 100px;
position: absolute;
bottom: 0;
}
I think it may have something to do with the absolute positioning, but I need my footer to be absolutely positioned since it keeps moving out of place. What would you suggest? I am using Twitter Bootstrap for development by the way. Thanks for your help.
Add position:relative; to .container rule.
.container {
width: 1024px;
position: relative;
}
Because of the footer is relatively body position.. So will be in the body of the same width.
I think sticky-footer will be you a better solution.
I've seen a pile of ways to do this online, but all that I've tried either break other CSS on the page or don't work all together.
On this page http://www.psyklopz.com/workbench/ I would like to get the #container element to grow in height so that the footer touches the bottom of the screen.
How would you do that?
i visited the sight. Well if your content is just as short as that and you want to still put the footer touch the bottom of the screen. add this to your css of the div or container that you want to be at the bottom.
position: absolute;
left: 0;
right: 0;
bottom: 0;
You could also do:
HTML
<body>
<div id="container"></div>
<div id="footer"></div>
</body>
Styles
html,body {height: 100%;}
body{ position: relative;}
#footer { position: absolute; bottom: 0;}
The container div won't stretch the whole way down, but with clever use of BG colors you can make it look like it does.
Add height:100%; to both the #page and #contain divs. That will get you what you want.
Hi see the live demo:-
http://jsfiddle.net/BER5x/2/
you can use this code its fixed at bottom and without your footer top curve image its totally css border radius property you don't need to use the footer-top in your css.
I hope this will help you......
I ended up using position: fixed; and setting bottom: 0; top: 0; left: 0;. I then used a piece of jQuery .animate() magic to pull it off. Here's the working code and a demo all-in-one!
http://www.psyklopz.com/workbench/jquery-based-dock-toolbar/
I know it's an old post, but I found myself with a similar problem today.
I wanted to have a container (with a map) to fill the viewport, but there had to be a 32px high container above it. The map made it necessary, to really extend the container to its maximum possible size and to not overlap with anything else.
I ended up using a flexible and elegant solution without any javascript:
<div class="tab"><div class="tabContent" /></div
<div class="container" />
And the CSS:
.tab {
height: 0;
width: 100%;
}
.tabContent {
height: 32px;
}
.container {
height: 100%;
padding-top: 32px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
The trick is using box-sizing: border-box to make the height: 100% include the defined padding.
I have also created a jsfiddle: http://jsfiddle.net/YWLLM/2/
I had to use a fixed body height in the fiddle, because (at least in chrome) in the iframe body height: 100% didn't work.
I also added some borders to visualize, that nothing get's cut off (with container overflow: hidden)