I have a little problem with my responsive design. I am using a normal <footer> with this style.
footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 5px;
left: 0;
}
It works fine and when I am using a smaller screen I have to scroll, that's normal.
The problem is that the <footer> is not at the bottom. It is in the middle of the screen. Like margin-top: 100% of the full screen, without scrolling.
I hope you understand what I mean.
Thanks!
Make Position fixed, This may look something like this
footer {
width: 100%;
height: 20px;
position: fixed;
bottom: 5px;
left: 0;
}
The idea is to position the element fixed to the bottom. Set the bottom offset with bottom or margin-bottom parameters.
You could go with this:
footer {
position:fixed;
height:20px;
bottom:0px;
left:0px;
right:0px;
margin-bottom:0px;
}
I hope I get your problem correctly. Your problem is that the footer is at the middle of the screen when there is little content in that page, right?
To solve the problem, you should make the parent element take up the full screen. For example,
<head>
<style>
footer {
width: 100%;
height: 20px;
position: absolute;
bottom: 5px;
left: 0;
}
body {
min-height: 100%;
}
</style>
</head>
<body>
<div>
some other content
</div>
<footer>
Some content inside footer
</footer>
</body>
Or if you don't mind the footer is always visible at the bottom of the screen, use position:fixed . Then you don't need to consider the height of the parent element.
Related
is there any way to make single page website without position absolute? Because when I want to variable height of containers, absolute position is little bit awkward. I mean when I insert more content to one container, the other above it should move down. I've tried position static and relative, but it didn't work for me.
Now my css looks like:
<style>
#header {position: absolute; top: 0; left: 0; width: 100%; height: 20%;}
#main {position: absolute; top: 20%; left: 0; width: 100%; height: 80%;}
#about {position: absolute; top: 100%; left: 0; width: 100%; height: 100%;}
#contact {position: absolute; top: 200%; left: 0; width: 100%; height: 50%;}
</style>
<body>
<div id="header">
content....
</div>
<div id="main">
content...
</div>
<div id="about">
long content which is covered with next div, because its "top" atribute settings
</div>
<div id="contact">
div which covers previous one's end
</div>
But when some container needs to be longer, problem is here..
Thanks for any help!
That depends on the style of your website. Of course you can set up anchors and have a one-page scrolling website, but I don't think that answers your question.
My suggestion is to try using absolute positioned elements as containers, and have your actual template inside them.
It would help if you provided some actual code or a specific issue you're having, as it's currently too vague.
I'll provide an answer to what I think you might be asking, though it isn't clear. I hope this isn't too basic.
Ditch the position property altogether.
Just have a div (which is by default 100% width) as your header at the top of your html. The content should be in another div below that.
Divs by default have 100% width, and their height is dependent on the height of their content. They will grow to accommodate taller content. These behaviors are because they have the property display:block .
You've used % which, if I remember correctly, is relative to the parent element. vh (viewport height) is relative to the height of the screen (100vh is the full height of the screen).
I added the background-color just so it's easier to see.
<style>
#header {
background-color: #777;
height: 20vh;
}
#main {
background-color: #999;
height: 80vh;
}
#about {
background-color: #777;
height: 100vh;
}
#contact {
background-color: #999;
height: 50vh;
}
</style>
I have a fixed DIV. The page contents should be displayed after the DIV, but they are under the DIV - partially hidden by it. How can I avoid this?
Here is the DIV's style:
#top_div {
position: fixed;
float: left;
top:0;
width: 100%;
height: 20%;
background-color: black;
}
we do not know your entire code, but if it is like
<div id="container">
<div id="fixed">fixed</div>
//a lot of html code here
</div>
put some top-padding to the .container div, padding equal to the height of the fixed div
Take a look at this.
Fixed Div
HTML:
<div>Fixed div</div>Can we see this?
CSS:
div {
position: fixed;
}
Now without fixed
HTML:
<div>Not Fixed div</div>Can we see this?
CSS:
div {
}
Just to show you what the difference is. You can see the div as position: fixed is sitting on top of the content after. The div will stay in that place always on screen. Thats what fixed does. You do not want this (I don't think as you didn't explain what you want it to do) so just remove it.
Example of position:fixed working on a page that can scroll, you will see it is always on the screen.
Example Here
Do not used fixed as this is what causes the problem for you.
I think you are trying to achieve this (http://jsfiddle.net/6Q9w4/8/)
.header {
height: 20%;
background-color: #4679bd;
position: fixed;
width: 100%;
}
.content {
position: absolute;
top: 20%;
left: 0;
right: 0;
bottom: 0;
padding: 10px;
overflow: scroll;
}
I am trying to stretch the content area of the page to 100%. I have got a fixed header (50px height) and a sticky footer (95px height) and anything in between should use 100% height...However I can't get this to work. Here is my CSS
<div id="wrap">
<!-- fixed top navigation -->
<div id="main">
<!-- main content -->
</div>
</div>
<footer>
<!-- footer -->
</footer>
The CSS is like this
html, body {
height: 100%; /* needed for container min-height */
}
#wrap {min-height: 100%;}
#main {
position:relative; /* needed for footer positioning*/
overflow:auto;
padding-bottom: 95px; /* must be same height as the footer */
padding-top:50px;
min-height:100%;
}
footer {
position: relative;
margin-top: -95px; /* negative value of footer height */
height: 95px;
background-color:#ebebeb;
}
body {margin:0px;padding:0px;}
Any ideas how to do this?
if you've putted the footer relative ("sticky") meaning you want you website to scroll down with the content.
so you need do create another div ("block") -> in the HTML position the div between header and footer,
and give it a width of 100% and a height of auto; (meaning: the div will fill up verticaly with the amount of content putted in it.
you can make the footer like
footer{
position: absolute;
border: 3px solid #eee;
height: 30px;
top: auto;
bottom: 0;
left: 0;
right: 0;
}
i have tried before a lot
try use javascript to set height 100%
or try to use frameset
UPDATE
this article for using css
http://www.dave-woods.co.uk/index.php/100-height-layout-using-css/
but i am sure 90% that it may have a problems with different browsers but try it.
and this article for using jQuery
http://nicholasbarger.com/2011/08/04/jquery-makes-100-height-so-much-easier/
and this for using frameset
http://www.echoecho.com/htmlframes08.htm
and
http://www.w3schools.com/html/html_frames.asp
Finally you will choose what is useful for your project
Good Luck
My Regards
The best and simple way is
html,body{
height:100%;
}
#wrap {
height: calc(100%-50px-95px);
}
.footer {
//your code here
height: 95px;
}
EDIT: Sorry for all the confusion. It was just a stupid thing I missed. All of my webpages are drawn inside a form (uniform throughout the whole company) and that form has a fixed width. I had just found it thanks to Chrome's "Inspect Element". All these code should work as intended.
Here's my CSS:
#header {
position:fixed;
left:0px;
right:0px;
height:75px;
}
#main {
position: relative;
padding-top: 75px;
padding-bottom: 100px;
left: 0;
right: 0;
background-color: #EFEFEF;
}
#footer {
position:relative;
height: 100px;
left: 0;
right: 0;
background-color:#333333;
}
And my HTML:
<div id='header'>
Header
</div>
<div id='main'>
main
</div>
<div id='footer'>
Footer
</div>
This doesn't seem to do anything. Neither does width: 100%; They only work when position is absolute or fixed. How can I stretch the width when position is static or relative?
When you set left: on a position:relative it tells itself to move that many pixels left.
Then when you set right:, it says 'ignore, left, instead move this many pixels right'
As such, you've not actually defined a width for the element.
Also: have you tried:
body, html {
margin:0;
padding:0;
}
After a few minor tweaks, the CSS works fine in my browser:
http://jsfiddle.net/fwvd2/
I am trying to emulate a sort of pop-up help dialog for my web site.
When the user clicks help, a mask covers the whole page with a dark, partially transparent mask, and a helppage div with a higher z-order is made visible.
The helppage div is 80% wide and 90% high positioned absolute at left 10% and top 5%, all relative to body.
So far all is great.
The content of the helppage div is:
- a full-width header with a close anchor 20px high floating right.
- a iframe-div to occupy the rest of the helppage div containing:
- an iframe to display the html document in question
The problem:
I would expect the height of the iframe-div to be 20 px less than the helppage div, but for some odd reason it is 3px larger than the helppage div.
As a result the bottom of the iframe is invisible.
The html:
<div id="helpbox">
<div id="helppage" class="window" style="display: block; position: absolute;">
<div class="hd-header">
<a class="close" onclick="hidehelp()"></a>
</div>
<div class="iframe-div">
<iframe id="HelpPageFrame" src="/help-system.html"></iframe>
</div>
</div>
The css:
#helpbox .window {
position:absolute;
display:none;
z-index:9999;
}
#helpbox #helppage {
background: white;
width:80%;
left: 10%;
top: 5%;
height:90%;
padding: 0px;
overflow: hidden;
}
#helppage iframe {
border: none;
width: 100%;
height: 100%;
}
#helppage .iframe-div {
width: 100%;
position: relative;
display: inline-block;
}
#helpbox .hd-header {
height: 20px;
font-weight: bold;
overflow: hidden;
display: inline-block;
width: 100%;
}
#helpbox .close {
width:20px;
height:20px;
display:block;
float:right;
clear:right;
background:transparent url(images/close_icon_double.png) 0 0 no-repeat;
}
Any suggestions would be greatly appreciated
edit As mixel pointed out, an important detail slipped, when I trie to simplify the scenario, that has been corrected.
Please, be accurate, when you are asking questions.
There is whitespace in '#helppage .window' selector. It selects nothing. Because of that '#helppage' is not absolute positioned.
There is no '#helpbox' element.
edit
Though you are still a bit innaccurate (you forgot to close 'DIV'), there is answer. You need to fill the remainder of '#helppage' with '.iframe-div'. If you set '.iframe-div' height to 100%, it takes 100% height of parent element - '#helppage'. To solve this problem you need absolute positioning for '.iframe-div':
#helppage .iframe-div {
position: absolute;
top: 20px;
bottom: 0;
right: 0;
left: 0;
}
Or set height with javascript.
Check out this: Make DIV fill remainder of page vertically?
It's fairly common question.