我妈已经三天没打我了 2022-04-12 14:30 采纳率: 85.4%
浏览 34
已结题

页面出现出现竖向滑动条

图片大小明明正好,为什么会出现竖向的滑动条呢

img


```bash
/* 登录页面 */
/* body背景 */
.login_bg{
   width: 100%;
   position: relative;
}

/* 背景图 */ 
.login_bg > img{
 width: 100%; 
}

/* 整个布局页面 */
.login_bg > div{
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
}

/* 顶部 */
.login_title {
   height: 1.2rem;
   /* line-height: .3rem; */
   text-align: right;
   font-size: 0.38rem;
   padding-right: 0.5rem;
   /* text-align: center; */
}

.login_title a span{
   color: #fd6246;
   font-size: 1rem;
   line-height: 1.2rem;
}

/* 小图标 */
.login_title .icon {
   position: absolute;
   left: 0.5rem;
   top: 0.26rem;
   width: 0.48rem;
   height: 0.92rem;
   background: url(../image1/login_back.png) no-repeat;
   background-size: 0.48rem 0.92rem;
   vertical-align: middle;
}

/* 登录内容 */
.login_content {
   margin-top: 7rem;
}

/* 用户/密码css */
.login_content input {
   background-color: transparent;
   color: #979797;
   width: 100%;
   margin-right: 10%;
   border: none;
   font-size: 1rem;
   outline: none;
   text-align: center;
   border-bottom: 1px solid #ddd;
   padding-top: 2rem;
  
} 
/* 图标 */
/* .login_content .icon {
   width: .32rem;
   height: .32rem;
} */
/* 用户/手机号 密码 */
.username,.password{
   margin-left: 10%;
   display: flex;
   align-items: flex-end;
}
/* 点击input框,字体颜色变了 */
.login_content .username,.password input:focus {
   color: #beb5b5;
}

.login_content .username input:focus::-webkit-input-placeholder {
   color: #beb5b5;
}
/* 小眼睛 */
.password{
   position: relative;
}
.login_content .password .icon_eye {
   position: absolute;
   right: 10%;
   /* top: 0.7rem; */
   bottom: 0.5rem;
   /* width: 0.45rem; */
}

/* 按钮 */
.btn {
   display: block;
   width: 80%;
   margin: 0 auto;
   text-align: center;
   font-size: 1rem;
   color: #fff;
   height: 2.5rem;
   line-height: 2.5rem;
   border-radius: 1rem;
}
.login_btn {
   background-color: #fd6246;
   margin-top: 3rem;
}
/* 忘记密码 */
.login_content .forget_btn {
   width: 6.02rem;
   margin: 0.42rem auto 0;
   text-align: center;
}

.login_content .forget_btn a {
   font-size: 0.24rem;
   color: #e17e8e;
}

/* 第三方登录 */
.thirdPartyLoginWrap {
   margin-top: 1rem;
   text-align: center;
   padding-top: 0.7rem;
}

.thirdPartyLoginWrap ul {
   /* display: inline-block;
   text-align: center; */
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 1rem;
}

.thirdPartyLoginWrap li {
   width: 4rem;
   /* height: 0.78rem; */
   /* float: left; */
}

.thirdPartyLoginWrap li a {
   display: block;
   width: 100%;
   height: 100%;
}

.thirdPartyLoginWrap li {
   margin: 0 0.56rem;
}

.thirdPartyLoginWrap li img {
   display: block;
   width: 100%;
}



<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0">
   <title>登录页面1</title>
   <link rel="stylesheet" href="./css/reset.css"/>
   <link rel="stylesheet" href="./css/Login1.css">
</head>
<body>
   <div class="login_bg">
      <!-- 背景图 -->
      <img src="./image1/login_bg.png" alt="">
      <!-- 页面 -->
      <div>
         <!-- 顶部 -->
         <div class="login_title">
            <a href="index.html"><i class="icon"></i></a>
            <a href="reg1.html"><span>注册</span></a>
         </div>
         <!-- 登录内容 -->
         <div class="login_content">
            <!-- 用户名 -->
            <div class="username">
               <!-- <i class="icon icon_user"></i> -->
               <img src="./image1/user_login.png" alt="" class="icon icon_user">
               <input type="text" id="user" placeholder="用户名/手机号">
            </div>
            <!-- 密码 -->
            <div class="password">
               <img src="./image1/pwd_login.png" alt="" class="icon icon_user">
               <input type="password" id="pwd" placeholder="密码">
               <img src="./image1/bkj.png" class="icon_eye">
            </div>
            <!-- 登录 -->
            <span class="btn login_btn">登录</span>
            <!-- 忘记密码 -->
            <p class="forget_btn">
               <a href="forgetPwd.html">忘记密码?</a>
            </p>
            <!-- 登录快捷方式 -->
            <div class="thirdPartyLoginWrap">
               <div>使用第三方账号登录</div>
               <ul class="clearfix">
                  <li id="wechatBtn">
                     <a href="javascript:;" class="wechat">
                        <img src="./image1/WeChat.png" alt="">
                     </a>
                  </li>
                  <li id="QQBtn">
                     <a href="javascript:;" class="wechat">
                        <img src="./image1/QQ.png" alt="">
                     </a>
                  </li>
                  <li id="weiboBtn">
                     <a href="javascript:;" class="wechat">
                        <img src="./image1/Weibo.png" alt="">
                     </a>
                  </li>
               </ul>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

```

  • 写回答

2条回答 默认 最新

  • 归来巨星 前端领域新星创作者 2022-04-12 14:38
    关注

    不排除有 padding 或者 内部元素将图片外部元素高度撑起来了

    不影响的话加个overflow:hidden 高度 height:100vh;试试

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

报告相同问题?

问题事件

  • 系统已结题 4月21日
  • 已采纳回答 4月13日
  • 创建了问题 4月12日

悬赏问题

  • ¥20 测距传感器数据手册i2c
  • ¥15 RPA正常跑,cmd输入cookies跑不出来
  • ¥15 求帮我调试一下freefem代码
  • ¥15 matlab代码解决,怎么运行
  • ¥15 R语言Rstudio突然无法启动
  • ¥15 关于#matlab#的问题:提取2个图像的变量作为另外一个图像像元的移动量,计算新的位置创建新的图像并提取第二个图像的变量到新的图像
  • ¥15 改算法,照着压缩包里边,参考其他代码封装的格式 写到main函数里
  • ¥15 用windows做服务的同志有吗
  • ¥60 求一个简单的网页(标签-安全|关键词-上传)
  • ¥35 lstm时间序列共享单车预测,loss值优化,参数优化算法