一か念う执着が 2022-10-20 15:54 采纳率: 94.1%
浏览 37
已结题

div自适应问题,显示新div高度发生变化会上下撑开,不需要div上下撑开

在div隐藏时居中是没问题的,父级我采用的是高度不固定的,但是div5的display=block时,父级的高度也会随着增加,这个是都是知道的结果,这个没有通常的向下增加高度而是由中间往上下两个点各增加一点,然后所有子div会向上移动一点,我是想不出现这个现象而是想和通常一样向下增加高度来显示div5。又不影响自适应


<!DOCTYPE html>
<html lang="zh-CN">
    <meta charset="utf-8">
    <head>
          <title>居中问题</title>
    </head>
    <style>
       #rightMenuNavigation{
border-radius: 18px 0 0 18px;
background-color: #F7F9FA;
position: fixed;
right: 0;
top: 50%;
transform: translateY(-40%);
-moz-box-shadow: -2px 0 30px 2px rgba(97, 105, 119, 0.18);
-webkit-box-shadow: -2px 0 30px 2px rgba(97, 105, 119, 0.18);
box-shadow: -2px 0 30px 2px rgba(97, 105, 119, 0.18);
width: 60px;
z-index: 999;
}
.J_s_tookit_list{
    padding: 26px 0;
}
.J_s_tookit_list div{
    width: 60px;
    height: 46px;
}
    </style>
    <body>
        <div id="J_tookit">
            <div id="rightMenuNavigation" style="border: 1px solid #f20e00;">
                <div class="J_s_tookit_list">
                    <div id="J_sNews" style="background-color: red;">
                        111
                    </div>
                    <div id="J_CustomerServiceBox" style="border:1px solid #3c3c3c;">
                       222
                    </div>
                    <div id="J_sfeedbackBox" style="border:1px solid #3c3c3c;">
                        333
                    </div>
                    <div id="J_reportBox" style="border:1px solid #3c3c3c;">
                       444
                    </div>
                    <div id="J_top_kitBox" style="display:none;border:1px solid #3c3c3c;" >
                        555
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
  • 写回答

2条回答 默认 最新

  • 爱听老歌的程序员 2022-10-20 16:17
    关注
    
    #rightMenuNavigation {
     border-radius: 18px 0 0 18px;
     background-color: #F7F9FA;
     /* 修改 */
     position: absolute;
     right: 0;
     top: 50%;
     /* 修改 */
     transform: translate(0, -50%);
     width: 60px;
     z-index: 999;
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 10月31日
  • 已采纳回答 10月23日
  • 创建了问题 10月20日

悬赏问题

  • ¥20 西门子S7-Graph,S7-300,梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改,求解答!!
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗?在Android studio上该如何部署?
  • ¥20 docker里部署springboot项目,访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏!微信开发者工具报错,求帮改