Html 改变位置后调整宽度

我试图通过更改

main

元素的左值来创建滑动菜单效果。我需要它调整大小，以填补剩余的空间，但移动到左边。我尝试添加

宽度：100%

，但似乎没有任何区别。位置更改的行为与我希望的一样，但我无法使元素也正确调整大小。这是我到目前为止所拥有的

<div>
    <!-- Nav Here -->
</div>
<main>
    <!-- Content Here -->
</main>

---

所以有几种方法可以解决这个问题，但第一条规则是宽度：100%几乎总是个坏主意。大多数情况下，它不会起作用，但可能会把一些意想不到的事情搞砸

关于解决方案：

因此，解决方案1。可能是最简单的一个，看起来像这样：

#主{
位置：固定；
最小宽度：100px；
最小高度：200px；
右：-85px；
顶部：10px；
填充：10px；
背景：#5050550；
过渡：均为0.2s；
z指数：99；
}
#主：悬停{
右：10px；
}

你好，世界

向左滑动

只是想澄清一下，您需要主屏幕还是导航屏幕？默认情况下，我在第页都有主屏幕，我希望主屏幕向左滑动以覆盖div，同时展开以填充剩余的屏幕空间感谢您的回复。你的第二个解决方案与我想要的非常接近。区别在于我基本上需要“过度增长”主要内容。默认情况下，main应该在设置导航宽度后占用剩余空间，然后当我想隐藏菜单时，它应该增长到全屏宽度，覆盖导航。

main {
  position: relative;
  z-index: 10;
  width: 100%;
  transition: 0.2s;
  left: 0;
}

main:hover {
  left: -5rem;
}