Things i want achieve is quite simple
just at top a fixed position element that do not move while scrolling
down the document.
and after is a div#content have some margin-top from the top edge
and center in the window.
so the code is:
html
<div class='head-container' id="headerCom">
<header id="a"></header>
</div>
<div id="content" role="main"></div>
CSS
* {
margin: 0;
padding: 0
}
body {
width: 100%;
height: 100%;
position: relative;
}
.head-container {
position: fixed;
top:0;
left:0;
width: 100%;
height: 100px;
background: red;
_position:absolute; // make the ie6 support the fixed position
_top: expression(eval(document.documentElement.scrollTop)); // make the ie6 support the fixed position
}
header {
display: block;
width: 960px;
height: 100px;
margin: 0 auto;
position: relative;
zoom: 1;
background: blue;
}
#content {
border: 1px solid black;
margin: 130px auto 0 auto;
width: 960px;
height: 1000px;
background: #999;
margin-top: 150px;
}
all the modern browser is well support,but in ie(ie7,ie8,ie10) do not work correctly,things is just like it ignore the margin-top i set to the div#content;
so far i have checkout the other question on stackoverflow,and i try almost everthing i could.
when i change the margin-top of the div#content to the padding-top,things okay.
When i put a div.clear(clear:both)in between the div.header-container and the div#conetent,the things goes okay;
Or i follow other questions' solution that it caused by the hasLayout, and then take out the width and height of the div#content, the things is also okay, but in this way, i will need to put another div#inner-content inside the div#content, and set width and height to it to see the result.
so i am quite confused by the hasLayout, and i am not quite sure i am completely understand what it is and not quite sure what is happening in here in my code.
So actually can all you help me with this, is there any other solution could fix this problem, and explain this wired things to me?
Thank you anyway.
It works fine for me once I get rid of the last margin-top attribute. Do you know you have set it twice? Once with margin and them again with margin-top. If you edit just margins first value it wouldn't work because the last one will override the first one.
Related
I have a div inside my html body, and the div properties is declared this way in css:
#container {
width: auto;
height: inherit;
padding: 0;
overflow: hidden;
position: relative;
background-color: #FFFFFF;
}
I tried all height values and none worked as I wanted to. The problem is, I'm doing some query to display results inside this div. Sometimes I'll have just 1 result, another time 50. And here comes the problem. When I have only 1, the div goes up and shows the page background (behind the div) while I want it to be white and occupying the entire height even with 1 result only. Other times, when I get 50, the scrollbar of the page, do not get big enough to roll the entire div, and the informations get inside the bottom side of the div without the possibility to read them. If I get the height working for one case, it screw up the another. How to get both things working?
My html page where the div is:
<body id="home">
<div id="container">
<?php
if (isset($_GET['news']))
{
include 'news.php';
}
?>
</div>
</body>
The news.php is where I make the query to display the thing on the div.
Maybe what you need is:
#container {
width: auto;
min-height: 100%;
height: auto;
padding: 0;
overflow: hidden;
position: relative;
background-color: #FFFFFF;
}
the point is the overflow to scroll
#container {
width: auto;
height: inherit;
padding: 0;
overflow: scroll;
position: relative;
background-color: #FFFFFF;
}
You can always explicitly set the height of the html tag to 100% in the CSS and then set your container class to whatever percentage of the screen you would like it to fill. It should always be that percentage.
Hope this points you in the right direction.
use this:
html, body {
height: 100%;
}
#container {
height: 100%;
}
if you want your #container to always stick to the bottom of the page, then use this:
#container {
position: absolute;
bottom: 0;
}
Creating a fiddle could have helped.
I'm looking for a way to have a fixed div inside another, from which a part of it exceed without horizontal scrolling.
Maybe it will be easier to understand with this: http://jsfiddle.net/pF4Qx/
html:
<div id="global">
<div id="inner"></div>
</div>
css:
#global{
margin: 0px auto;
width: 300px;
height: 300px;
position:relative;
top: 0px;
background-color: #ff0000;
}
#inner{
width:100px;
height: 100px;
position: absolute;
background-color: black;
right: -50px;
top: -50px;
}
The black div is inside the red div, but in my project, the red div is in fact the outside container of my website and is 1024px large, so I don't want this ugly horizontal scroll when my browser window is 1024px large, but just want this "outside" part of the black div to be hidden.
I've tried to solve this by putting an overflow parameter, and even tried to put this black div outside with a fixed or absolute position, But I can't find a better result...
#global{overflow: hidden;} works fine for me in this case
As SW4 mentioned in the comments, add overflow: hidden; to the parent div global properties in your CSS.
Putting an overflow:hidden; on your container (#global) gets the job done.
Not sure if i understood your question correctly, but try putting this in your stylesheet:
html{overflow-x:hidden;}
That should do the trick. Keep in mind that this is not really friendly for people with smaller screens or zoomed in browser windows.
I finally found a great solution (I think) to solve my problem:
html:
<div id="inner"></div>
<div id="global">
</div>
css:
#global{
margin: 0px auto;
width: 300px;
height: 300px;
position:relative;
top: 0px;
background-color: #ff0000;
z-index: -1;
}
#inner{
width:100px;
height: 100px;
position: relative;
background-color: black;
margin: auto;
z-index: 2;
left: 150px;
top: 50px;
}
Here is the updated fiddle: http://jsfiddle.net/pF4Qx/4/
Hope this will help someone ;)
I am trying to make a footer that spans the width of a page minus 10px on the left and right. I am trying to do this by giving the body a padding on all sides of 10px. In the code below the header works just fine, but the footer is ignoring the body padding on the right side. Why is it doing that and how can I fix it?
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding:0;
margin:0;
}
body {
margin: 0;
padding: 0 10px;
}
#header {
height: 150px;
width: 100%;
margin: 0 auto;
background: #333;
}
#footer {
position: fixed;
bottom: 5px;
width: 100%;
background: #f63;
text-align: center;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="footer">I am the footer!</div>
</body>
</html>
your footer not ignoring body padding, look through console at that element sizes and you will see that width of your footer is 100% of window width + 10px from left padding + 10px from right padding.
you can use calc function in css: https://developer.mozilla.org/en-US/docs/Web/CSS/calc
#footer {
width: calc(100% - 20px);
}
JSFiddle
Footer width and padding are calculated separately. You can use use box-sizing: border-box to prevent this from happening
Use this for all elements to behave this way
* {
box-sizing: border-box;
}
There is a good video by Travis Neilson on his YouTube channel DevTips, where he explains the box-modal concept.
#footer {
position: fixed;
bottom: 5px;
left: 10px;
right: 10px;
background: #f63;
text-align: center;
}
demo: http://jsbin.com/benosofo/3/
A fixed element is not fixed in relation to the body, it's fixed in relation to the window. If it would be fixed in relation to the body then it would be just as absolute positioning, and it would scroll with the body.
You can make a fixed container for the footer, so that you can use a padding on that.
HTML:
<div id="footercontainer"><div id="footer">I am the footer!</div></div>
CSS:
#footercontainer {
position: fixed;
bottom: 5px;
width: 100%;
padding: 0 10px;
}
#footer {
background: #f63;
text-align: center;
}
None of the solutions in the net worked for me. so I solved it another way. I was trying to create a modal for adding address and was testing it on the mobile mode. I wanted a fixed layer with rgba(0,0,0,0.75) to cover all the window and in the center, a white form appear for the user. the form header was hiding in the top (and unscrollable) and in the bottom, was sticking to the bottom of window which was not looking good (in some cases, some element won't work when they don't have enough space from the window borders).
so I solved the problem by putting a div after the form div in the bottom (to stick to the window bottom instead of my form) and made it transparent. so it worked! (I have to mention that I am writing react code)
this is my div:
<div className="modal-padding"/>
and this is my styling for this div:
.modal-padding {
width: 100%;
border: 10vh solid transparent;
}
I used one, before the form div and one after that.
Be careful. I tested giving a width: 100vw and height: 10vh to the div but when it has no content, it doesn't work, seems it doesn't exist at all. so I gave a border.
I hope this solve your problem too, or give you an idea for solving the issue.
Good luck.
You could make a wrapper for your footer and apply the 10px padding to that instead.
#footer-wrap {
position:fixed;
bottom:0px;
left:0px;
padding:10px;
}
and then when you place your footer inside it will be correctly padded. This way is the most backwards compatible solution as it doesn't rely on css3 calc.
JSFIDDLE
http://jsfiddle.net/pk8uU/
I know that this question has been asked many many times, but I haven't found a solution that actually works for me.
My html...
<body>
<div id="container">
</div>
<div id="footer">
</div>
</body>
My css....
body, html { min-height:100%;}
#container
width: 980px;
min-height: 100%;
margin: 0 auto;}
footer {
background-color: rgb(90,200,219);
height: 50px;
position: realative;
margin-top: -50px;
width: 100%; }
What is happening, is that the footer is totally sticking to the bottom of the page. But, when content is short, I still have to scroll down to find the footer which is sticking to the bottom. Can someone tell me what is wrong in my code?
I think you should fix up your CSS snippet as it has quite a number of things wrong with it. Use copy & paste to put it up here next time so your typo's don't throw anyone off.
body, html { min-height:100%; }
That should be height:100%;, but I think it might be a typo as you are saying that the footer sticks to the bottom, which it wouldn't if that line was really in your actual CSS.
#container is missing a bracket and should be #container {.
If those issues are fixed, in addition to the issues #Owlvark has pointed out. It seems to work fine here at jsFiddle. The only improvement I could think of was adding margin: 0px; to body, html, which might have been your issue as it gets rid of some extra space which would render a vertical scroll bar. But your issue seems more serious than that when you say you have to "scroll down to find the footer".
Try these methods I put together in a gist. https://gist.github.com/derek-duncan-snippets/4228927
body, html { /*body and html have to be 100% to push header down */
height:100%;
width: 100%;
}
body > #wrapper { /* all content must be wrapped... #wrapper is my id. Position relative IMPORTANT */
position: relative;
height: auto;
min-height: 100%;
}
#header {
height: 100px;
background: rgba(255,255,255,0.2);
}
#content-wrap { /*#content-wrap is the wrapper for the content without header or footer | padding-bottom = footer height */
padding-bottom: 100px;
}
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: rgba(255,255,255,0.2);
position: absolute;
bottom: 0;
}
I have a simple HTML page with a sidebar floated to the left and all content to the right. In the main content area I have an <iframe>. However, when I use CSS to set the height of the frame to 100% it seems to overflow the containing div for some reason, resulting in a small amount of white-space after my content.
Here is my HTML content:
<div id="container">
<div id="sidebar">
<p>Sidebar content</p>
</div>
<div id="content">
<iframe id="contentFrame"></iframe>
</div>
</div>
And here is my CSS:
html, body {
height: 100%;
}
#container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
background-color: grey;
}
#sidebar {
width: 100px;
float: left;
background-color: blue;
height: 100%;
}
#content {
margin-left: 100px;
height: 100%;
background-color: yellow;
}
#contentFrame {
border: none;
padding: 0;
margin: 0;
background-color: pink;
height: 100%;
}
(NOTE: Before anybody asks, #container { position: absolute } is necessary for layout reasons; I can't change that.)
You can see it 'working' on this fiddle: http://jsfiddle.net/9q7yp/
The aim is to get rid of the white band along the bottom of the page (i.e. there shouldn't be a vertical scroll-bar in the result). If I set overflow: hidden for #content then the problem goes away. I'm happy to do this if necessary, but I can't for the life of me work out why it doesn't work without this. Can anyone tell me why?
Try to add
display:block;
to the iframe. http://jsfiddle.net/9q7yp/14/
Edit:
Well, it turns out there's a better solution (both in practice and in understanding what's going on):
Add
vertical-align:bottom;
to iframe#contentFrame. http://jsfiddle.net/9q7yp/17/
<iframe>, as an inline element, has the initial value of vertical-align:baseline, but a height:100% inline element will "push" the base line a few pixels lower (because initially the baseline is a few pixels higher from the bottom),
so the parent DIV is thinking "well content will be 2 pixels lower, I need to make room for that".
You can see this effect in this fiddle (check your browser console and pay attention to the bottom property of both ClientRect object).
Add margin:0 to body
html, body {
height: 100%;
margin:0 auto;
}
WORKING DEMO
Add margin: 0 to your html, body {} section.
...................demo
Hi now give to overflow:hidden; of this id #content
as like this
#content{
overflow:hidden;
}
Live demo