个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
27
4
我在 Windows Vista PC 上使用 Google Chrome 32。我目前正在为一个元素构建一个非 Canvas 菜单，使用 position:fixed 设置布局，使用 css transform 显示/隐藏菜单。
为此，我遇到了一个奇怪的布局行为。如果我在一个狭窄的窗口中打开以检查带有 Canvas 外菜单的移动版本，一切都很好，菜单位置正确并且具有 100% height，就像我希望的那样。但是，如果我调整窗口大小，菜单将失去其 100% 的高度，元素将获得父级高度(也使用 position: fixed)。有没有人也遇到过这个问题？如果是，我该如何避免？
这是菜单的标记:
<body>
<header>
<div class="container">
<span id="logo">LOGO</span>
<a href="#" id="mobile-nav">Menu</a>
<nav>
<ul id="menu" >
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</nav>
</div>
</header>
</body>
还有 CSS:
body{
font-family: sans-serif;
}
header, nav{
position: fixed;
top: 0;
}
header{
width: 100%;
left: 0;
height: 45px;
background-color: #ffcc00;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.container{
max-width: 1024px;
position: relative;
margin: 0 auto;
display: block;
}
#logo{
position: absolute;
top: 10px;
left: 10px;
}
#mobile-nav{
display: inline-block;
padding: 7px 10px;
position: absolute;
top: 5px;
right: 5px;
background-color: #cc3300;
color: #fff;
text-decoration: none;
}
nav{
right: 0;
bottom: 0;
width: 30%;
background-color: #cc3300;
z-index: 999;
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
body.active header
{
-webkit-transform: translateX(-30%);
transform: translateX(-30%);
}
#menu{
margin: 0;
padding: 0;
list-style: none;
}
#menu a{
display: block;
padding: 20px;
text-decoration: none;
color: #fff;
font-weight: bold;
}
#menu a:hover{
background-color: #ff3300;
}
您可以 check this pen重现行为。先使用菜单按钮打开/关闭菜单，然后打开菜单并调整 View 大小以检查问题。
最佳答案
我修改了 HTML 结构以及您的一些 CSS 以解决您遇到的问题。这是一个 pen的解决方案。
我认为这个问题与 translate 有关，所以我将其改为使用 position。
关于html - 固定元素(100% 高度)和 css3 变换/过渡的奇怪行为，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21841296/
27
4
0
我正在寻找一种简单的解决方案来将对象从一个地方移动和缩放到另一个地方。 我做了一个JSfiddle用这个代码。问题是我需要它在某个时刻停止变小。所以它有一个最小尺寸，另一个问题是我希望它既缩小又向左移
我正在尝试通过沿 x 轴上下翻转(180 度)来为悬停时的图像设置动画。 就像here 除非我出于某种原因无法让它工作。 img { transition:all 2s ease-in-out
我想实例化一个 slider 约束，它允许 body 在 A 点和 B 点之间滑动。 为了实例化约束，我指定了两个物体进行约束，在这种情况下，一个动态物体被约束到静态世界，比如滑动门。 第三个和第四个
我想使用此功能旋转然后停止在特定点或角度。现在该元素只是旋转而不停止。代码如下: $(function() { var $elie = $("#bkgimg");
我正在尝试使用 CATransform3D 向 View 添加透视图。目前，这就是我得到的: 这就是我想要得到的: 我很难做到这一点。我完全迷失在这里。这是我的代码: CATransform3D t
我编写了一个图形用户界面，用户可以在其中在 (640x480) 窗口中绘制内容。它使该绘图成为一组存储在 Vector 数组中的点。 现在，我如何将这些点集平移到原点(0,0 窗口左上角)或将其放在指
我的应用程序中有两张图像相互叠加，分别表示为 foreground 和 background。对于这两个，我都使用 background-attachment: fixed 来确保图像始终彼此完全相同
如何在不损失质量的情况下应用旋转变换？我试过添加 translateZ(0) 但它无济于事。这是例子: svg { background-color: rgb(93, 193, 93); }
我有一个 div，我试图在悬停时缩放它(只是 Y)。问题是它在没有过渡的情况下运行良好。当我使用过渡时，div 在顶部缩放一点然后下降，检查 fiddle 。问题是如何防止 div 那样缩放？我希望它
我正在尝试使用 transform: scale 图像网格 http://movies.themodern-nerd.com/genre .从左向右滚动时它工作正常，悬停的图像将停留在其他图像之上，但
我正在查看 CSS3 Transform 并且想要一个既倾斜又旋转的盒子。 我试过使用: transform:rotate(80deg); -moz-transform:rotate(80deg);
当用户在图像父元素上执行 mousemove 时，我试图在 img 上添加平滑移动效果(此处为 .carousel-img)但我无法正常运行它。 我做错了什么？ $('.carousel-img').
我有 div 元素在其他 div 元素中垂直对齐。 我使用以下方法对齐它们:position: relative;变换:翻译Y(-50%)；顶部:50%。这很好用。 我现在想缩放元素(使用 jQuer
我在这个 fiddle 中使用 RotateX 后创建了 3D 效果: http://jsfiddle.net/vEWEL/11/ 但是，我不确定如何在这个 Fiddle 中的红色方 block 上实
使用 transform: scale(x.x) 而不是使用 width 和 height 属性进行传统的调整大小有什么缺点吗？缩放会产生质量较低的图像或其他什么吗？ 最佳答案 Scale 生成总体上
我在一个点上有一个对象，比如相对于原点的 x、y、z。 我想对点应用一些变换，比如旋转和平移，并在变换后的点渲染对象。我正在使用 glTranslatef() 和 glRotatef() 函数。它看起
有没有办法将转换应用到插入了 :before 的元素上？ 以下方法无效，但我愿意接受其他解决方案。 .itemclass:before { content: "➨"; transform:
我找到了这个:width/height after transform 和其他几个，但没有什么不是我正在寻找的。我想要的是将某些东西缩放到其大小的 50%(当然还有漂亮的动画过渡)并让页面布局重新调整
我想使用变换为元素位置设置动画。我怎么能在这个翻译中添加一些曲线(没什么特别的，只是不是一条完整的直线)？对于 jquery，我会使用效果很好的 easeInSine。 var a = documen
我试着写一个 TransformMesh功能。该函数接受一个 Mesh对象和 Matrix目的。这个想法是使用矩阵来转换网格。为此，我锁定了顶点缓冲区，并在每个顶点上调用了 Vector3::Tran
我是一名优秀的程序员,十分优秀！