How do you make a webpage change its width automat

2020-04-16 03:50发布

站内问答 / 后端开发
999 7 2

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

7条回答
在下西门庆
2楼-- · 2020-04-16 04:37

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) 举报
上一页 1 2
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)