我想重新创建此侧边菜单行为:
我目前有 HTML 结构:
<body>
<header>
<nav>
<ul></ul>
</nav>
</header>
<main></main>
<footer></footer>
</body>
我希望在调用侧边菜单后缩小所有可见区域，包括页脚(如果此时可见)。我正在考虑将 main 和 footer 包装在 div 中并像在这个模型中那样缩放它:
但这不是违背良好的 HTML 结构原则吗？什么标签最适合它？
代码需要在所有现代浏览器中运行。
最佳答案
您可以考虑几个想法。
仅在侧边栏被调用出现时插入包装 div - 您可能会使用 javascript 打开侧边菜单。您的 HTML 结构只会在打开侧边栏时受到影响。当动画/状态关闭时，您可以移除包装 div。
缩放两个元素并将它们放在一起 - 您不需要将 main 和 footer 作为一个元素，尝试缩小它们并将它们彼此靠近放置并使其看起来像一个元素。我知道这需要一些前后修正。但这意味着您根本不需要包装元素。
在页面加载后对页面进行截图 - 这是一个更技术性的解决方案。有一些库可以截取当前视口(viewport)并将其制作成图像。您可以截图并将它们放在导航元素中。我确实认为这不是最好的解决方案，但仍然值得一提。请参阅:http://html2canvas.hertzen.com/
关于html - 将主要元素和页脚元素包装在一起是不好的做法吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57905239/