左右布局页面窗口缩小页面自适应

最新推荐文章于 2021-11-23 14:02:24 发布

总是忘记昵称

最新推荐文章于 2021-11-23 14:02:24 发布

阅读量4.9k

点赞数

分类专栏：项目实践文章标签：左右布局页面窗口缩小页面自适应

本文链接：https://blog.csdn.net/huahuili/article/details/49337003

版权

额这两天特别的尴尬遇到这么一个页面开始以为还蛮简单的后来做的时候发现我想的太简单了

大概要求是这样的：

图片纵向全屏窗口缩小的时候也是高度填充整个屏幕右侧区域的距离自适应达到一定的临界点的时候就变小一定的尺寸

图片如附件所示

这个页面我的解决方法不是很好

我的方法是：

左边的图片：

绝对定位，top:0, left:0 bottom:0;这样图片就可以纵向全屏了

右边部分：

最外层的div A相对定位用js获取高度

里面的内容区域外面包一层div B 用js计算宽度然后绝对定位 right:0,top:0,bottom:0

真正的内容区域绝对定位利用 top:50% ;left:50%; 负margin-top 和负 margin-left实现垂直水平居中

窗口缩小和打开页面的时候

计算A 的高度和 B的宽度

A的高度：窗口的高度

B的宽度：窗口的宽度-左侧图片的宽度

个人觉得这种方法不太好每次都要通过js计算

希望能在这里看到更好的解决方法

一下是我的解决方式
html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>发布需求</title>
    <link rel="stylesheet" href="/src/css/home/global.css">
    <link rel="stylesheet" href="/src/css/home/demand/newdemand.css" />  
    <!--<link rel="stylesheet" href="/src/css/home/demand/ui-demand-form.css" />
    <link rel="stylesheet" type="text/css" href="/src/css/home/demand/ui-demand-info.css" />-->
  
</head>
<body>
    <!--头部开始-->
        <div class="header h-demand">
    <!--header登陆模块开始-->
    <div class="header-top">
        <div class="w clx">
            <div class="header-tip fl">
                <a href="/">
                    <i class="icons logo50-26"></i>
                </a>


                <!--<div id="j-add-collection">
                    <i class="icon collection"></i>
                    <span>收藏易结</span>
                </div>
                <div class="j-weibo-box">
                    <i class="icon attention"></i>
                    <span>关注易结</span>
                    <div class="attention-box j-weibo">
                        <div class="header-weibo">
                            <p>
                                <a href="http://weibo.com/easywedyj" target="_blank" rel="nofollow">
                                    <img src="http://sa.easywed.cn/dist/images/lib/header/i-weibo.jpg?151009" alt="易结微博" width="75" height="75">
                                </a>
                            </p>
                            <p class="api-wb-box">
                                <wb:follow-button uid="3103031281" type="red_1" width="67" height="24"><iframe src="http://widget.weibo.com/relationship/followbutton.php?btn=red&style=1&uid=3103031281&width=67&height=24&language=zh_cn" width="67" height="24" frameborder="0" scrolling="no" marginheight="0"></iframe></wb:follow-button>
                            </p>
                            <p>
                                <a href="http://weibo.com/easywedyj" target="_blank" rel="nofollow">关注易结官方微博</a>
                            </

最低0.47元/天解锁文章

总是忘记昵称

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
左右布局页面窗口缩小页面自适应

额这两天特别的尴尬遇到这么一个页面开始以为还蛮简单的后来做的时候发现我想的太简单了大概要求是这样的：图片纵向全屏窗口缩小的时候也是高度填充整个屏幕右侧区域的距离自适应达到一定的临界点的时候就变小一定的尺寸图片如附件所示这个页面我的解决方法不是很好我的方法是：左边的图片：绝对定位，top:0, left:0 bottom:0;这样图片就
复制链接

扫一扫