I am designing a master page. The layout is very simple.But height adjustment does not work for me. The layout is:
<html>
<head>
</head>
<body>
<div id='container'>
<div id='top'></div>
<div id='middle'></div>
<div id='bottom'></div>
</div>
</body>
</html>
What I want to achieve is
'Container' minimum height should be 100% and it should expand when the content is more than the height.
height of the 'top' div should be 100px - fixed height.
height of the 'bottom' should be 50px - fixed height and
the remaining height(space) should be distributed to 'middle' div.
In short, whatever the height of the screen is header should be at the top with fixed height and footer should be at the bottom with fixed height. When the content exceeds the height of the 'middle' div then it should expand only with browser scrool bar without additional scroll bar.
I used the following css but it does not work.
html, body {width:99%; height:98%; font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif; font-size:12px;}
#container {width:990px; height:100%; margin:0px auto 0px auto;}
#top {width:990px; height:100px;}
#middle {width:990px; min-height:100%; border:1px solid #336699; overflow:auto}
#bottom {width:990px; height:50px;}
Note: I am going to use this in ASP.NET MVC pages.
Try this:
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
height:auto !important; /* real browsers */
height:100%; /* IE6 */
min-height:100%; /* real browsers */
}
div#top {
padding:1em;
}
div#middle {
padding:1em 1em 5em; /* bottom padding for footer */
}
div#bottom {
position:absolute;
width:100%;
bottom:0; /* stick to bottom */
}
Related
I have a simple 4-panel webpage set up mostly using divs and css. The panel divs are header, footer, menu, and content. The menu and content are supposed to be parallel columns with the same height.
Everything works fine until I put an iframe inside the content div. The content div then becomes taller than the menu div, even when I set them to the same height. I know that the iframe is the reason because this doesn't happen when I take out the iframe, but it's the content div - not the iframe - that actually is too tall.
How can I fix this? Some similar questions have been asked, but the proposed solutions didn't work for me, unless I was doing something wrong. Here's my complete code:
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
body {
margin: 0;
padding: 0;
}
#header {
background-color: #7D110C;
height:100px;
}
#menu {
float:left;
width:300px;
background-color: lightGrey;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#content {
margin-left:300px;
background-color: white;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#content iframe{
width:100%;
border:none;
margin: 0;
padding: 0;
background-color: pink;
min-height:500px; /* for modern browsers */
height:auto !important; /* for modern browsers */
height:500px; /* for IE5.x and IE6 */
}
#footer {
clear:both;
background-color: #7D110C;
height:100px;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="menu"></div>
<div id="content"><iframe id="content_iframe" name="content_iframe"></iframe></div>
<div id="footer"></div>
</body>
<script type="text/javascript">
console.log( $('#content').css('height') );
console.log( $('#content_iframe').css('height') );
</script>
</html>
height:auto !important; overrides height:500px; in #content and in #content iframe. If you get rid of the height:auto !important; in both CSS classes, it works fine. jsFiddle
Ok here's the real fix, just leave everything as is and add display: block to #content iframe. That fixes it. An iframe is an inline frame, hence the extra white space. Updated jsFiddle
For modern browsers you can try this:
add position:relative to #content
remove width, height, min-heigth from #content iframe and add this instead:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
No idea what to do for IE 5 and 6, though.
If you set a fixed height:500px; and the iframe is taller than this, you will get a scrollbar on the side.
If you want a fixed height at all times, remove both height: auto !important and min-height: 500px and leave only height:500px.
height-auto: The browser calculates the height. This is default.
min-height: Defines the minimum height
The following will make menu and content have the same height at all times.
HTML
<div id="wrapper">
<div id="menu"></div>
<div id="content"><iframe id="content_iframe" name="content_iframe"></iframe></div>
</div>
CSS (Just add this to the already existent)
#wrapper { display: table; }
#menu { display: table-cell; } /* Remove the float */
#content { display: table-cell; } /* Remove the float */
Note, this won't work on IE7 and below though. Either you'll have to use fixed height for both menu and content or javascript.
I want to create an HTML page which:
Appears centred horizontally
Has a white background the entire height of the window
Contains a fixed header and scrollable content
I am having two issues related to {width: 100%} and {height: 100%}.
My header is 100% of the page width, when I expect it to be 100% of its parent width.
The background appears at 100% of the window height, but it then scrolls up with the content.
I would appreciate any help in understanding how CSS treats the 100% value in these two cases. I am not asking for a workaround: I already have that. I am asking for insights into the way CSS thinks.
Many thanks in advance,
James
Here's a demo of the issue
And here's the barebones HTML:
<!DOCTYPE html>
<head>
<title>Width & Height 100%</title>
<style>
html {
height:100%;
}
body {
background: #666;
height: 100%;
margin: 0;
}
#container {
position: relative;
height:100%;
background: white;
width: 400px;
margin: 0 auto;
padding: 0 0;
}
#header {
position:fixed;
z-index:100;
background:#ffe;
/* width:760px; */
width:100%;
height:64px;
}
#content {
position: absolute;
left:20px;
width:360px;
height:360px;
margin:64px 0 0 0;
background:#efe;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
Fixed header
</div>
<div id="content">
Scrollable content
</div>
</div>
</body>
</html>
All of these fixed positions are going to give you headaches.
About the widths: the box model is usually the problem. I start every CSS with body height and width set to 100%, and then reset my box model so it matches across browsers, and applies all of my padding to the inside of a box instead of the outside:
/* Set box models to match across browsers. */
* {
box-sizing:border-box;
-moz-box-sizing:border-box;
webkit-box-sizing:border-box;
max-width:100%;
}
Then set your width on a container using padding, first the mobile width, then the screen width to override:
#container {
padding: 0px 10px;
}
#media only screen
and (min-width : 700px) {
#container {
padding: 0% 30%;
}
}
For a full layout, you can visit my site:
http://instancia.net/fluid-sticky-footer-layout/
I should probably add the mobile bit to that page. :)
Fix header
Change the header position fixed to position absolute
Fix content height
* {
margin: 0;
}
html, body {
height: 100%;
}
#container{
min-height: 100%;
height: auto !important;
height: 100%;
background:#efe;
}
#content {
padding: 64px 20px 0;
}
Live example with pos fixed
http://jsfiddle.net/qB4sD/1/
I have two divs on a page. a grid-container that takes a background and an internal grid that needs to be positioned in the center of the other grid. My css:
html, body{
margin:0;
padding:0;
width:100%;
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
width:100%;
}
#grid{
width:1140px;
margin:0px auto;
}
At this point, the bg image of the #grid-container only fills the window, not the full width of the html. The symptom of this is that if you narrow the browser window so that a horizontal scrollbar is required and refresh the page, the bg image ends where the browser window ends. When I scroll to the right, the bg image is not there. Ideas?
EDIT: ok, per requests, I've edited my css/html. When I remove the width designation in the #grid-container, it shrinks to the width of the container within, which is even worse. Here's what I have now:
html, body{
margin:0;
padding:0;
min-width:1140px;
}
body{
background:url(../images/page-background.jpg) repeat-x top left !important;
height:100%;
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
padding-top:1px;
}
#grid-container2{
width:1140px;
margin:0px auto;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
and the html:
<!DOCTYPE HTML>
<html>
<head>
---
</head>
<body>
...
<div id="grid-container" class="clearfix">
<div id="grid">..all kinds of things in here</div>
</div>
The problem is caused by your #grid having a width:1140px.
You need to set a min-width:1140px on the body.
This will stop the body from getting smaller than the #grid. Remove width:100% as block level elements take up the available width by default. Live example: http://jsfiddle.net/tw16/LX8R3/
html, body{
margin:0;
padding:0;
min-width: 1140px; /* this is the important part*/
}
#grid-container{
background:#f8f8f8 url(../images/grid-container-bg.gif) repeat-x top left;
}
#grid{
width:1140px;
margin:0px auto;
}
html, body{
width:100%;
}
This tells the html to be 100% wide. But 100% refers to the whole browser window width, so no more than that.
You may want to set a min width instead.
html, body{
min-width:100%;
}
So it will be 100% as a minimum, bot more if needed.
Remove the width:100%; declarations.
Block elements should take up the whole available width by default.
I've got a shadow background for my site layout showing up fine in IE, but firefox only shows the shadow (an image) if I use "height:100px;", or if I actually type some text in. I'm using the shadow img with a div for the layout. How can I make this work in firefox?
css:
.bg_shadow {
margin-left:auto;
margin-right:auto;
background:url("../images/bg_shadow.gif") repeat-y scroll left top transparent;
width:1024px;
height:100%;
}
body {
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;
text-align:center; /*used in centering the liquid layout in the browser window */
/*background:#CCCCCC;*/ /*page background color */
}
#wrapper {
margin:0 auto;
width:1000px; /* you can use px, em or % */
text-align:left;
}
a {
color:#01128E;
}
a.link:hover {
color:#FFFFFF;
background-color:#01128E;
text-decoration:none;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
line-height:1.35em;
}
img.padme {
margin:10px 25px;
}
#ads img {
display:block;
padding-top:10px;
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
position:relative;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header p.login{
position:absolute;
top:0;
right:0;
text-align:right;
margin:0;
padding-top:10px;
}
/* 'widths' sub menu */
#horizontal_border {
clear:both;
background:#eee;
border-top:4px solid #01128E;
margin:0;
padding:0px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
/* 2 Column (right menu) settings */
.rightmenu .colleft {
right:25%; /* right column width */
background:#FAFAFA; /* left column background colour */
}
.rightmenu .col1 {
width:71%; /* left column content width (left column width minus left and right padding) */
left:27%; /* (right column width) plus (left column left padding) */
}
.rightmenu .col2 {
width:21%; /* right column content width (right column width minus left and right padding) */
left:31%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}
.slogan{
font-family:Arial, Helvetica, sans-serif;
font-size:1em;
color:#999999;
position:relative;
top:-20px;
left:30px;
}
.header_gradient{
background:url("../images/header_gradient.gif") repeat-x scroll left top transparent;
}
.background_color{
background-color:#EEEEEE;
}
#nav_div{
width:100%;
height:35px;
background:url("../images/spacer.gif") repeat left top;
}
html:
<div class="bg_shadow">
<div id="wrapper">
<p>Main Content</p>
</div>
</div>
well, got lucky....put in "overflow:hidden" in the bg_shadow class and the shadow showed up exactly how i wanted it to. not sure why, but this worked.
thanks for your replys.
height:100%;
100% of what? If you don't specify a height on the parent <body>, the 100% is meaningless.
The browser can't know the height of the body because it depends on the height of the child element... which is a height you're trying to specify in percentage relative to the height of the body. CSS breaks this circular dependency by saying that percentage heights are ignored and auto is used instead if the containing block doesn't have a specified height.
If this is working for you in IE, you are probably in Quirks Mode. This works because in Quirks Mode, the <body> element is (incorrectly) used to represent the viewport, and so has an inherent specified height of however big the window is. But you don't want to be in Quirks Mode, it's full of incredibly sucky bugs. Use a Standards Mode DOCTYPE and IE will behave more like the other browsers.
Then use .bg_shadow { min-height: 100px; } or whatever the minimum height is to show the shadow if you really don't have any static content inside it. For IE6, you can add a rule like * html .bg_shadow { height: 100px; } to work around the lack of support for min-height without breaking other browsers that would take height: 100px; literally.
Try using min-height: 100px; in your CSS or adding &nsbp; to your empty element in your HTML.
Whenever I add the min0height property to the DIVs to make them 100%, it doesn't work. I have added them to all of the DIVs, including height: 100%; and min-height: 100%; but nothing works. What would I do to make it extend all the way? It just cuts off the background of the sidebar and the background color of the content area.
(Forgot to label a part. The content area with the white background is .col1)
CSS:
#charset "UTF-8";
/* CSS Document */
img {
border-style: none;
color: #FFF;
text-align: center;
}
body {
background-color:#000;
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
}
.sidebar {
background-image:url(../images/sidebar/background.png);
background-repeat:repeat-y;
font: 12px Helvetica, Arial, Sans-Serif;
color: #666;
z-index:1;
}
.menu {
background-image:url(../images/top_menu/background.png);
background-repeat:repeat-x;
height:25px;
clear:both;
float:left;
width:100%;
position:fixed;
top:0px;
z-index:5;
background-color:#000;
}
.bottom_menu {
background-image:url(../images/bottom_menu/background.png);
background-repeat:repeat-x;
height:20px;
z-index:2;
font: 12px Helvetica, Arial, Sans-Serif;
clear:both;
float:left;
width:100%;
position:fixed;
bottom:0px;
}
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
.sidebar .colright {
float:left;
width:200%;
position:relative;
left:225px;
background:#fff;
}
.sidebar .col1wrap {
float:right;
width:50%;
position:relative;
right:225px;
}
.sidebar .col1 {
margin:30px 15px 0 225px; /* TOP / UNKNOWN / UNKNOWN / RIGHT */
position:relative;
right:100%;
overflow:hidden;
}
.sidebar .col2 {
float:left;
width:225px;
position:fixed;
top:0px;
left:0px;
margin-top:25px;
margin-left:5px;
right:225px;
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
}
HTML
<body>
<div id="container">
<div class="menu">Header Content</div>
<div class="colmask sidebar">
<div class="colright">
<div class="col1wrap">
<div class="col1" id="contentDIV">
Content
</div>
</div>
<div class="col2">
Sidebar Content
</div>
</div>
</div>
<div class="bottom_menu">Footer Content</div>
</div>
</body>
Fixed.
It was the container div right after the body tag. Even with height CSS, it created problems. I removed it and changed a script I had from rendering in that div to the document.body and everything works now.
If you are trying to make your content and sidebar stretch the entire height of the page, then no amount of setting a height is really going to help. If you use 100%, your going to push your fotter off the bottom of the page so you have to scroll to see it. There is a single method that I know of that will allow you to have a full-height body with a footer: Sticky Footer
Check the following site for details: http://www.cssstickyfooter.com/
Another trick you will probably need. It is near impossible to get two columns to have equal height and support all browsers. The simplest way to get your gray column to the left and white center body to stretch all the way to the footer is to use a 1-pixel hight image that has gray and white in the proper proportions, which is background-repeated along the y axis.
Another great site for CSS knowledge is A List Apart.
It is hard to get a consistant layout using floats and positioning on the same elements. In particular float and position:fixed (or absolute) are incompatible and each browser handles the situation differently.
IE6 does not support position:fixed at all and treats it as position:static (the default - no positioning at all).