Chrome中打开菜单容器时导航内容截断的解决方法求助

问题说明 #

打开右侧菜单容器时，header可正常左移无截断，但nav内容出现截断，无法完整跟随左移。调整CSS的transition、transform属性后问题仍存在。

修复思路及步骤 #

1. 核心问题：

   • 原代码中html, body设置了固定宽度1280px，导致nav左移后超出部分被容器隐藏
   • nav元素未设置overflow: visible，内容溢出时会被截断
   • 使用matrix进行位移不够直观，不利于维护

2. 具体修复：

   • 移除html, body的固定宽度，改为自适应宽度并保留最大宽度限制
   • 给nav添加overflow: visible确保左移时内容不被截断
   • 将transform的matrix写法替换为更直观的translateX()

修改后的完整代码 #

HTML（修正结构错误）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Classic's Blog</title>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet">
    <link href="css/mainstyle.css" rel="stylesheet">
    <link href="css/substyle.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>
    <header>
        <div id="container">
            <div class="box">
                <span id="menu"></span>
                <h1><a href="index.html">홍영현의 블로그</a></h1>
            </div>
        </div>
    </header>
    <menu>
        <span id="close-menu"></span>
        <ul id="menuList">
            <li><a href="#"><p class="menuList1">ALL</p></a></li>
            <li>
                <a href="#"><p class="menuList1">Rhythm Game</p></a>
                <ul>
                    <li><a href="#" class="menuList2">BMS</a></li>
                    <li><a href="#" class="menuList2">EZ2ON</a></li>
                </ul>
            </li>
            <li>
                <a href="#"><p class="menuList1">개발</p></a>
                <ul>
                    <li><a href="#" class="menuList2">Python</a></li>
                    <li><a href="#" class="menuList2">Kotlin</a></li>
                </ul>
            </li>
            <li><a href="#"><p class="menuList1">About</p></a></li>
        </ul>
    </menu>
    <nav>
        <p class="menuText">ALL</p>
        <fieldset>
            <img src="" class="fieldImage">
            <p class="title">Something</p>
            <p class="content">Interest thing</p>
        </fieldset>
    </nav>
</body>
</html>

mainstyle.css（关键修改部分）

/* 移除固定宽度，改为自适应+最大宽度限制 */
html, body {
  background: #FFF;
  color: #444;
  font-family: 'Lato', sans-serif;
  margin: 0 auto;
  padding: 0;
  width: auto;
  max-width: 1280px;
}

/* 保留原有其他样式 */
a {
  color: inherit;
  text-decoration: none;
}
.headTitle {
  margin-top:-3px;
}
a:hover {
  color: #FF5959;
}
ul,
li {
  list-style-type: none;
  font-style:none;
  margin: 0 auto;
  padding: 0;
}
ul li {
  display: inline-block;
}
header,
.container,
#box {
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
}
header {
  width:1000px;
  height:100px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
  color: #fff;
  background: url(../image/beat.jpg);
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: initial;
  z-index: 9;
  transform: translateX(0);
  transition: all .5s ease-in-out;
}
html.active header {
  transform: translateX(-320px);
  transition: all .5s ease-in-out;
}

/* 省略中间原有不变样式 */

/* 修改nav样式 */
nav {
  position: relative;
  margin-top:10%;
  margin-left:-14.5%;
  width:100%;
  height:100%;
  text-align:left;
  overflow: visible;
  transform: translateX(0);
  transition: all .5s ease-in-out;
}
html.active nav {
  transform: translateX(-320px);
  transition: all .5s ease-in-out;
}

/* 保留原有媒体查询样式 */
@media only screen and (min-width: 520px) {
  header .container {
    max-width: 640px
  }
  header .box {
    display: block;
  }
  nav .h1 {
    display: block;
  }
}

substyle.css（无需修改）

fieldset {
    width: 700px;
    height: 150px;
    border: 1px solid #000;
    padding: 0%;
}
.menuText {
    font-size: 50px;
    font-weight: bold;
    margin: 25px 25px;
    margin-top: -10px;
}
.fieldImage {
    float:left;
    width: 200px;
    height: 150px;
}
.title {
    font-size: 30px;
    font-weight: bold;
    padding: 0%;
    line-height: 0%;
}

script.js（无需修改）

$(function() {
  var w = $(window).width(),
      h = $(window).height();
  $('menu .container').height(h - 60);
  $('body').prepend('<div id="overlay"></div>');
  $('#menu').click(function() {
  $('html').addClass('active');
});
$('#close-menu').click(function() {
  $('html').removeClass('active');
});
$('#overlay').click(function() {
  $('html').removeClass('active');
});
$(window).resize(function() {
  var w = $(window).width(),
      h = $(window).height();
  $('menu .container').height(h - 60);
});
});

内容的提问来源于stack exchange，提问作者Probitality