div自适应宽度的问题，求高手帮忙！_html/css_WEB-ITnose
在左侧做了一个可以自动伸缩的菜单栏，想让菜单栏展开时，完全展开右面带地图的div，而不是被左面的菜单遮住一部分，该怎么解决？
这是菜单展开的图：搜索
这是菜单隐藏的图：
这是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：
<script> <br /> //左侧弹出菜单 <br /> window.onload = function () { <br /> var common_box = document.getElementById("common_box"); <br /> var cli_on = document.getElementById("cli_on"); <br /> var flag = true, r_len = 0, timer = null; <br /> cli_on.onclick = function () { <br /> if (flag) { <br /> r_len = 0; <br /> timer = setInterval(slideright, 10); <br /> <br /> } else { <br /> r_len = -270; <br /> timer = setInterval(slideleft, 10); <br /> } <br /> } <br /> function slideright() { <br /> if (r_len <= -270) { <br /> flag = !flag; <br /> cli_on.innerHTML = ""; <br /> clearInterval(timer); <br /> return false; <br /> <br /> } else { <br /> r_len -= 5; <br /> common_box.style.left = r_len + "px"; <br /> } <br /> } <br /> function slideleft() { <br /> <br /> if (r_len >= 0) { <br /> clearInterval(timer); <br /> flag = !flag; <br /> cli_on.innerHTML = ""; <br /> return false; <br /> } else { <br /> r_len += 5; <br /> common_box.style.left = r_len + "px"; <br /> } <br /> } <br /> <br /> } <br /> </script>
就是想改成像这个网站论坛首页左面菜单栏的那种感觉。
回复讨论(解决方案)
你这个页面的布局不对啊，你看你使用的是position:fixed。在控制显示位置的，这个很明显的，就会出现覆盖这个问题了。
这个你可以这么处理：
左侧的那块，使用定位处理，而右侧的那块，不使用定位，但是使用一个margin-left来控制左侧空出来的距离
当你左侧的更改时，同时改变右侧的那个margin-left的值就行了。
我这么说，能想明白吗？
mydiv{ margin-top:40px; background-color:#eee; height:650px; margin-left:280px;}window.onload = function () { var common_box = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on"); var mapDiv = document.getElementById("mapDiv"); //zheli 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"; mapDiv.style.marginLeft = 270 + r_len + "px"; //zheli } } 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"; mapDiv.style.marginLeft = 270 + r_len + "px"; //zheli } }}在你的基础上，稍微改了一点。试试是你要的效果吗？没有测兼容性。
不过，一些效果的话，html部分的布局也是很重要的，先想好布局，之后的js和css写起来，才会更简单的。
感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图，由于之前它们已经绘制完毕了，左右移动时，不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的），就是由于初始时加载的画面太小已经固定，不能动态适应宽度变化（当你向左侧移动地图时，右侧新增的部分应该不会被自动填充)。
因此，我建议应该在timer的事件中改变两侧div的宽度，同时重新填充div中的内容，使其适应宽度的变化。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style>#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; }</style><script type="text/javascript"> //左侧弹出菜单 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 <= 10) { flag = !flag; common_box.style.width = 10 + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; clearInterval(timer); 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 = "地图"; } } function slideleft() { 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 = "地图"; } } }</script><body> <div> <div id="common_box" style="background-color:yellow; overflow: hidden;"> <div id="cli_on">菜单栏</div> </div> <div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div> </div></body></html>
感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图，由于之前它们已经绘制完毕了，左右移动时，不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的），就是由于初始时加载的画面太小已经固定，不能动态适应宽度变化（当你向左侧移动地图时，右侧新增的部分应该不会被自动填充)。
因此，我建议应该在timer的事件中改变两侧div的宽度，同时重新填充div中的内容，使其适应宽度的变化。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style>#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; }</style><script type="text/javascript"> //左侧弹出菜单 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 <= 10) { flag = !flag; common_box.style.width = 10 + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; clearInterval(timer); 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 = "地图"; } } function slideleft() { 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 = "地图"; } } }</script><body> <div> <div id="common_box" style="background-color:yellow; overflow: hidden;"> <div id="cli_on">菜单栏</div> </div> <div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div> </div></body></html>嗯，按照你的帮助修改运行了一下代码，果真左面的菜单栏不会覆盖右面的地图了，但在菜单栏隐藏时，右面的地图会在右面留出15%的空白，没法被自动填充
感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图，由于之前它们已经绘制完毕了，左右移动时，不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的），就是由于初始时加载的画面太小已经固定，不能动态适应宽度变化（当你向左侧移动地图时，右侧新增的部分应该不会被自动填充)。
因此，我建议应该在timer的事件中改变两侧div的宽度，同时重新填充div中的内容，使其适应宽度的变化。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style>#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; }</style><script type="text/javascript"> //左侧弹出菜单 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 <= 10) { flag = !flag; common_box.style.width = 10 + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; clearInterval(timer); 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 = "地图"; } } function slideleft() { 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 = "地图"; } } }</script><body> <div> <div id="common_box" style="background-color:yellow; overflow: hidden;"> <div id="cli_on">菜单栏</div> </div> <div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div> </div></body></html>嗯，按照你的帮助修改运行了一下代码，果真左面的菜单栏不会覆盖右面的地图了，但在菜单栏隐藏时，右面的地图会在右面留出15%的空白，没法被自动填充
我写的效果就是需要手动重绘地图的，你需要将
mapDiv.innerHTML = "地图";
这些地方替换成地图的加载代码，这样地图才能自动适应画面变化。
mydiv{ margin-top:40px; background-color:#eee; height:650px; margin-left:280px;}window.onload = function () { var common_box = document.getElementById("common_box"); var cli_on = document.getElementById("cli_on"); var mapDiv = document.getElementById("mapDiv"); //zheli 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"; mapDiv.style.marginLeft = 270 + r_len + "px"; //zheli } } 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"; mapDiv.style.marginLeft = 270 + r_len + "px"; //zheli } }}在你的基础上，稍微改了一点。试试是你要的效果吗？没有测兼容性。
不过，一些效果的话，html部分的布局也是很重要的，先想好布局，之后的js和css写起来，才会更简单的。
试了一下，效果实现了！是不是用position:fixed;直接固定位置挺不好的？
感觉应该需要改变div的宽度。用left什么的左右移动菜单和地图，由于之前它们已经绘制完毕了，左右移动时，不是遮盖了自身的一部分(这个效果应该只是左侧菜单需要的），就是由于初始时加载的画面太小已经固定，不能动态适应宽度变化（当你向左侧移动地图时，右侧新增的部分应该不会被自动填充)。
因此，我建议应该在timer的事件中改变两侧div的宽度，同时重新填充div中的内容，使其适应宽度的变化。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style>#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; }</style><script type="text/javascript"> //左侧弹出菜单 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 <= 10) { flag = !flag; common_box.style.width = 10 + "px"; mapDiv.style.width = body_client_width - common_box.clientWidth + "px"; cli_on.innerHTML = "菜单栏"; mapDiv.innerHTML = "地图"; clearInterval(timer); 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 = "地图"; } } function slideleft() { 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 = "地图"; } } }</script><body> <div> <div id="common_box" style="background-color:yellow; overflow: hidden;"> <div id="cli_on">菜单栏</div> </div> <div id="mapDiv" class ="mydiv" style="background-color:green;">地图</div> </div></body></html>嗯，按照你的帮助修改运行了一下代码，果真左面的菜单栏不会覆盖右面的地图了，但在菜单栏隐藏时，右面的地图会在右面留出15%的空白，没法被自动填充
我写的效果就是需要手动重绘地图的，你需要将
mapDiv.innerHTML = "地图";
这些地方替换成地图的加载代码，这样地图才能自动适应画面变化。
地图这个只在mapDiv里加载，想要完全加载只能靠改变div的宽度来实现了
定位浮动什么的，我会觉得，能少用，就尽量少用，如果用的太多，以后添加功能，更改样式时，都会变得更难。
当然，有时候也不得不用，只要不是把所有的布局，都用float，position这样就好了。
也算是个人习惯。
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1387
52
How to configure content adaptive brightness on Windows 11
Apr 14, 2023 pm 12:37 PM
Adaptive brightness is a feature on Windows 11 computers that adjusts the brightness level of your screen based on the content being displayed or lighting conditions. Since some users are still getting used to Windows 11's new interface, Adaptive Brightness can't be easily found, and some even say the Adaptive Brightness feature is missing on Windows 11, so this tutorial will clear it all up. For example, if you're watching a YouTube video and the video suddenly shows a dark scene, Adaptive Brightness will make the screen brighter and increase the contrast level. This is different from auto-brightness, which is a screen setting that allows your computer, smartphone, or device to adjust brightness levels based on ambient lighting. There is a special one in the front camera
How to use css to realize that a div is missing a corner
Jan 30, 2023 am 09:23 AM
CSS method to realize that a div is missing a corner: 1. Create an HTML sample file and define a div; 2. Set the width and height background color for the div; 3. Add a pseudo class to the div that needs to delete a corner, and set the pseudo class to Use the same color as the background color, then rotate it 45 degrees, and then position it to the corner that needs to be removed.
How to build an adaptive mobile interface with Vue?
Jun 27, 2023 am 11:05 AM
With the popularity of mobile Internet, more and more websites and applications need to consider the mobile experience. As a popular front-end framework, Vue has responsive layout and adaptive capabilities, which can well help us build adaptive mobile interfaces. This article will introduce how to use Vue to build an adaptive mobile interface. Using rem instead of px as the unit and using px as the unit in the mobile interface may result in inconsistent display effects on different devices. Therefore, it is recommended to use rem instead of px as the unit. rem is relative
How to implement adaptive image size using CSS Viewport units vmin and vw
Sep 13, 2023 am 08:18 AM
How to use CSSViewport units vmin and vw to implement adaptive image size. In web design, we often encounter situations where images need to adapt to the screen size. To achieve this goal, CSS provides a powerful unit - the viewport unit. Among them, vmin represents the percentage of the smaller side of the viewport width, and vw represents the percentage of the viewport width. Therefore, we can use these two units to achieve the effect of adaptive image size. The specifics will be introduced below
Implementation of word-marking translation browser script based on ChatGPT API
May 01, 2023 pm 03:28 PM
Preface Recently, there is a browser script based on ChatGPTAPI on GitHub, openai-translator. In a short period of time, the star has reached 12k. In addition to supporting translation, it also supports polishing and summarizing functions. In addition to browser plug-ins, it also uses tauri packaging. If you have a desktop client, aside from the fact that tauri uses the rust part, the browser part is still relatively simple to implement. Today we will implement it manually. The interface provided by openAI, for example, we can copy the following code and initiate a request in the browser console to complete the translation //Example constOPENAI_API_KEY="s
What is the div box model
Oct 09, 2023 pm 05:15 PM
The div box model is a model used for web page layout. It treats elements in a web page as rectangular boxes. This model contains four parts: content area, padding, border and margin. The advantage of the div box model is that it can easily control the layout of the web page and the spacing between elements. By adjusting the size of the content area, inner margin, border and outer margin, various layout effects can be achieved. The box model also provides some Properties and methods can dynamically change the style and behavior of the box through CSS and JavaScript.
What is the difference between iframe and div
Aug 28, 2023 am 11:46 AM
The difference between iframe and div is that iframe is mainly used to introduce external content, which can load content from other websites or divide a web page into multiple areas. Each area has its own independent browsing context, while div is mainly used to divide and organize content. block for layout and style control.
Can vue be adaptive?
Dec 30, 2022 pm 03:25 PM
Vue can achieve self-adaptation. The methods to achieve self-adaptation are: 1. Install the "scale-box" component through the "npm install" or "yarn add" command, and use "scale-box" to achieve adaptive scaling; 2. Through Set the device pixel ratio to achieve self-adaptation; 3. Set the zoom attribute through JS to adjust the zoom ratio to achieve self-adaptation.
