I would like to create a footer which is relative to the content (so not fixed), but fills the rest of the screen. So for example, on my larger monitor, the footer would start in the same place, but fill up 100px (for example). On a smaller monitor, it only needs to fill up 75px. I tried using 100%, but it causes the page to be really big and the user can scroll down and fill the entire screen with the footer. Is there a way to get it to be a bit more reasonable size, so that it just about fills the bottom of the screen?
My current code is this:
.footer
{
position:relative; //can't be fixed as content might overlap if extended
height:100%;
width:100%; //fill the entire screen horizontally
bottom:0px;
margin-top:345px; //used to make sure content doesn't overlap
}
I was struggling with something similar and the trick I found to solve it was to make sure to set body and html to min-height:100% as well as then have content and all other divs equal 100%.
html {
min-height: 100%;
}
body {
margin: 0;
padding: 0;
min-height: 100%;
}
#content {
min-height: 100%;
}
Related
I am trying to implement a grid onto this page. Because the Wordpress page uses overflow:hidden to the layout it will need to remain as is.
Out of curiosity, I tried
.content-container, .content {
overflow:visible
To see if it will reveal the entire grid that was cut off and it did, but also revealed what I am trying to hide through the layout, a spare bit of page.
Is there any way that I can reveal the whole grid without having to allow the overflow?
It cuts off the sides because .container's width is set to a fixed value of 1170px. If you set .container's width to 100% all content will be stretched.
.page-id-2099 .container {
width: 100%;
padding-right: 0px;
padding-left: 0px;
}
This will work:
.page-id-2099 .content-container, .page-id-2099 .content
{
overflow: visible !important;
}
On this page http://www.prllighting.com/, I have a Photoplus widget next to a video, (below the main banner) in separate bootstrap columns and I do not understand why when the page goes below 1200 pixels the widget goes underneath the iframe video. I put them both in DIVs and defined them like this:
<div class="photoplus"><script type='text/javascript.....</script></div>
<div class="productpage-video"><iframe width="640" height="360"
src="https://www.youtube.com/embed/..."></iframe></div>
.photoplus {
display:inline-block;
width: 200px;
height:332px;
}
.productpage-video {
display:inline-block;
}
How do I edit it, so that they never overlap?
Your "photoplus" class has fixed width of 200px and it should be percentage width. (100%)
And also inner content of it also should be adjustable width like 100%;
And "productpage-video" inside this class, iframe has fixed width. That one also should be 100%.
.photoplus {
display: inline-block;
height: 332px;
width: 100%;
}
.photoplus iframe {
width: 100% !important;
}
.productpage-video iframe {
width: 100% !important;
}
But anyway when small sizes (for mobile sizes), better to move the video to second line.
I am truly stuck with this, basically I am using wordpress, and want a horizontal line to go across the page (breaking out of the inside container). This line should adjust to the screen size, so if you zoom out the line should keep getting longer, basically an infinate line.
So far the what i've managed to do is the following code:
.horizontalrule1 {
position:relative;
height:82px;
background: #f1f2f2;
overflow:hidden;
width:600%;
margin-left: -100%;
}
This technically looks fine but the issue is it's causing a scroller to appear at the bottom of the page because the width is set at 600%
If I set the width to 100% it doesnt make the line full width and stops it at the inside container which is about 990px.
All I want is an infinate line that will adjust itself to the screen size, so if you have a screen width of 1900px the line should be 1900px etc.
Hope this makes sense.
My html is:
<div class="horizontalrule1"></div>
To give everyone a better idea of what i want, check out onlywire.com, they have thick grey horizontal rules that stretch accross the site. This is exactly what I'm looking to do.
You want it to go OUTSIDE the DOM element?
.elementContainingYourHorizontalRule {
overflow: auto; /* or whatever, just don't set it to hidden. */
position: relative;
}
.horizontalrule1 {
position: absolute;
width: 600%;
left: 50%;
margin-left: -300%;
height: 2px; /* or whatever. */
}
I don't know if this is the best way to do things -- if I were you, I'd make your containing element go the full width of the page and let your custom HR do it's own thing automatically. I understand that may not work with your design/layout though.
At any rate, your horizontal rule will never be able to know your page width if you don't give the container the full width as well. So you're stuck with an ugly 600% hardcode until you get your container full-width.
Try this which should force it outside the surrounding container using negative horizontal margins:
hr {
margin: 20px -10000px;
}
And to avoid horizontal scrollbar add this to body:
body {
overflow-x: hidden;
}
If you only want to apply it to specific horizontal rulers, add it as a class.
HTML:
<hr class="full">
In Style Sheet:
hr.full {
margin: 20px -10000px;
}
You should set your body's padding and margin to 0 :
body{
padding: 0;
margin: 0;
}
I have an outer div, called #wrap, and two inner divs: #container and #footer. Content is inside #container, and is dynamic. There may be a little, there may be a lot.
When content is minimal, the footer div may appear half-way up the page. However, this changes depending on the monitor/resolution. What is 50% from bottom on a large monitor may only be 10% from bottom on a small/cluttered viewport.
If I use this css method:
body,html { height: 100%; }
#wrap { position:relative; min-height:100%; }
#container{ margin:0px 0px 50px 0px; }
#footer { position:absolute; bottom:0px; }
then the page will always extend to use 100% of the viewport and the footer will be at bottom of the viewport - exactly as required.
However, if the content increases (or if a small viewport), the footer may overwrite any content extending into its 130px height -- the footer will not bump down.
Is there a way to remedy this?
Note: I don't wish to use percentages for the footer height as it is fixed at 130px and cannot squish.
Here is a fiddle I've been using to experiment
This is the best example of sticky footer I've seen: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
UPDATE (April 2017): As the above link has become inoperable (and much time has passed since the original post) I'd like to offer the following solution to this problem:
Permanently fixed:
#container {
padding-bottom: 130px; // ...or more
}
#footer {
bottom: 0;
height: 130px;
position: fixed;
width: 100%;
}
For a dynamically fixed element, check out this jQuery plugin: https://libraries.io/bower/jquery-sticky-header-footer
This problem has been perplexing me for a while now, and I've tried researching it but so far I've just turned up sites that tell me how to center things but that's not the problem. The problem is that while #content looks like it's centered, when the page takes up more than one screen it causes the #content to appear about 5px to the left of where it appears when it is less than one screen in height. Is there a way to fix this without forcing my shorter pages to reach the bottom screen or beyond?
Here's how I'm centering my content:
body {
margin: 0;
padding: 0;
}
#content {
width: 800px;
margin: 0 auto;
overflow: hidden;
padding: 0;
}
I'll admit that there's a couple more divs in there, but I don't that's really relevant to this problem...
#asc99c is right.
The scroll bar is causing your problem.
When it appears, it pushes everything over.
To solve this (if you must), you could make your pages taller than 100%. Something like
body, html{
height:100%;
}
div{
height:101%;
}
With div being your main content div.
Example: http://jsfiddle.net/jasongennaro/7NYnS/
The following CSS will force the vertical sidebar to appear, even on pages that are shorter than the viewport height. This will prevent the horizontal shift that you're noticing.
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
Via http://egilhansen.com/2007/03/28/css-trick-always-show-scrollbars/