1200字范文 > div自适应宽度的问题求高手帮忙！【HTML】

div自适应宽度的问题求高手帮忙！【HTML】

时间：2020-12-02 05:47:26

web前端|html教程

自适应,宽度,div,帮忙,高手

web前端-html教程

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

国外卖源码,vscode扩展需要重新加载,ubuntu固定内核,tomcat8setup,爬虫阻止脱敏,虚拟主机不支持php,安新县seo优化推荐,网站源文件修改,感情特效模板lzw

这是菜单展开的图：搜索

网页考试系统自动答题软件源码,725n ubuntu,爬虫怎么对付谁,rhel php 升级,头条网站seolzw

这是菜单隐藏的图：

推券客源码最新,设置ubuntu启动顺序,tomcat8w 配置内存,爬虫卖家渠道,php函数简易计算器,seo平常工作lzw

这是body:

这是样式表：

#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;

}

.mydiv

{

position:fixed;

top:40px;

left:0px;

width: 100%;

height:650px;

}

这是伸缩菜单的js：

//左侧弹出菜单

window.onload = function () {

var common_box = document.getElementById(“common_box”);

var cli_on = document.getElementById(“cli_on”);

var flag = true, r_len = 0, timer = null;

cli_on.onclick = function () {

if (flag) {

r_len = 0;

timer = setInterval(slideright, 10);

} else {

r_len = -270;

timer = setInterval(slideleft, 10);

}

function slideright() {

if (r_len <= -270) {

flag = !flag;

cli_on.innerHTML = “”;

clearInterval(timer);

return false;

} else {

r_len -= 5;

common_box.style.left = r_len + “px”;

}

function slideleft() {

if (r_len >= 0) {

clearInterval(timer);

flag = !flag;

cli_on.innerHTML = “”;

return false;

} else {

r_len += 5;

common_box.style.left = r_len + “px”;

}

就是想改成像这个网站论坛首页左面菜单栏的那种感觉。

回复讨论(解决方案)

你这个页面的布局不对啊，你看你使用的是position:fixed。在控制显示位置的，这个很明显的，就会出现覆盖这个问题了。

这个你可以这么处理：

左侧的那块，使用定位处理，而右侧的那块，不使用定位，但是使用一个margin-left来控制左侧空出来的距离

当你左侧的更改时，同时改变右侧的那个margin-left的值就行了。

我这么说，能想明白吗？

mydiv{margin-top:40px;background-color:#eee;height:650px;margin-left:280px;}

在你的基础上，稍微改了一点。试试是你要的效果吗？没有测兼容性。

不过，一些效果的话，html部分的布局也是很重要的，先想好布局，之后的js和css写起来，才会更简单的。

感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图，由于之前它们已经绘制完毕了，左右移动时，不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的），就是由于初始时加载的画面太小已经固定，不能动态适应宽度变化（当你向左侧移动地图时，右侧新增的部分应该不会被自动填充)。

因此，我建议应该在timer的事件中改变两侧div的宽度，同时重新填充div中的内容，使其适应宽度的变化。

#common_box{width:15%;height :100%;position:fixed;left:0;top:40px;border:1px solid #789;background:#fff;z-index:99; float:left; padding:0; } #cli_on{width:10px;height:100%;float:right;cursor:pointer;background:#ccc;text-align:center;line-height:180px;font-size:24px;color:#f00; } .mydiv { position:fixed; top:40px; right:0px; width: 85%; height:650px;float: right;padding:0; }//左侧弹出菜单 window.onload = function () { var common_box = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on");var mapDiv = document.getElementById("mapDiv"); var flag = true, r_len = 0, timer = null;var mapDiv_width = mapDiv.clientWidth;var common_box_width = common_box.clientWidth;var body_client_width = mapDiv.clientWidth + common_box.clientWidth; cli_on.onclick = function () {if (flag) { r_len = common_box_width; timer = setInterval(slideright, 10);} else { r_len = 0; timer = setInterval(slideleft, 10);} } function slideright() {if (r_len = common_box_width) { clearInterval(timer); flag = !flag;common_box.style.width = common_box.clientWidth + "px";mapDiv.style.width = mapDiv_width + "px"; cli_on.innerHTML = "菜单栏";mapDiv.innerHTML = "地图"; return false;} else { r_len += 5; common_box.style.width = r_len + "px";mapDiv.style.width = body_client_width - common_box.clientWidth + "px";mapDiv.innerHTML = "地图";} } }

菜单栏

地图

因此，我建议应该在timer的事件中改变两侧div的宽度，同时重新填充div中的内容，使其适应宽度的变化。

菜单栏

地图

嗯，按照你的帮助修改运行了一下代码，果真左面的菜单栏不会覆盖右面的地图了，但在菜单栏隐藏时，右面的地图会在右面留出15%的空白，没法被自动填充

因此，我建议应该在timer的事件中改变两侧div的宽度，同时重新填充div中的内容，使其适应宽度的变化。

菜单栏

地图

我写的效果就是需要手动重绘地图的，你需要将

mapDiv.innerHTML = “地图”;

这些地方替换成地图的加载代码，这样地图才能自动适应画面变化。