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
Related
i try to create div footer, but have problem.
I have few div blocks located one by one inside container.
Container have 100% height.
Inside Container First Div have 100px height (header).
Second Div (Mainbody) need to have all height up to site bottom (bootom part of screen size) or more.
Third Div have absolute position and located on bottom.
But summary height of Container Div is more than 100% because i see scroll on right part of page.
How to resolve this?
Page with css: height:100% takes more than 100%
html, body {
height: 100%;
margin:0;
padding:0;
background-color: yellow;
}
.container {
position:relative;
min-height:100%;
background-color: green;
}
.header {
background-color: blue;
height: 100px;
}
.mainbody {
background-color: gray;
height: 100px;
}
.footer {
position:absolute;
bottom:0;
width: 100%;
background-color: red;
}
<body>
<div class="container">
<div class="header">
<p>
header
</p>
</div>
<div class="mainbody">
<p>
mainbody
</p>
</div>
<div class="footer">
<p>
footer
</p>
</div>
</div>
</body>
Open with your browser. It doesn't show any scroll bars as shown in this snippet. Set
.container{ height:100%}
rather than
min-height:100%
as it will exceed the page full size.
You might try position:fixed; bottom:0; left:0; right:0; height:somevalue; for the footer element, and for the body element, also add padding-bottom:somevalue(somevalue is the same value for body's padding-bottom and for footer's height)
A dirty solution for your html margins. I've added a margin-top property to your html, body css. Now there is no scrollbar on the right.
It seems like margin: 0; has no effect on margin-top property. I've read online that some browsers tend to set margins by default on certain elements like body. I've given you a really dirty solution that may not work well with responsive design.
html, body {
height: 100%;
margin: 0;
padding: 0;
margin-top: -8px;
background-color: yellow;
}
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've found a method of placing the footer that I like, except for the fact that footer overlaps the content when the page resizes.
Using the structure and formatting I have already, how can I "clear" the footer, so that it drops off when the page resizes (avoiding an overlap of #content)?
I've tried clear: left and that does nothing for this.
Essentially, I want the footer to always be visible, and attached to the lower left of the window, as long as space allows; however, when the window gets smaller, I don't want the footer to overlap my content.
CSS:
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
background-size: cover;
margin: 0;
height: 100%;
}
#wrapper {
min-height: 100%;
height: 100%;
min-width: 900px;
overflow: hidden;
}
.main_nav {
margin: 0;
width: 160px;
float: left;
padding-left: 40px;
overflow: hidden;
}
#content {
float: left;
width: 750px;
height: 600px;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 50px;
}
HTML:
<body>
<div id="wrapper">
<div id="header">
<h1></h1>
<ul class="main_nav">
<li></li>
</ul>
</div>
<div id="content">
</div>
</div>
<div id="footer">
<div id="footer_content"></div>
</div>
</body>
The answer has been already choosen, but i wanted to give an alternative.
The "wrapper" contains "header" and "content", while the "footer" is outside of it. You could, for example, add
z-index:10;
to the wrapper's css and
z-index:1;
to the footer's css.
This one last isn't really needed, but it's for completeness. This way, whenever they get in "touch", the one with higher z-index will remain on foreground (ie, higher level on the z-axis, that is the axis perpendicular to the screen surface) and the other elements will slide behind, according to their own index.
This problem is because of width. You width is different in each case i.e. in content , footer & wrapper as well. I created a jsfiddle
[http://jsfiddle.net/jvaibhav/xncuF/37/]
try this.
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 am experiencing some strange behaviour when attempting the following (see jsfiddle: http://jsfiddle.net/9nS47/).
HTML:
<div id="slider">
<div id="wrapper">
<div id="navigation"></div>
<div id="container">
<div id="button"></div>
</div>
</div>
</div>
CSS:
HTML,BODY
{ width:100%; height:100%; }
* { margin: 0; padding: 0; }
#slider
{
position: fixed;
top: 0;
bottom: 0px;
left: 100px;
overflow-y: auto;
background-color: red;
}
#wrapper
{
position: relative;
height: 100%;
background-color: #000000;
min-height:400px;
}
#navigation
{
display: inline-block;
width: 80px;
height: 100%;
background-color: #0000FF;
}
#container
{
display: inline-block;
height: 100%;
background-color: #00FF00;
}
#button
{
width: 22px; height: 100%;
float:right;
background-color: #CCFFCC;
cursor:pointer;
}
What I am trying to do is making a left side navigation bar that spans the whole visible window height and only Shows a scrollbar if its height is smaller than for example 400px. The scrollbar for that div seems to be always visible due to some resizing problems (there is an extra pixel at the bottom I can't explain[color:red]).
Firefox also moves the second child element below the first when the scrollbar is visible because the scrollbar seems to be part of the content area and thus takes up to around 20px space. This does not happen if Overflow: Auto is replaced with Overflow: scroll however.
ATM changing the layout (specifically the Container with Position: fixed) is not an option.
Don't mind the space between the green and the blue box. Seems to be a whitespace problem.
Since it seems like you are unable to change your 'wrapper' code much, I tried to change your original code as little as possible. In fact, the only thing I did was to add some jQuery.
Check out this updated jsfiddle. I have included jQuery and the javascript I added was this:
$(window).bind("load resize", function(){
//this runs as soon as the page is 'ready'
if($(window).height() < 400){
$("#slider").css("overflow-y","scroll");
}else{
$("#slider").css("overflow-y","hidden");
}
});
Basically, 'onload' and 'onrezise', the jQuery figures out if you should show the scrollbars or not.
The reason that your "auto" isn't working is because of the "fixed" position of the slider element. The browser cannot perfectly figure out the heights.