How do you make a webpage change its width automat

Question

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%?

Answer 1

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%)

Answer 2

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.

Answer 3

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;
}

Answer 4

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

Answer 5

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.

Answer 6

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.