I'm having difficulty getting a 100% page height including contained divs. What seems to happen is that the inner div expands to 100% the height of the entire parent element, and not just to the bottom, even if it's been displaced by an element above it, so the child overflows the parent.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Home</title>
<style type="text/css">
html, body, #container, #content
{
height: 100%;
min-height: 100%;
}
html { border: 1px solid red; }
#content { border: 1px solid blue; }
</style>
</head>
<body>
<div id="container">
<h2>Test</h2>
<div id="content">
<p>Testing</p>
</div>
</div>
</body>
</html>
I'm beginning to believe that simply this is simply the correct behaviour and just doesn't work, but I figured I'd ask the collective intelligence first before overhauling the approach.
Yeah, you can use overflow: hidden; or start playing with floats and clears.
I don't think God intended for pages to just be exactly one screen high. :-)
Or is a vertical scrollbar allowed?
If so, then you might check out: http://matthewjamestaylor.com/blog/perfect-full-page.htm
I'm not exactly sure what you're trying to accomplish, but this:
html, body
{
height: 100%;
min-height: 100%;
}
Doesn't make sense. You can't control the height of the body element, as it contains everything else regardless, and the html element isn't even "displayed" in the same way div and span elements are.
The behaviour you describe is, indeed, what is expected to happen. Whenever you set an element's height/width to 100%, it means 100% of the parent element (with some possible exceptions where the element is absolutely positioned).
ur css is just behaving exactly as intended...
there is no exact way to do this with just css, without what brock said, very complicated float <-- and by the definition, floats need to know the fixed height and width, and is not dynamic. (In practice most browser will try to guess)
It is much easier if you use a little java script to find out the height of the screen, and first inner div, then set the second inner div to be the difference.
<div id="container">
<div id=content-top">
<h2>Test</h2>
</div>
<div id="content">
<p>Testing</p>
</div>
</div>
Related
I want to have two horizontal divs.
The width of the left div is 200px and is fixed.
The width of the right div is 600px by default and should be responsive. If user resizes the browser, the width of right div may decrease and scroll bar appears on right div.
I am trying to use float and overflow to do it. But I can't think of the right solution.
What should I do?
Use display:table and display:table-cell for getting better result.
<div class="main">
<div class="left">sdfsf</div>
<div class="right">sfsdfdsfsfdsfds</div>
</div>
.main{display:table; width:100%;}
.left
{
display:table-cell;
min-width:200px;
width:200px;
border:1px solid red;
}
.right
{
display:table-cell;
width:auto;
border:1px solid green;
}
DEMO
Your request is a bit odd and can be done though not using purely CSS level 1 unfortunately. In order to have the elements "float" and have the second div overflow instead of the body element you'll have to use a combination of position and overflow.
Copy this to an (x)html file and resize the browser...
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
</head>
<body style="overflow: hidden">
<div style="overflow: auto; max-width: 800px;">
<div style="background-color: #ff0; height: 200px; width: 200px; position: absolute; left: 0px; top: 0px;">left</div>
<div style="background-color: #0ff; height: 200px; overflow-x: auto; position: absolute; left: 200px; top: 0px; max-width: 600px;">
<div style="min-width: 800px;">right child, right child, right child, right child, right child, right child, right child, right child, right child, right child, right child, right child, right child, </div></div>
</div>
</body>
</html>
I highly recommend not using this even if your browser support requirement is extremely relaxed simply because using static layouts alone is really IE6 era sort of in-the-box-of-a-box type thinking. If it's for a client you really need to force-override them.
Just because I don't like display:table:
it is possible to achieve what you're looking for using flexbox.
The idea is to set the right element's width using width:100% and the left using width: 200px; min-width:200px.
I'm not sure what you mean regarding the overflow, but my solution has the right element's overflow set to scroll, and the contentn is put within another div whose width is 600px
Here's a demo.
I have simple task with two div. I need that both have colored borders and inner div must use all space. Here my code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css'>
.d1{ width:150px;height:150px;border:solid 10px black;background:red;}
.d2{ height:100%; width:100%; border:solid 20px blue; background:green;}
</style>
</head>
<body>
<div class=d1>
<div class=d2>some text</div>
</div>
</body>
</html>
But browser (IE, Chrome) do not catch that I set borders and 'divs' to show with artifacts.
Anybody catch this bug?
Do this instead:
<style type='text/css'>
.d1{ width:110px;height:110px;border:solid 10px black;background:blue; padding: 20px;}
.d2{ height:100%; width:100%; background:green;}
</style>
I think that gives you the effect you're after, basically replacing the border on .d2 by using a background colour on .d1, adding padding to .d1 to act as a border of sorts.
If you add any margin or padding to .d2 it's going to add to the 100% height and width values which means they'll overflow.
Hope that makes sense.
edit: note how I've compensated for a padding of 20px by reducing the height and width by 40px (because it will add padding on both left and right and also top and bottom, making for 40px additional width and height)
If you know width and height of parent div, you can set correct styles for the children, without percentage, so this jsFiddle may do a work for you.
Borders aren't included in your width/height, then your 150x150 will "become" a 170x170 with a 10px border.
Two solutions :
Take borders in account, increasing your div width/height
Use more divs, and forgot borders
Here is a Jsfiddle to show you both solutions
Because you specified borders thickness the height and width will not take that into account to show nested inside the borders. A solution for your problem if I understand it correctly you can achieve as follow:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css'>
.d1{ width:150px;height:150px;overflow:auto;border: solid 10px black;background:red;}
.d2{ height:73%; width:73%;border: solid 20px blue; background:green;}
</style>
</head>
<body>
<div class="d1">
<div class="d2">some text</div>
</div>
</body>
</html>
Basically you are having issues with the Html box model.
you can either figure out the maths your self or depending on which browsers you have to support there is the new "box-sizing" css style which changes how the box model works.
here is a fiddle showing how it can be used:
http://jsfiddle.net/EHUab/
I'm making a page that uses a WYSIWYG editor. Like most editors, it puts everything in "<p>" tags.
This gives a formatting problem when an image has 100% height and width.
The following html shows the issue:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No doc type</title>
<style type="text/css">
/* css reset */
* {
vertical-align: baseline;
font-family: inherit;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
html{
font-size:100%;
height: 100%;
}
body{
height: 100%;
font-size:62.5%; /* Reduce to 10px base */
font-family:Arial, Helvetica, sans-serif;
}
</style>
</head>
<body style="margin:0;">
<div>
<div style="width: 500px; height: 200px;">
<div>
<div style="border:1px solid #000; padding: 0; width: 498px; height: 198px;">
<p>
<img style="height: 100%; width: 100%;" src="http://www.google.com/logos/newyears10.gif"/>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
In firefox, the p tag actually overflows the div. This makes the image at 100% height be more than 100% of the div.
If I remove the doctype the problem is fixed. I don't really understand doctypes, but I think the one I used was a good one (I googled it). I think it's bad not to use one.
Anyone know how to get this to display correctly with a doctype?
Thanks
I'm not sure what else you may be doing with the page, but adjusting the paragraph height will correct the output.
div p{ height: 100%; }
As Zurahn wrote, setting the height of p will solve the problem.
To understand this (and arrive at other variations that might better serve you):
1. The image is natively 311 x 137
2. Because the p has no height, the image can figure out the width, but not the height, of the bounding element (the p).
3. The image therefore becomes as large as the width, and scales the image - creating a height of 219px
4. The p in turn then stretches to fit the image.
5. Giving a height to the p allows the image to know the height it should be getting 100% of. It can then scale the image accordingly.
ouch, that was not written so well:
But now the q is - why doesn't it get the height from its ancestor - the same way that it got the width from the ancestor?
And the answer to that has to do with the way height is mangled by the browser, which in turn has to do with the allowances given by the browser for things overflowing to the height before allowing an overflow to the width.
I think I have the same problem as you. The doctype html adds a spacing at the bottom of the page. Here is a few solutions. You can add one of the attributes to the image.
style="display:block"
add align attribute like align="absmiddle"
add float like style="float:left"
I have the following situation, presented in the picture. Grey div is the parent of magenta and blue divs. Magenta div scales vertically with the content. I would like to have blue div always scale to the bottom of the containing grey, div. I've searched and tried various combinations, but all to nil effect.
edit:
Problem solved! Container needs an overflow: hidden, and the div that I want to stretch to the bottom (blue) needs padding-bottom: 1000px; margin-bottom: -1000; (or larger if you need)
I got this to work (in Chrome anyway) by setting the parent's div:
position: absolute;
and the child's div:
height: 100%;
If you need support from IE6 and up, the answer is: You can´t in css only.
There are different solutions to really scale the div or just have it appear like that:
You can use a background-image for the grey div (if all you need is the background to stretch all the way down)
You can use javascript to calculate the height of the grey div and apply it to the blue div
There is a ccs option using a very big padding and an equally big negative margin, but I don´t remember if it works for all browsers and I can't find the article right now.
Edit: The big padding / negative margin css solution:
The article is talking about Firefox 1.5 and Safari 2 so I don't know if it still works, but here it is.
In my experience setting the height of the blue DIV to 100% doesn't work. The only time that I have wanted this was to have the blue DIV with it's own background, to solve this you need to just have the background of the gray DIV include the blue background of the other DIV.
The JavaScript to do it would be...
<div id="yourDiv" style="background-color: Blue; width: 150px;">
Hello
</div>
<script type="text/javascript">
var div = document.getElementById('yourDiv');
div.style.height = document.body.clientHeight + 'px';
</script>
Edit:
Check this link for getting clientHeight in different browsers...
Inside of your parent div, if you set "float:right" on your blue div and play around with your height in percent (height:100%;), I think you should achieve what you're asking.
Since the blue div is a child of your grey div, the maximum height of your blue div shouldn't exceed your parent div. Unless I'm missing something here...
Also, if you are floating your blue div on the right, be sure to place it before the magenta div in your markup.
Acorn
Another way to set height 100% in html objects is use styles:
<html>
<head>
<style>
html, body {
height: 100%;
}
#mydiv {
height: 100%;
background-color:red;
}
</style>
</head>
<body>
<div id="mydiv">aaa</div>
</body>
</html>
The key is to have a set height on the parent container. Then the height:100% works
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Divs</title>
<style type="text/css" media="all">
#main {
height:30em;
width:30em;
background-color:#999999;
padding:1em 1em 0px 1em;
}
.inner {
width:5em;
}
#blue {
float:right;
background-color:#0000FF;
height:100%;
}
#magenta {
float:left;
background-color:magenta;
}
</style>
</head>
<body>
<div id="main">
<div class="inner" id="blue">
1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>10
</div>
<div class="inner" id="magenta">
1<br/>2<br/>3<br/>4<br/>5<br/>6
</div>
</div>
</body>
</html>
I've got a really frustrating problem with a web application I work on (I didn't originally write it). It uses frames for the layout scarily enough. The problem I'm having is that all elements with a background colour and border set via CSS default to 100% width. I've just tested div elements, paragraph elements etc.
I removed the stylesheet completely and then tested it and I had the same problem, so it's not the stylesheet causing the problem.
I wrote a quick test to make sure it wasn't conflicting code and used the same doctype and xmlns as ours - I get the same problem. Here's the example code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#test {
border:1px solid #ccc;
background-color:#ddd;
}
</style>
</head>
<body>
<div id="test">
Test information!
</div>
</body>
</html>
Any ideas?
I think this is required by HTML/CSS. Block elements extend the full width unless there is something to stop them.
(FF has the same behaviour.)
It's not because the element has a background or a border that it expands to the full with of the parent, it's because it's a block element. The background or border just makes you see how large the element really is.
The default width is actually not "100%", but "auto". The practical difference is that the element including borders uses 100% of the width, instead of the width excluding the borders becoming 100% of the width (making the width including borders wider than it's parent).
If you don't want the element to use the available width you can make it a floating element. Then it will adjust itself to it's content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
#test1 {
float: left;
border:1px solid #ccc;
background-color: #ddd;
}
#test2 {
float: left;
clear: both;
border:1px solid #000;
background-color: #ccf;
}
</style>
</head>
<body>
<div id="test1">
Test information!
</div>
<div id="test2">
Test information!
</div>
</body>
</html>
As Richard and BeefTurkey say, divs are block elements and will fill the width of the browser.
You can either use an inline element, such as a span
<span id="test">
Test information!
</span>
or add some style to your div to force it to be inline
div#test { display: inline; }
Don't divs default to 100% (of parents size) because they're blocks? You could always try changing display to inline: #test {display:inline;}