Ok, so the issue is I have a header, footer and the content div and what I want is for the content div to auto fill the height of the browser between header and footer making the footer stay on the bottom of the page, or below the content length.
when you go to incard.com.au you can see the issue on the index page as the content area is smaller then the browser window so we have added a height to the div to solve the footer floating issue.
I fixed it using jquery
$('#sitewidth').css({'height':(($(document).height())-320)+'px'});
$('#contentbody').css({'height':(($(document).height())-320)+'px'});
Remove the 'min-height: 700px' from #contentbody
So what is supposed to happen when the browser window is smaller than the height of the div?
You can set the height of the central div at 100 percent. For example, make the content div 100%, make the top and bottom fixed heights. That's kind of a hack but it works sometimes I think -- the 100% won't compress the fixed height top and bottom -- it "tries" to be 100%.
What I'm unclear about is what's supposed to happen as you make the browser window smaller. Is the header and footer supposed to stay glued to the top and bottom of your browser, while the content area gets smaller and smaller?
The only issue I see is that the orange borders on each side of your content area stop half-way down the page when the content doesn't reach the footer.
The most common way to fix this issue it to make those orange borders a background image and have it repeat-y inside of .sitewidth
I was able to fix the solution by using Javascript, it seems that to get the height of the content to fit the whole screen correctly I had to do a math thing where I took the height of the footer and header away from the browser screen size and then that gave me the min-size of my content body. as it is different on each users screen size it had to be a javascript set function.
Related
Hello all the web editing professionals! I have a bit an “alternative” problem:::
First off, here is my webpage that I need help adjusting elements’ heights and margins with::: www.rebelrock.fi. Please open that webpage in another browser window first!
So there are three DIV elements with the parameter position: fixed there; The MENU, the LOGO and the bottom FOOTER.
My problem is with the LOGO included DIV (at the top of the page, right under the MENU) and the main page content MARGIN-TOP positioning.
So as the browser windows size (actually the WIDTH) is changed smaller, at one point the REBELROCK .png-file LOGO IMAGE at the fixed-positioned DIV above will start automatically adjusting the width and height of that logo image. And when the logo is getting smaller (both by WIDTH and HEIGHT), then the HEIGHT of the DIV – inside of which the logo is – will be getting smaller too – and that’s exactly how I want it to be.
However, the non-fixed main content that is scrollable vertically, and especially the MARGIN-TOP value of that content will NOT be adjusted by the changing height of the FIXED logo DIV above, causing there unwanted space between the fixed logo DIV and the main content of the page.
So my question is; HOW CAN THE MARGIN-TOP VALUE OF THE MAIN CONTENT ELEMENT BE CHANGED IN RELATION TO THE CHANGING HEIGHT OF THAT LOGO DIV ABOVE IT?
As You can see, the pages are by far not finished in almost any way but I first want to have all the basic HTML/CSS to be perfect until starting to add more specific detailed content to the website. The site itself was initially a template of ADOBE DREAMWEAVER but that’s not important here 😊
I really hope someone here could help me.
Thank You in advance!
Yours, Tommi Tiihonen
e-mail: tommi.tiihonen#gmail.com
My webpage: www.rebelrock.fi
Give The saurce code to change edits on your website
I am re-building my website with DIVs, I want a DIV's height to adapt to the height of the browser, I can easily do that by positioning the DIV as absolute and then using "bottom-padding:0", however I need my DIV to be positioned as "relative" and therefore I can't get this result. This is my website (work in progress):
http://www.antoniofx.com/test/
As you notice, the RED box goes below the footer, I want the red box (a div) to stop where the footer is (even if I resize the browser) so that the content inside the red box will end when the browser end and then scroll if there is more content, instead of just pass the footer and going below it. I have researched this but couldn't find any solution. Thanks!
I'm wrestling with two unruly elements - a navigation menu and background bar (kept separate to deal with an opacity issue). Their positions are fixed so they stay visible during scroll. Their widths, which should mimic their parent's, is set with a 100%. Unfortunately, when the window is stretched narrow enough their width extends outside of the parent.
This is a diagram of the html:
<html>
<body>
<content>
<nav-bar>
<nav-menu>
...
</content>
</body>
</html>
Showing should be easier than describing, so here's a link to the page:
http://www.seanoneill.us/test/index.html
When the browser is stretched beyond the max-width of the content, everything looks fine. When the browser is made narrow, the right end of the nav-bar and nav-menu breaks out of the content width. In other worts, the right edge of "Contact" should be inset from the right edge of the content div by 20px of padding. The best way to see this is to scroll down a big so the menu covers an image and the semi-opaque nav-bar is visible. Then stretch the browser to the max-width of the content and wiggle it back and forth over that threshold.
Can anyone tell me how to keep the nav-bar and -menu inboard of the content div?
I've held off listing any of the css here since there are a handful of elements involved and I have no idea which is the critical one. I'm hoping it's acceptable to just post a link.
Thanks so much for reading.
You have content { min-width:700px }, and with your nav floated right, it will stay there.
If you can remove the min-width it will fix itself, or you can move .nav-manu outside of the .content container and, if you don't wrap it with something else that has min-width, it will honor the width of the body/window
I've been going mad trying to fix the responsiveness issue on a site I'm working on, and I can't find any solutions here or anywhere else. The main problem is my fixed footer. On the landing page of the site, there's a header, main area, and footer (the page expands when arrow clicked on, but that's irrelevant).
I've attached the footer to the bottom of the page using fixed positioning. When the screen width is >1024px, the header, main, and footer widths are 100%. Below 1024px, the header and footer widths become static (with 1024 as the static width).
The problem is, there comes a point where the footer should be overflowing on the right side of the screen (since the width becomes fixed). I can scroll right to see the rest of the menu in the header, but the footer doesn't scroll to the right. Rather, it just cuts off everything that would normally be there.
I've tried to recreate the issue in Codepen with the relevant code here: http://cdpn.io/iCJct but it doesn't act the same as the website (located here: http://dev.longviewsources.com/).
Thank you for your help!
The problem is that the footer, with position: fixed is fixed relative to the browser window rather than to your content so when the user scrolls, it moves and the user never sees it. You can use position: absolute; to fix the element to a position relative to the body which is much more controllable. From there you can make the body's height 100% and use a container with an overflow: scroll;
I made a fiddle to demonstrate: http://jsfiddle.net/jaredkhan/ywrx2/2/
I'm essentially trying to design my header and footer how it's done at StoreEnvy. They have a large (2400px wide) header and footer, which are always centered. When you resize the page horizontally, th same part stays centered, but new parts of the image are exposed along the end of the browser window.
I've tried setting up my document like this, but I can only either 1) Get the image the resize to fit the entire window, or 2) have scroll bars totaling the width of the images.
ANy idea what I may be missing??
Thanks!
Make the image a CSS background and center it. Then it will crop as expected. There are other methods but this is the easiest.