I'd like to set the div height using percentages that do not depend on items in it.
I got a fixed header on the top of the screen and a centered div. But set height in percentages does not work. It enlarges only if I add some items in there.
Please help.
I have this code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lol</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="conteiner">
<header>
<p>header</p>
</header>
<div id="main">
<p>main info</p>
</div>
</div>
</body>
</html>
And this CSS.
html{
width: 100%;
height: 100%;
}
body{
overflow: hidden;
margin: 0;
width: 100%;
height: 100%;
}
header{
position: fixed;
top: 0px;
width: 100%;
height: 10%;
border: solid red 1px;
}
#main{
display: block;
width: 65%;
height: 80%;
border: solid green 1px;
margin: 8% auto 0 auto;
}
You forgot to make it's parent 100% height too.
#conteiner has automatic height by default because its div block. And default height is height of its children. If parent's height isn't set manually, children height in percents are ignoring by browser
#conteiner {
height: 100%;
}
at your style file you have to write style for container div code like
#container{
height:100%;
}
Can somebody please help me understand why I am seeing what I am seeing?
Code:
<!doctype html>
<html lang="en">
<head>
<style>
#Viewport { width:50%; height:50%; margin: 0 auto; position: relative; background-color: blue; }
#one { position: absolute; width: 5%; height: 70%; background-color: green;}
#two { width: 5%; float: right; }
</style>
</head>
<body>
<div id="Viewport">
<section id="one">
<p>hi</p>
</section>
<section id="two">
<p>hi</p>
</section>
</div>
</body>
</html>
I expect to have widths of 5%, not ~20%. I expect to see colored backgrounds. This is weird. What gives?
Add overflow:auto to #Viewport
#Viewport {
width:50%;
height:50%;
margin: 0 auto;
position: relative;
background-color: blue;
overflow:auto;
}
jsFiddle example
Since you floated #two you removed it from the flow of the document. overflow:auto restores the expected behavior.
Also, remember that the percentage value is always relative to another value, and because you're declaring 50% height on the descendant without specifying any other percentage heights further up the DOM (and for the root element) the percentage height won't work.
Add html, body {height: 100%:}
Example
I started to design my portfolio and I have this problem I set pattern for a background but I want to have and 1 more color and 1 sliced image over this pattern. I started to code it and everything was fine except that my navigation menu and other things were under this color and picture which i added. This is the HTML code and CSS. Please help?!?
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Wrapping up HTML5</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div id="top-wrap">
<div id="cornerfill"><div class="fillmask"></div></div>
<div id="fillright"><div class="rightfill"></div></div>
</div>
<div id="wrapper">
<header><h1>Using a HTML5 wrapper</h1></header>
<section>
<article>
<hgroup>
<h1>This is actually legal</h1>
<h2>Just wrap everything in a div, just like before</h2>
</hgroup>
<p>But it's probably better to simply use the body tag.</p>
</article>
</section>
<footer><p>Love from Kebman</p></footer>
</div>
</body>
</html>
CSS
#charset "utf-8";
/* CSS Document */
html
{
width:100%;
height:100%;
}
body {
width: 100%;
height: 100%;
min-width:960px;
min-height:600px;
margin: 0;
padding: 0;
background: #FFF url(../img/bg.png) fixed;
}
#cornerfill
{
position:fixed;
top:0;
left:0;
width:50%;
height:100%
}
#cornerfill .fillmask
{
width: 100%;
height: 100%;
background-color:#070707;}
#fillright {
position:fixed;
top: 0;
right: 0;
width:50%;
height: 100%;
}
#fillright .rightfill
{
margin-left:-20px;
width: 600px;
height: 100%;
background:url(../img/bgup.png) left bottom no-repeat;
}
#wrapper{
width: 960px;
margin: 0 auto;
}
header
{ width:auto;
height:auto;
background:#FFF;}
#top-wrap
{
width:100%
height:40%
}
Try applying z-index to control the layering of elements on the page.
There are quite a lot of questions regarding iframe and it's height. Some are similar but not giving me the right answer. So let me explain my case:
JSFiddle: http://jsfiddle.net/AmVhK/3/show/
Editor: http://jsfiddle.net/AmVhK/3/
There is a table with 2 rows. First one contains a div #toolbar with fixed height. Second row contains a div which holds an iframe. I need the iframe to take the available space below the toolbar div.
Problem I am facing is in IE standards mode (supporting IE8+). Let's say, the height of the window is 1000px and height of toolbar is 200px, then the height of the iframe is also 1000px and so has scrollbars. I need the iframe to have height of (page height-toolbar height).
It would be good if there is a CSS solution. Using JavaScript to get the height available and setting it to the iframe or it's containing div is the last resort solution for me :)
Setting the toolbar or iframe to absolute position also won't work for my use case. Markup change is ok if necessary (if you want to remove tables)
I have already set the following CSS:
html, body {height: 100%}
Any good solution to implement it.
OK here's my attempt at this, there's an issue with the iframe wanting to have a horizontal scroll in IE7 but the layout is good, I had to give up because fighting with IE7 makes me want to chew out my own eyes, hopefully someone could expand from here.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>iframelayout</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div, iframe {
margin: 0;
padding: 0;
border: 0;
}
.container {
position: relative;
width: 100%;
height: 100%;
background: #222;
}
.toolbar {
height: 200px;
background: #aaa;
}
.iframe-container {
position: absolute;
top: 200px;
bottom: 0;
width: 100%;
background: #555;
overflow-y: hidden;
}
.iframe-container iframe {
position: absolute;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="toolbar">
</div>
<div class="iframe-container">
<iframe src="https://c9.io/" frameborder="0">Your browser is kaput!</iframe>
</div>
</div>
</body>
</html>
Here is a solution tested in IE8 and FF17
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type="text/css">
*
{
border: 0;
line-height: 0;
margin: 0;
padding: 0;
}
html,
body
{
height: 100%;
}
#layout
{
position: relative;
width: 100%;
min-height: 100%;
overflow-y: hidden;
background-color: green;
}
#toolbar
{
width: 100%;
height: 200px;
background-color: blue;
}
#content-wrapper
{
position: absolute;
top: 200px;
bottom: 0px;
width: 100%;
background-color: red;
}
#content
{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="layout">
<div id="toolbar">
</div>
<div id="content-wrapper">
<iframe id="content" name="content" src="https://c9.io/" border="0"></iframe>
</div>
</div>
</body>
</html>
This is as clean as it can get minding your original question mentions the toolbar has a fixed height. Minimal code, no wrapper elements and no tables necessary, IE8+/Chrome/Fox compatible.
However, in the comments of Dale's solution, you mention the toolbar height being flexible instead and a requirement for the iframe to adjust - that is a major gamechanger and I would suggest you strip that of your requirements as it's practically impossible to achieve in CSS2 without extra JS and/or horrendous CSS hacks. If you didn't want IE<=9 compatibility, this would be very possible using CSS3 flexbox.
Since the reason for the toolbar flexible height would be animation for different states as you mentioned, I would suggest you use the code below and animate the toolbar height and iframe padding-top at the same time to achieve the desired flexibility instead of just the toolbar height. It does not require any extra JavaScript outside of the animation itself, so the only "disadvantage" is to animate 2 properties instead of 1. The rest of the layout will finely adjust.
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
#toolbar {
position: absolute;
width: 100%;
height: 200px; /* animate this */
}
#cblt_content {
display: block;
width: 100%;
height: 100%;
padding-top: 200px; /* and this */
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border: 0;
}
</style>
<div id="toolbar">Toolbar</div>
<iframe id="cblt_content" src="https://c9.io/"></iframe>
Getting rid of the vertical scroll
Using this code should leave with only the inner (iframe) scrolls:
html, body
{
height: 100%;
width: 100%;
position: fixed;
}
Notes:
The width is needed (like with absolute).
You are right about absolute not helping you.
This actually makes sense for what you are trying to achieve (if I got it right).
Browser Support:
Might be a little buggy, but should be supported as of IE7 (quirksmode).
Hope I got the question right.
The solution is
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - Webduos Demo</title>
<style type="text/css">
*{ border: 0; line-height: 0; margin: 0; padding: 0; }
html, body { height: 100%; }
#layout { position: relative; width: 100%; min-height: 100%; overflow-y: hidden; background-color: green; }
#toolbar { width: 100%; height: 160px; background-color: blue; }
#content-wrapper { position:absolute; top:180px; bottom: 0px; width: 100%; background-color: #0000dd; }
#content {width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="layout">
<div id="toolbar">
</div>
<div id="content-wrapper">
<iframe id="content" name="content" src="https://google.com/" border="0"></iframe>
</div>
</div>
</body>
</html>
I think you can simply hide the parent scroll bar and get what you want. Like by simply adding overflow-y hidden:
html, body {
height: 100%;
overflow-y:hidden;
}
This should do it! Here's the quick preview link: http://jsfiddle.net/AmVhK/15/show/
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#contentiframewrapper, #cblt_content {
/* max-height: 100%;
min-height: 99.9%;*/
height: 99.9%;
margin: 0;
padding: 0;
line-height: 0;
}
#toolbar {
height: 100px !important;
background-color: #CCC;
text-align: center;
font-size: 50px;
vertical-align: middle;
}
</style>
<table width="100%" height="99.6%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td valign="top" id="toolbar">Toolbar
</td>
</tr>
<tr>
<td width="100%" valign="top" height="80.5%">
<div align="center" id="contentiframewrapper">
<iframe width="100%" frameborder="0" name="cblt_content" id="cblt_content" src="https://c9.io/" border="0"></iframe>
</div>
</td>
</tr>
</tbody>
</table>
I've tested it in both Chrome and IE8 and it works on my side. It might bug in JSFiddle in IE8 but it shouldn't if you view it as a separate page (in normal conditions that is).
Edit:
Made some slight changes to the original code. However, you will have to change the <td> that holds the iFrame height value to the new height if you change the height of the toolbar. With IE there is no magic % value (unless you use JS, which you don't want of course) for it, it's just trial and error.
First of here is what I'm trying to achieve :
http://img801.imageshack.us/img801/1516/sitelayout.png
I just cant get the content div working as I would like it, when you get too the page the div should stretch too the bottom if there isn't enough content too fill it, if there is too much content it should push down the footer. Here's what I have so far:
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>site</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="headerBG"></div>
<div id="header"></div>
<div id="content">
<div id="contentTop"></div>
<div id="contentCenter"></div>
</div>
<div id="footerBG"></div>
</div>
</body>
</html>
CSS
html,body{ height: 100%; margin: 0; padding: 0; }
body{
background-image:url('images/bg.png');
background-repeat:repeat;
}
#container{
position: absolute;
background-color: green;
height: 100%;
width: 100%;
}
#headerBG{
position: absolute;
background-image:url('images/header_bg.png');
background-repeat:repeat-x;
height: 297px;
width: 100%;
}
#header{
position: relative;
margin-left: auto;
margin-right: auto;
background-color: black;
width: 780px;
height: 200px;
}
#content{
position:relative;
margin-left: auto;
margin-right: auto;
width:780px;
height:70%;
}
#contentTop{
width:780px;
height:30px;
background-image:url('images/content_top.png');
background-repeat: no-repeat;
}
#contentCenter{
width:780px;
height:100%;
background-image:url('images/content_bg.png');
background-repeat: repeat-y;
}
#footerBG{
position: absolute;
bottom:0px;
background-image:url('images/footer_bg.png');
background-repeat:repeat-x;
width: 100%;
height: 144px;
}
Sorry if its a bit unclear, I've been tinkering with it a lot so this code might be a bit disorganized. I've been staring it to death and its starting to get blurry in my head >_<
Anyway, I would really appreciate any insights you might have.
yay Coming back to html+css after a year or two yay
for ease i'd just look in to Faux Columns
set the #content to have a background image that resembles the effect you want.
you'll also probably want to look in to a sticky footer
See if this works for you: http://jsfiddle.net/brianflanagan/jhvBt/ IE mileage may vary (with the min-height property). If you absolutely need the footer positioned exactly at the bottom of the browser window and the content div stretched, I'd recommend using a JS solution to calculate assorted heights as needed.