I know this has been asked many times and I've tried the fixes provided.
I saw this post: Make div 100% height of browser window
and I followed what it said, make the div instead
height: 100%; /* Make it */
height: 100vh;
however my div still has a gap between the top of it and the browser window.
https://jsfiddle.net/hgs3d1n6/
What am I missing or not doing which is causing this problem? I've tried other suggestions to like making the html, body 100%.
Thanks.
Both the body and paragraph elements have a default margin. The easiest way to clear that cross browser is with:
body,p {
margin:0;
}
jsFiddle example
Related
I wanted to implement a sticky footer that will be pushed to bottom if content is less.
I have gone through various posts in this website and could see that two popular solutions (without flexbox) uses either
html, body
{
height: 100%;
}
OR
html
{
position: relative;
min-height: 100%;
}
I am posting only the parts of the solution which I did not understand. Posting my doubts here. Please help me to understand these solutions
(a) as stated, first solution uses 100% height for html and body. But what is 100% height here? Is it refers to the height of view port or height of the entire document?
(b) in first solution, If 100% height refers only to view port height, isn't it required to make the setting to min-height instead of height because if document is larger than the view port, restricting to 100% height is not relevant.
(c) I know we make a element relative so that its child absolute/relative elements gets position from it. But what is the meaning of making html relative as it has only document as its parent?
(d) also, from your experience is there any better solution (without flexbox)? Similarly there are many posts with respect to issues in mobile browsers while using such solutions (like ios8 issue when using 100vh). Whether these solutions have any such issues?
My html knowledge is very much limited. thanks for help.
Note: both solutions are working fine and giving sticky footer as required
A)
The html and body tags do not fill the entire window by default, so that code forces to be 100% of screen even when inside content is less.
Without:
With 100%:
B)
You can get away with having the <body> as 100% because the content inside by default will overflow and the <html> tag has overflow:auto on by default.
So, the following works, but the content will overflow the <body>
html, body {
height: 100%;
}
A better solution would be one of the following:
html, body {
height: 100%;
}
body {
overflow: auto;
}
Or
html{
height: 100%;
}
body {
min-height: 100%;
}
Please check the following link in the latest safari:
http://www.grupoguion.com/
The footer is fixed at the bottom and supossed to revealed with the scrolling, so the previous section has a margin-bottom but it doesn't work, only in Safari.
Everywhere else is ok, even in I.E.
I tried to add overflow: auto in the page-wrapper, but everything gets weird in all browsers with elements dissapear and appear.
I also have read that removing height: 100% in the body and html may fix that, but that is not an option for me, because i need the images to fix the browser height.
Does anybody have another possible solution please?
Thank in advance.
You can add a div with the size of your bottom and make it transparent.
html:
<div id='tr-footer'>
</div>
css :
#tr-footer{
height: ?px;
width:100%;
background:transparent;
}
Try making the element
display:inline-block
and Safari should respect its dimensions and margin.
The accepted answer is way too complicated. Consider this approach (taken from another thread):
It's a normal weird behaviour calling margin collapse.
To simply avoid it add overflow: auto; on the [footer] container.
Your footer container could look something like this:
.footer-container {
overflow: auto;
}
I have a page with a header (with dynamic height!) and a content. The content should fill out the rest of the page - even if it has not enough text in it.
So far it's a question which is asked many times and is always answerd with something like code I've tried:
html, body {
height: 100%;
}
.header {
height: 50px;
background-color: #ff0;
}
.content {
min-height: 100%;
background-color: #ccc;
}
my problem is that with this code the height of the .content does not just fill out the rest of the page but it has something like the screen size as height. However with this code I have to scroll to see the bottom of the .content.
the code: http://jsbin.com/bilux/1/edit
At the moment there appears a scroll bar when I set the .content height to 100%:
edit:
thanks for the ways to solve that for a static header height! But isn't there a way to do that without knowing the height of my header?
You can use the calc function like this:
.content {
min-height: calc(100% - 50px);
background-color: #ccc;
}
Also note that the default margin of body may make unexpected result, you should also reset it to zero.
Working demo.
UPDATE: If you want it more dynamic, I'm sure you can try using flex-box layout, but it's still not supported widely (just the latest versions of the most modern browsers. For older browsers you should add libraries like prefixfree). Another solution is you can try using table-layout for the header like in this updated demo.
You're using 100% of the page, while other elements use up some of that space. Trim down your percentage based on the space used. For example, on my website it needs 92%
The WIDTH and HEIGHT element is based on the BODY of the page (which is based on the HTML of the page), and not the space it has available. So 100% is 100% of the on-screen space. While other elements on the page may use 10% of that space, and push the content to 110%.
It's the same concept when your page fills with content, and you get a scrollbar. The height of the body is growing based on the height of the content areas container holding the growing content.
absolute positioning might be the answer. Depends on the structure of your entire page. Check it out http://jsbin.com/qeveroci/1/edit
if you take a look at this link (link removed) on an ipad, you will notice that my header doesn't take the full width of the page, there's a full px gap on the right side. Same issue for the footer. I don't understand why because these elements have a 100% width in my CSS sheet and it looks perfect on my mac with safari and firefox. Any idea what is wrong? (didn't include the code here as there would have been too many lines since I don't know where the issue is) Thanks
This is because of your min-width in html,body Changing min-width to 1000px will fix your issue.
Change this
html, body {
min-width: 980px;
to this
html, body {
min-width: 1000px;
your style for .wrapper has a width of 1000px set on it. Removing width:1000px in line 452 of your style.css should do the trick
Today I came across a very nasty problem, I need to make the front-end layout for a website and it has a certain design element on the page that puzzled (even) me.
Now I am not exactly unfamiliar with html, css positioning, making layouts etc, so please don't make 'guesses' as to how I could solve it. I want a working example.
Here is a jsfiddle with my code and problem:
http://jsfiddle.net/sg3s/A9vzA/ http://jsfiddle.net/sg3s/A9vzA/15/
What is currently happening;
The #container has a min-height of 100% (red background) width of 970px. This is the width the page must have as a minimum. The #top (lightbrown background) div is irrelevant for the problem but part of the design.
The problem lies in #header (purple background) which currently has a width of 1022px (too wide for 1024px resolution + a scrollbar, even with a maximized window) and a negative left margin to keep it centered on the container, which is what needs to happen. When the width of the screen width falls below 1022px a horizontal scrollbar apears as the thinnest element on the page is 1022px wide. (its behaviour is the same with position absolute and a negative left offset)
What I want to have happening;
I want the 'overflow' of #header over #container to dissapear into the sides and only get a scroll bar as the viewport gets below 970px wide. (If someone can rephrase this )
Let me be a little bit clearer on this:
The 100% height layout needs to stay and be compatible with IE7+
The header needs to be centered over the container, this is the reason it is inside it in my example but be my guest to take it out if that solves the problem.
My example looks and acts correct as long as the viewport is large enough to accomedate the header.
The trick is to make it look and act the same while the sides of header overflow into the sides of the viewport when the viewport is too slim to fit that header.
Updated the example to make the change / centring a bit more obvious.
If possible I want the layout to support all the way down to IE6 though IE7+ will be fine. The final page will prompt to install Chrome Frame anyway. And ofcourse don't forget about Chrome, FF 3.5+.. (Opera?). Use of JS will not be acceptable, unless you can convince me that there is absolutely no other way, but jQuery will be present on the page.
Thank you for at least trying! (Challenge yourself! :D)
This code worked for me in FF/Chrome/Safari/Opera. Can't test in IE because I'm on Mac now, but must work in IE 7+
Example: http://jsfiddle.net/XVraD/3/
Base idea is to wrap #header in another container with "width: 100%; min-width: 970px;" and place in outside of #container, so it will do all the overflow to you.
EDIT 2: Solution that works in IE6: http://jsfiddle.net/XVraD/9/
EDIT 3: This version is fixed to have height 100% in modern browsers and old IE's: http://jsfiddle.net/XVraD/9/
It is a hard one, the only real solution I can come up with is this that you use Media queries like this:
#media all and (min-width: 970px) {
body, html {
overflow-x: hidden;
}
}
It is not supported by old browsers, there you would need a Javascript!
As far as I can tell, the best solution would be to restructure your HTML to put your header outside of the container.
<div class="outer">
<div class="header">
...
</div>
<div class="container">
...
</div>
</div>
CSS:
.outer { ... }
.header {
max-width: 1022px;
min-width: 970px;
margin: 0 auto; }
.container {
width: 970px;
margin: 0 auto; }
Demo: http://jsfiddle.net/Wexcode/tJXHF/
http://jsfiddle.net/QrVJJ/
#header is positioned outside and above (with z-index) #top. It also gets margin: 0 auto; and the background is positioned top center with min-width:970px and max-width:1022px.
#header {
margin: 0 auto;
z-index:5;
min-width: 970px;
max-width: 1022px;
height: 201px;
background: #390419;
overflow:hidden;
background: transparent url(http://4.bp.blogspot.com/_rScBRKlTdoE/TC6rNWAyD9I/AAAAAAABOTo/BWkJH9ymovo/s1600/IMG_9692.jpg) no-repeat top center;
}
How about setting the header to have a min-width of 970px and a max-width of 1022px? There are ie hacks to make min and max width work. This would make make scrollbars appear after the viewport shrinks to below 970 and as you stretch the viewport the header would grow up until 1022 after which it would stay 1022.
Having this one in Chrome.
http://jsfiddle.net/A9vzA/10/
Put an inner div inside the #header
The header has position relative and no float and with 970px
The inner div has position fixed and width 1022px and margin 0 -26px
--edit
but doesnot work in IE7
--edit
this works in IE7, too http://jsfiddle.net/A9vzA/11/ just add another inner div
The first inner div is position fixed and width 100% and text-align center
The second inner div is margin 0 auto and width 1022px
Can anyone test it in IE6
--edit
nope doesnot work if you got content in your #container. position fixed is no option
Is this what you're after:
http://jsfiddle.net/HbxTQ/8/
Fullscreen:
http://jsfiddle.net/HbxTQ/8/embedded/result/
(I've not yet made it cross-browser, only tested it in Chrome. What to ensure I have the idea right first.)
sg3s, you sound like a tough customer but I thought I'd throw my hat in the ring. None of us understands exactly what you need so please post the flattened design.
My assumption is that you need one or two layers with adjustable width behind a fixed 960px content container. Using float on adjustable width containers is going to make it nearly impossible to do what you want. Instead, use postion: absolute for a container holder (a.k.a. wrapper) and position: relative for the inner content containers. No Javascript is necessary.
My recommendation is removing #header from the primary #content container and separating the background image from the #header so they can be rendered and positioned independently.
http://jsfiddle.net/dylanvalade/ZcejP/