一最安 2021-06-23 02:07 采纳率: 84.4%
浏览 41
已结题

前端怎么解决页面浏览器大小造成元素大小不合理的问题?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> 
    <link type="text/css" rel="stylesheet" href="css\index.css">
    <!-- <link type="text/css" rel="stylesheet" href="css\mainpage.css"> -->
    <title>个人博客主页</title>
</head>
<body>
    <header>
        <div id="video_block">
            <video autoplay loop width=100% height=100% object-fit:fill;
            position: fixed;
                       
                    left: 0;
                    top: 0;
                   
                    z-index: -9999;>
                <source src="./video/页眉视频.mp4">
                <source src="./video/页眉视频.webm">
                <source src="./video/页眉视频.ogv">
                <p>Sorry, your browser doesn't support the video element.</p>
            </video>
        </div>
    </header>

   
<!-- 
    <nav>

        <div id="nav-inner">
            <ul>
                
                <a href="">
                    <li>首页</li>
                </a>
                
                <a href="departments.html">
                    <li>作品集</li>
                </a>

                <a href="">
                    <li>未知</li>
                </a>
                <a href="">
                    <li>未知</li>
                </a>
                <a href="">
                    <li>未知</li>
                </a>
                
              
            </ul>
        </div>
    </nav> -->

   
        <div id="container">

            <div id="sidebar">
                <div id="sidebar-header">
                   
                </div>

                <div id="sidebar-content">
                    <img src="./img/个人证件照.jpg" alt="头像" class="sidebar-content-img">
                    <span class="name">xx</span>

                    <div id="personal_info">
                        <ul>
                            <li>
                                <img src="./img/学生图标.png" alt="icon" class="icon">
                                <span class="university">xxxxx&nbsp;&nbsp;&nbsp;xxxx</span>
                            </li>
                            
                            <li>
                                <img src="./img/专业.png" alt="icon" class="icon">
                                <span class="university">xxxx&nbsp;&nbsp;&nbsp;xxxx</span>
                            </li>

                            <li>
                                <img src="./img/打招呼.png" alt="icon" class="icon">
                                <span class="university">xxxxx</span>
                            </li>
                        </ul>
                       
                    </div>
                    
                </div>
            </div>


            <div id="main">
                <h1>个人动态</h1>

                <div id="detail">
                    <ul>
                        <li>
                            文章一
                        </li>


                        <li>
                            文章一
                        </li>

                        <li>
                            文章一
                        </li>

                        <li>
                            文章一
                        </li>
                    </ul>
                </div>
            </div>
            
    
        </div>
   
   



    <footer>
        &copy; xxx
        <br>
    </footer>
    
</body>
</html>

以上为html代码,以下为css代码

body{
   
    cursor: url("../img/鼠标样式.ico"),auto;
    margin: 0;
    padding: 0;
    /* background-color: yellow; */


}

header div#video_block{
    width:100%;
    height:100% 
}/* 用百分比设置宽度放大缩小浏览器元素大小都不变 */




#wew:before {
    background: url("../img/蓝海和沙滩.jpg") no-repeat;
    background-size:100%;
    background-attachment: fixed;
    width:100%;   
    height: auto;
   
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    /* 让一个层在所有层的下面当背景的方法。 */
    -webkit-filter:blur(5px);
    /* blur(5px)是对图像进行模糊处理 */
    filter: blur(px);
    background-position: center top
}


nav{
    background-color: #b39858;
    width:100%;
    height: 50px;
    margin:0 auto;
    padding: 10px;
}

nav #nav-inner{
    width: 480px;
    margin: 0 auto;
    height: 61px;
  
   
}

nav ul{
    list-style-type: none;
   
    padding: 0;
    margin: 0;


}

nav a{
    text-decoration: none;
    color: #fff;
}

nav li{
   
    float: left;
    position: relative;
    vertical-align: bottom;
    font-size: 16px;
    font-weight: normal;


    padding: 0 25px;
    height: 41px;
    line-height: 41px;
}


nav a:hover{
    color:#fff;
    /* background-color: #85754d; */
}

nav li:hover{
    background-color: #85754d;
    padding: 0 25px;
    height: 41px;
}



div#container{
    
    padding:20px;
    width: 1100px;
    margin:20px auto;
    background-color: black; 
    overflow: hidden;
    /* 当父div没有设置高度,浮动子类div 是有高度的时候,
    只有加入overflow: hidden;一句话才会和浮动子类div高度齐平 */
    


}


