Div 自适应页面宽度

最新推荐文章于 2024-07-03 09:36:39 发布

longlong

最新推荐文章于 2024-07-03 09:36:39 发布

阅读量3.1k

点赞数

分类专栏：工作学习文章标签： div javascript scroll function html

本文链接：https://blog.csdn.net/blueness_/article/details/6291621

版权

工作学习专栏收录该内容

14 篇文章 0 订阅

订阅专栏

div 需要指定宽度以显示横向滚动条，同时还要根据不同显示器的分辨率自适应页面的宽度。
 
解决方法为：通过 js 函数在页面加载时获取屏幕分辨率，并赋值给 div 宽度属性。
代码如下：
----js 函数
/* 
        div 控件的 id 名称为 'div',
        window.screen.width 作用是获取屏幕分辨率,
        笔者当前屏幕分辨率为 1024, 个人要设置 div 宽度为 970, 所以减去 54, 该值可根据需要调整,
        div 宽度需要指定为固定值, 所以这里用 px(像素), 而不是百分比.
 */
<script language="javascript" type="text/javascript">
    // 获取屏幕分辨率并赋值给 div
    function SetDivWidth()
    {
        document.getElementById('div').style.width = window.screen.width - 54 + 'px';
    }
 </script>
 
---- html 代码
// body onload 事件在页面加载时执行 js 函数‍
<body οnlοad="javascript:SetDivWidth()">
    <div id="div" style="overflow-x:scroll; overflow-y:visible;">
        .... .... .... ....
    </div>
</body>