发表新帖
发表新帖

How do you make a webpage change its width automatically?

后端 未结
关注
8 1053
故里飘歌
故里飘歌 2021-01-23 00:26

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,

相关标签:
8条回答
  • 终归单人心
    2021-01-23 00:34

    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.

    0 讨论(0)
  • 难免孤独
    2021-01-23 00:35

    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.

    0 讨论(0)
  • 北海茫月
    2021-01-23 00:47

    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.

    0 讨论(0)
  • 刺人心
    2021-01-23 00:47

    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.

    0 讨论(0)
  • 孤独总比滥情好
    2021-01-23 00:48

    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;
}
    0 讨论(0)
  • 醉酒成梦
    2021-01-23 00:53

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

    0 讨论(0)
 看不清?
提交回复
热议问题