请教前端大佬们如下排版如何是其中一块最大化

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 248 天前的主题，其中的信息可能已经有所发展或是发生改变。

假如有一个如上图的页面，分 ABC 三块，或者说就 BC 两块，如何实现 BC 两块各自最大化
就是类似于 BC 右上角各有一个最大化和还原按钮，点击最大化之后整个页面就只显示 B 或者 C ，点击还原就回到如上图
想请教下各位前端大佬这类的方案该如何实现呢

23 条回复 • 2024-03-12 18:51:59 +08:00

wu67

248 天前

不要想着最大化. 想想隐藏其他元素.

只要让 bc 区块和容器宽高能够自适应就行, 然后点 c 把左侧隐藏, 点 b 把 ac 隐藏, 内容会自动撑开的.

corcre

248 天前

点击最大化的时候把另外两块 display:none, 还原的时候再显示出来🐶

anjianshi

248 天前

<div id="b-wrapper">
<div id="b"></div>
</div>
<div id="c-wrapper">
<div id="c"></div>
</div>

b-wrapper 和 c-wrapper 始终是非最大化的尺寸和位置。
b 和 c 非最大化时，留在 wrapper 内撑满 wrapper ，
b 要最大化时，把它改成 position: absolute ，然后撑满整个页面，盖住其他内容，
要从最大化还原回来时，取消 position: absolute 然后重新变回撑满 wrapper

ljkWeb

248 天前

flex 布局,bc 自适应,按钮修改 a 的 dispaly,最大化是为 none,还原与正常时为 block

journalistFromHK

248 天前

点击的时候加上一个 class 然后给这个 class 加个 @keyframe

sy0uta1k0n

248 天前

我猜你要找的是他:
https://www.framer.com/motion/

往下翻翻有个点击放大动画

imherer

248 天前

@wu67 是的，我的想法也是这样的，但是我是个半吊子前端，所以来问问各位大佬

imherer

248 天前

@ljkWeb
@corcre 感谢

imherer

248 天前

@journalistFromHK 好的，我看看 @keyframe 是什么用法

imherer

248 天前

@sy0uta1k0n 看着好像可行，不过它这个点击之后不是最大化，我想要的是铺面整个页面。我看看它能不能控制大小

super996

248 天前

有几个问题
1 、A 、B 、C 的加载渲染耗性能吗
2 、这个最大化是暂时的还是相对持久的(切换某个模式后很长一段时间都不会切回去)
3 、A 、B 、C 隐藏过程是否有特殊的逻辑处理
如果以上的答案都是否，那就是简单问题，楼上的各种 css 处理，甚至你用 js 控制都可以

monologue520

248 天前

document 的 api: requestFullscreen 和 exitFullscreen, 一行代码就搞定了

davin

248 天前

其实可以这么想，你需要的最大化按钮，其实就是弹出窗口按钮，点了之后，弹出一个全屏的 modal / dialog 框，这个框的右上角的关闭按钮，就是你的还原按钮。全屏框里面的内容就是你 B / C 里面的内容，B / C 里面的内容放在单独的模板文件中即可，方便复用。

imherer

248 天前

@davin 有道理，好像这个更简单

imherer

248 天前

@monologue520 你这个好像是整个页面全屏吧？我想要的是 B 或者 C 全屏

camchin1

248 天前

@imherer #15

function toggleFullscreen() {
let elem = document.querySelector("b");

if (!document.fullscreenElement) {
elem.requestFullscreen().catch((err) => {
alert(
`Error attempting to enable fullscreen mode: ${err.message} (${err.name})`,
);
});
} else {
document.exitFullscreen();
}
}