div自适应宽度的问题，求高手帮忙！

Posted 2023-04-14

在左侧做了一个可以自动伸缩的菜单栏，想让菜单栏展开时，完全展开右面带地图的div，而不是被左面的菜单遮住一部分，该怎么解决？
这是菜单展开的图：

这是菜单隐藏的图：

这是body:
<div id="mapDiv"></div> <div id="common_box"> <div id="cli_on"></div> </div>
这是样式表：
#common_box width:280px; height :100%; position:fixed; left:0; top:40px; border:1px solid #789; background:#fff; z-index:99 #cli_on width:10px; height:100%; float:right; cursor:pointer; background:#ccc; text-align:center; line-height:180px; font-size:24px; color:#f00;
这是伸缩菜单的js：

参考技术A 解决方案的话，我想到了z-index，详细用法请看百度http://www.baidu.com/s?rsv_bp=0&rsv_spt=3&ie=utf-8&rsv_sug3=29&rsv_sug4=284&rsv_sug1=28&rsv_sug2=0&inputT=14&wd=z-index&tn=jtwz_pg&ch=5
或者看这个也行http://www.w3school.com.cn/cssref/pr_pos_z-index.asp
z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
这个具体的使用方法，还是你自己研究下，我的水平，感觉只能自己用，给别人讲不了。追问

堆叠的顺序和自适应有什么关系？

追答

不好意思，看错了问题，看成是想让菜单栏展开时，完全展开右面带地图的div，而是被左面的菜单遮住一部分，汗。。。
楼下的那位说的不错，菜单展开的时候#mapDivmargin-left:280px;这个可行

参考技术B / *显示* /
＃秀

浮动：权利;

最小宽度：336px;

最大宽度：100％;

高度：自动; 的margin-left：495px;

填充左：均为15px;

填充右：均为15px;

填充顶：8像素;

线高度：20像素; 字母间距：4PX;

溢出：隐藏;
就是这样。追问

这是什么意思？没看懂。。

参考技术C 菜单展开的时候#mapDivmargin-left:280px;没有具体代码试下，不知道行不行，你自己试试追问

展开的时候果真右面的div在右面了，但隐藏的时候div还是在右面，左面一大片空白。怎么用js控制？

追答

你不是有菜单伸缩的js吗，

用js控制，菜单展开的时候加#mapDivmargin-left:280px;

菜单隐藏的时候去掉#mapDivmargin-left:280px;

本回答被提问者采纳

css宽度自适应的问题

参考技术A 1. 用百分比实现 width:50%,这样会根据屏幕的大小来自适应宽度

（插一条calc的属性详解）

vw ：Viewport width，即容器（可以是div）的宽度，默认1vw=整个视窗宽度的1%，全屏为100vw。比如视窗宽度为1200px，1vw=120px=1200px*1%，如果是满屏就则为100vw=1200px。

vh ：Viewport height，即容器（如div）的高度，默认1vh=整个可视窗口高度的1%，全屏是100vh。

2. calc（100vmin）也可以达到自适应的效果，但还是用起来效果一般

3. calc(100vw - px)  vw是根据屏幕的大小来计算的，屏幕缩小，100vw也会变大