UPDATE
Margin for html and body needed to be 0 to fill page completely.
END UPDATE
*UPDATE*
I have fixed using the below suggestion of adding the height property to the html and body tags. Now there is a slight scroll down required to view the entire page. Ideas on why this is happening?
END UPDATE
I am using CSS to make a div fill the screen as needed. I've got width and height set to 100%, but the div doesn't fill the height of the screen. Is this a known issue with IE7 or am I possibly just missing something? Code below.
HTML
<!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>
<title>Untitled Page</title>
<link rel="Stylesheet" href="test.css" />
</head>
<body>
<div id="divy"></div>
</body>
</html>
CSS
#divy
{
width:100%;
height:100%;
background-color:Blue;
}
The issues is the container must have height of 100% for it's child element to assume 100%...
In this case the container is <html> -> <body> so a quick fix would be
html, body {
margin: 0;
padding: 0;
}
html, body, #divy {
width:100%;
height:100%;
}
The element fills the height of the body element, which can be smaller than the browser window.
Set the height of the html and body elements, so that they fill the window:
html, body { height: 100%; }
Whenever you are defining a 100% height, it's ancestors or all subsequest ancestor, must have 100% as their height as well.
So, give 100% height, to the body, as well as html.
html, body { height: 100%; }
You can manage this issue with jQuery:
jQuery('.yourDiv').height(jQuery('body').height());
Related
This code works:
<html>
<head>
<style>#a { height: 100%; }</style>
</head>
<body>
<form>
<textarea id="a"></textarea>
</form>
</body>
</html>
and produces a 100% height textarea.
If we add <!DOCTYPE html> on top, it doesn't work anymore (the height isn't 100% anymore).
Why? According to here, it seems that adding this DOCTYPE is making it HTML5. Why would HTML5 break the height: 100%;?
When you use of <!DOCTYPE html>,you are in standard mode and html and body have height equal his inside content,so you must use this code:
html, body, form, #a {
height:100%;
}
but when you don't use of DOCTYPE you are in quirks mode and , html and body have default height equal 100%,only use this code:
#a {
height:100%;
}
We have a base style sheet for a mobile web app where we have html and body set to overflow-x:hidden to prevent any horizontal scrolling.
However on 1 page, we have an iframe that opens external sites, some of which are not necessarily mobile optimized, so we want to allow horizontal scrolling.
I thought I could just override the overflow-x:hidden, with overflow-x:auto !important, but it doesn't work. The only way I can make it work is remove all notion of overflow-x, and the scrolling works fine. It also works as expected in Safari + Chrome.
Any ideas?
<!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\">
<head>
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
<meta name = "viewport" content = "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />
<style>
/* Styles from existing style sheet */
html, body {
position:relative;
height:100%;
width:100%;
padding:0;
margin:0;
overflow-x:hidden;
}
/* Overrides */
html, body{
width:auto !important;
height:auto !important;
overflow-x:auto !important;
}
</style>
</head>
<body>
<iframe src="http://starbucks.com"></iframe>
</body>
</html>
Tried overflow-x: visible; instead? Also I don't believe the !importants are necessary.
I would like to have the following layout
+++++++++++++++++++++++
+Header +
+++++++++++++++++++++++
+Nav+ +
+ + +
+ + +
+ + Content +
+ + +
+++++++++++++++++++++++
so basically a two column layout with a header. I've checked many CSS layout generators on the net, but they just produced me a result where the left navbar is as big as the content in it. I can scale it with "height:500px" or whatever, but i want it to be fullsize (from top to bottom of browser window) all the time. Changing the value with "height:100%" does not work.
If you want to try it out yourself: http://guidefordesign.com/css_generator.php and then select full page, two column layout, with header to see what i mean. If you want you can tell me which property i have to adjust in the generated css file to make it work
You can try this. It works on the browsers I tested (Firefox, IE7+8, Opera, Safari, Chrome). Just play around with the percentage units for header and columns.
<!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>for stackoverflow</title>
<style>
body, html {
padding : 0px;
margin : 0px;
height : 100%;
}
#wrapper {
width:900px;
height:100%;
margin: 0px;
padding: 0px;
}
#header {
height:10%;
background-color:#930;
width:900px;
}
#nav {
background-color:#999;
width:200px;
height:90%;
float:left;
}
#content {
height:90%;
background-color:#363;
width:700px;
float:left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="nav"></div>
<div id="content"></div>
</div>
</body>
You might want to have a look at and get the idea from:
Super Simple Two Column Layout
See the demo here.
A little general answer: Look into CSS frameworks, like http://www.blueprintcss.org/ - these let you define grids.
Here's a sample page: http://www.blueprintcss.org/tests/parts/sample.html
Concerning the height problem, try out this (should give you 100% of browser window height for your div all the time):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<style type="text/css">
body {
padding: 0px;
}
.Container {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
background-color: #123456;
color: black;
}
</style>
</head>
<body>
<div class="Container">
</div>
</body>
</html>
A solution you can try, is to give the content area a background image which is repeated vertically (1px height and width of your page). The left side of that image would have the nav background color, and the rest would be the color of the content background color ...
So, i have a div which i want to take up the entire width of the browser, -40px on each side,
my idea was to have
width: 100%; and margin: 0 -40px; however this does not work.
I dont want to use width: xx% as i have no control over this.
Update
Ok got it going at http://jsfiddle.net/ApcLv/
but now my question is:
How do i get this to be centered?
Wrap it in a another <div> and give the parent <div> a width:100% property, and the child <div> a margin:40px; property:
<!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" xml:lang="en" lang="en" >
<head >
<title >Example</title>
<style type="text/css">
#wrapper {
width:100%;
}
#main {
margin:40px;
background-color:red;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
This is a test
</div>
</div>
</body>
</html>
have a div in a div... the outer div can be 100% wide with a 40px padding and the inner div can be 100% wide too.. which will take up the inner div's width - the 40px padding. :)
Simply
[..]
<body>
<div style="margin: 40px">Blabla</div>
</body>
[..]
..will create a DIV that takes up all available horizontal space, minus 40px on each side.
A block level element always uses all its available horizontal space unless otherwise specified. A div with exactly 40px to each side of the BODY element will thus always be centered. No need for wrappers to achieve this.
I want to have a 2 column layout, and have the left column able to be 200 px at first, and have a "shrink" button to shrink it down to 10px, and have the right column expand to fill all the rest of the available space. Then if they click on the "show" button (which will be all they see in the now 10px wide left column) have the left grow back to 200px and have the right column shrink by that amount.
I can't figure out how to make the right column grown and shrink without knowing the exact width of the window.
I hope this makes sense, and I really hope someone can point me in the right direction.
Browser requirements are IE8, FF3.6, Safari, and Chrome, so in theory I can use some advanced CSS techniques. At least I don't have to support IE6.
If you float your left column (float: left;) with variably a width of either 10 or 200px, and simply add overflow: hidden; to the styles of the right column, the right column will expand and contract to fill the space, whatever the site of the left column is.
Something like this should do the trick:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Demo</title>
<style type="text/css" media="screen">
html, body { height:100%;}
#container { overflow:hidden; height:100%; }
#sub-content { background:yellow; float:left; height:100%; width:200px; }
#main-content { background:red; height:100%;}
#container .shrink { width:10px; }
</style>
</head>
<body>
<div id="container">
<div id="sub-content">
Sub content
<a id="toggler" href="#">Toggle</a>
</div>
<div id="main-content">
Main content
</div>
</div>
</body>
<script type="text/javascript">
var link = document.getElementById('toggler');
link.onclick = function() {
var subContent = document.getElementById('sub-content');
if (subContent.className == 'shrink') {
subContent.className = '';
} else {
subContent.className = 'shrink';
}
return false;
}
</script>
</html>
it would help if you put your sample on http://jsbin.com/, but try the following:
html, body, form
{
height: 100%;
margin: 0px;
padding: 0px;
}
and then make the right column width 100%.
Is this what your are looking for?: http://jsbin.com/uweqe3