div#sidebar{
    width: 360px;
    float: left;

    
    margin: 0;
    
    /* padding: 16px 16px 6px 16px; */
    /* 子头部元素与父元素之间的间距用padding调 */
    /* margin-top: 80px; */
    /* sidebar与header之间的间距调margin-top,sidebar与footer之间的间距调margin-bottom */

    background-color: #fff;
    background-color: red;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 5%);
    
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
 
    
}


div#sidebar-header{
    padding: 0px 1px 6px 16px;
    height: 104px;
    background-color: #6c757d;
    color: hsla(0,0%,100%,.5);
}


div#sidebar-header::after{
    text-align: center;
    box-sizing: border-box;
    font-size: 20px;
    content: "⁶⁶   ⁶⁶⁶⁶⁶⁶   ⁶⁶66⁶⁶⁶⁶    ₆₆₆₆可以啊.这波  ₆₆₆₆⁶⁶⁶⁶⁶        ⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶66⁶⁶⁶⁶      卧槽⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶⁶   666₆₆₆₆₆₆₆ 666        666 ⁶⁶⁶⁶⁶⁶₆₆₆₆₆₆₆⁶⁶⁶⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶ ⁶⁶⁶⁶⁶⁶⁶⁶";
}

div#sidebar-content{
    background-color: #e9ecef;
    /* padding: 0 1.25rem 1.25rem; */
    
}

span.name{
    padding: 0px 26px 6px 52px;
    font-size: 25px;
    margin-left: -83px;
    /* text-align: center; */
    font-weight: bold;
}

img.icon{
    width:30px;
    height:30px;
    
}

img.sidebar-content-img{
    position: relative;
    left: 100px;
    width: 150px;
    height: 150px;
    top: -40px;
    background: #fff;
    border: 4px solid #fff;
    box-sizing: border-box;
    border-radius: 100%;
}


/* div#personal_info{
    margin:10px 15px;
    /* background-color: yellowgreen; */
   


ul,li{
    margin:0;
    padding: 0;
    list-style: none;
   
}

li{
    display: flex;
    /* margin: 20px 10px; */
    padding: 8px 6px;
}

span.university{
    font-weight: bold;
    font-size: 16px;
    padding-top: 8px;
    margin-left: 3px;

}

div#main{
 
    /* float: right; */
    /* width:700px; */
    margin:0px;
    margin-left:410px;
    padding-left:10px;
    background-color: yellowgreen;
    
}


h1{
    margin: 0px;
    padding:0px;
    padding-bottom: 10px;
    
    border-bottom: 1px solid rgba(0,0,0,.0625)!important;

}


footer {
   
   
    background-color: #675c47;
    color:            #efe5d0;
    text-align:       center;
    padding:          15px;
    /* margin: 0px 10px 10px 10px; */
    font-size:        90%;
  }

如图所示。当浏览器增大到150%时,页眉视频大小没有变化,因此页眉旁边出现了很多空白,有碍观瞻。(好像那个视频的高度我改不了),我如何让页眉大小随时自适应浏览器大小呢?

如图所示,当浏览器变小到50%时,页眉大小还是不变,这样就和内容部分显得很突兀。
望指点如何修改让整个页面更美观些。静候答复为盼。

链接:https://pan.baidu.com/s/1ZvTF...
提取码:6661
复制这段内容后打开百度网盘手机App,操作更方便哦

mp4视频已放入网盘

  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2021-06-23 08:59
    关注

    试试用百分比布局。或者禁止缩放

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 8月29日
  • 已采纳回答 8月21日

悬赏问题

  • ¥30 类鸟群Boids——仿真鸟群避障的相关问题
  • ¥15 CFEDEM自带算例错误,如何解决?
  • ¥15 有没有会使用flac3d软件的家人
  • ¥20 360摄像头无法解绑使用,请教解绑当前账号绑定问题,
  • ¥15 docker实践项目
  • ¥15 数电几道习题,写出作答过程,ai一律不采用
  • ¥15 利用pthon计算薄膜结构的光导纳
  • ¥15 海康hlss视频流怎么播放
  • ¥15 Paddleocr:out of memory error on GPU
  • ¥30 51单片机C语言数码管驱动单片机为AT89C52