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这样就好了。
也算是个人习惯。
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment configurer la luminosité adaptative du contenu sur Windows 11
Apr 14, 2023 pm 12:37 PM
La luminosité adaptative est une fonctionnalité sur les ordinateurs Windows 11 qui ajuste le niveau de luminosité de l'écran en fonction du contenu affiché ou des conditions d'éclairage. Étant donné que certains utilisateurs sont encore en train de s'habituer à la nouvelle interface de Windows 11, la luminosité adaptative n'est pas facile à trouver, et certains disent même que la fonctionnalité de luminosité adaptative est manquante sur Windows 11, ce didacticiel va donc tout clarifier. Par exemple, si vous regardez une vidéo YouTube et que la vidéo montre soudainement une scène sombre, la luminosité adaptative rendra l'écran plus lumineux et augmentera le niveau de contraste. Ceci est différent de la luminosité automatique, qui est un paramètre d'écran qui permet à votre ordinateur, smartphone ou appareil d'ajuster les niveaux de luminosité en fonction de l'éclairage ambiant. Il y en a un spécial dans la caméra frontale
Comment utiliser CSS pour se rendre compte qu'il manque un coin à un div
Jan 30, 2023 am 09:23 AM
Méthode CSS pour réaliser qu'il manque un coin à un div : 1. Créez un exemple de fichier HTML et définissez un div ; 2. Définissez la couleur d'arrière-plan de la largeur et de la hauteur du div 3. Ajoutez une pseudo-classe au div qui doit être supprimé ; un coin et définissez la pseudo-classe sur Utiliser la même couleur que la couleur d'arrière-plan, puis faites-la pivoter de 45 degrés, puis positionnez-la sur le coin qui doit être supprimé.
Comment créer une interface mobile adaptative avec Vue ?
Jun 27, 2023 am 11:05 AM
Avec la popularité de l’Internet mobile, de plus en plus de sites Web et d’applications doivent prendre en compte l’expérience mobile. En tant que framework frontal populaire, Vue possède une mise en page réactive et des capacités adaptatives, qui peuvent très bien nous aider à créer des interfaces mobiles adaptatives. Cet article expliquera comment utiliser Vue pour créer une interface mobile adaptative. L'utilisation de rem au lieu de px comme unité et l'utilisation de px comme unité dans l'interface mobile peuvent entraîner des effets d'affichage incohérents sur différents appareils. Par conséquent, il est recommandé d’utiliser rem au lieu de px comme unité. rem est relatif
Comment implémenter une taille d'image adaptative à l'aide des unités CSS Viewport vmin et vw
Sep 13, 2023 am 08:18 AM
Comment utiliser les unités CSSViewport vmin et vw pour implémenter une taille d'image adaptative. Dans la conception Web, nous rencontrons souvent des situations où les images doivent s'adapter à la taille de l'écran. Pour atteindre cet objectif, CSS fournit une unité puissante : l'unité de fenêtre d'affichage. Parmi eux, vmin représente le pourcentage du plus petit côté de la largeur de la fenêtre et vw représente le pourcentage de la largeur de la fenêtre. Par conséquent, nous pouvons utiliser ces deux unités pour obtenir l’effet de taille d’image adaptative. Les détails seront présentés ci-dessous
Implémentation d'un script de navigateur de traduction de marquage de mots basé sur l'API ChatGPT
May 01, 2023 pm 03:28 PM
Préface Récemment, il existe un script de navigateur basé sur ChatGPTAPI sur GitHub, openai-translator. En peu de temps, l'étoile a atteint 12k. En plus de prendre en charge la traduction, elle prend également en charge les fonctions de polissage et de synthèse. -ins, il utilise également le packaging tauri. Si vous avez un client de bureau, outre le fait que tauri utilise la partie rust, la partie navigateur est encore relativement simple à implémenter. Aujourd'hui, nous allons l'implémenter manuellement. L'interface fournie par openAI, par exemple, nous pouvons copier le code suivant et lancer une requête dans la console du navigateur pour terminer la traduction //Exemple constOPENAI_API_KEY="s
Quel est le modèle de boîte de division ?
Oct 09, 2023 pm 05:15 PM
Le modèle de boîte div est un modèle utilisé pour la mise en page d'une page Web. Il traite les éléments d'une page Web comme des boîtes rectangulaires. Ce modèle contient quatre parties : la zone de contenu, le remplissage, la bordure et la marge. L'avantage du modèle de boîte div est qu'il peut facilement contrôler la mise en page de la page Web et l'espacement entre les éléments. En ajustant la taille de la zone de contenu, la marge intérieure, la bordure et la marge extérieure, divers effets de mise en page peuvent être obtenus. Le modèle de boîte fournit également certaines propriétés et méthodes permettant de modifier dynamiquement le style et le comportement de la boîte via CSS et JavaScript.
Quelle est la différence entre iframe et div
Aug 28, 2023 am 11:46 AM
La différence entre iframe et div est que iframe est principalement utilisé pour introduire du contenu externe, qui peut charger du contenu provenant d'autres sites Web ou diviser une page Web en plusieurs zones. Chaque zone a son propre contexte de navigation indépendant, tandis que div est principalement utilisé pour diviser et div. organiser le contenu. bloc pour la mise en page et le contrôle du style.
La vue peut-elle être adaptative ?
Dec 30, 2022 pm 03:25 PM
Vue peut réaliser l'auto-adaptation. Les méthodes pour réaliser l'auto-adaptation sont les suivantes : 1. Installez le composant "scale-box" via la commande "npm install" ou "yarn add", et utilisez "scale-box" pour obtenir une mise à l'échelle adaptative. ; 2. En définissant le rapport de pixels de l'appareil pour obtenir une auto-adaptation ; 3. Définissez l'attribut de zoom via JS pour ajuster le rapport de zoom afin d'obtenir une auto-adaptation.
