In HTML, is there a way to make a webpage expand to the user's monitor? Like say I have a 15inch, but someone else has a 24 inch. The webpage would be small on their screen, but would fit on min. How would I make the page expand to 100%, or maybe 95%?
+1
A:
Unless you explicitly set the size yourself, a page will default to using the full width of a browser window.
You might find Firefox's Web Developer plugin useful as it allows you to quickly change your browser's window to specific sizes so you can see how your layout looks at different sizes. https://addons.mozilla.org/en-US/firefox/addon/60
Steve Claridge
2009-03-11 20:48:40
A:
In your html:
<div id="content">
<!-- Some content in here -->
<div>
Then in your css:
#content {
width:100%;
}
or for more control:
#content {
min-width:500px;
max-width:1000px;
}
Rich Bradshaw
2009-03-11 20:49:38
+1
A:
Unless you specify a specific width for any element of a webpage, such as the body or some containing div, it will expand to the width of the browser window.
If you're looking to set the size in pixels to the user's width, you can use javascript to set widths dynamically:
<script type="text/javascript">
var userWidth = screen.width;
var userHeight = screen.height;
</script>
However, you should probably use a more fluid layout that will automatically expand by using widths specified in percents (e.g. setting the width of an element with CSS: width: 100%)
Rudd Zwolinski
2009-03-11 20:53:19
Never do this. Ever. IMHO, doing this is marginally less annoying than pop-unders, but only just marginally. It is far better to trust that the user knows how to use his browser, and will resize his own window if he doesn't want a scrollbar.
RBerteig
2009-03-11 20:59:08
+3
A:
Fluid-width is achieved by using percentage units or em units. It's all about crafting a site layout based on grids and containers. Read more.
Josh Stodola
2009-03-11 20:53:42
A:
HTML ist just a markup language to describe the meaning of (textual) contents. For example, <h1>Foobar</h1> just means Foobar is a first level heading but doesn’t tell anything about the style it should to be displayed.
For styling a HTML document the Cascading Style Sheets (CSS) has been introduced. But CSS is also just a describtive language and doesn’t know anything about the user agent. (You could just describe that specific elements should be displayed with a specific width and so on.)
But JavaScript does know the user agent. You could use the screen object to obtain the width and height of the screen or the available viewport.
Gumbo
2009-03-11 21:07:26
A:
I think there's some confusion about whether or not Bob is asking about the actual size of the monitor or the size of the window.
Josh Stodola and Rich Bradshaw offered the HTML/CSS answer, which uses percentages to create a fluid layout which expands with the window. The following code sums up this technique, creating two columns, one taking up 80% of the current browser window, and the other taking up 20%. The column sizes alter when the user changes the window size.
<html>
<head>
<style type="text/css">
#content1 {
background: #CC0000;
height: 300px;
width: 80%;
float: left;
}
#content2 {
background: #00CC00;
height: 300px;
width: 20%;
float: left;
}
</style>
</head>
<body>
<body>
<div id="content1"></div>
<div id="content2"></div>
</html>
Rudd Zwolinski provided the answer which looks for the user's current resolution. Others have already posted the potential annoyances caused by using this method, but I don't know, maybe you're making some artistic statement about resolution sizes. Here's the same code above using this method:
<html>
<head>
<style type="text/css">
#content1 {
background: #CC0000;
height: 300px;
float: left;
}
#content2 {
background: #00CC00;
height: 300px;
float: left;
}
</style>
<script type="text/javascript">
var userWidth = screen.width;
var userHeight = screen.height;
function resizeContent()
{
document.getElementById("content1").style.width = parseInt(userWidth * 0.8);
document.getElementById("content2").style.width = parseInt(userWidth * 0.2);
}
</script>
</head>
<body onload="resizeContent()">
<div id="content1"></div>
<div id="content2"></div>
</html>
Hope that helps.
attack
2009-03-11 21:09:59
+2
A:
Gumbo, by "page" you do you mean web page contents or do you mean the window that contains the page? If you mean the window, the answer is DON'T. If you mean content, you can use liquid layouts; Google that.
stimpy77
2009-03-11 21:23:16
I figured the OP meant the window as well. Ditto on the "DON'T" It used to piss me off when a site did this. Anymore I'm thankful that IE/FF allows you to turn that capability off.
Chris Lively
2009-03-11 21:41:53