div 適応幅に問題があります。助けてください。 _html/css

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

这是菜单展开的图：搜索

这是菜单隐藏的图：

这是body:

これはスタイルシートです:
#common_box{
width:100%;
left:0;
border: 1px #789 ; を使用してusing use through through through through out through out through out through through through ' s ' ‐ ‐ ‐‐ ‐‐ ‐ border:1px z-index:99
}
#cli_on{
幅:10ピクセル;
フロート:右;
テキスト整列: センター;
フォントサイズ: 24ピクセル; #f00;
}
{
位置: 固定;
左: 0px;
高さ:
高さ: 650px ; これは伸縮メニューの js です。
var common_box.getElementbyid（ "Common_box"）; timer = setInterval(slideright, 10); timer = setInterval(slideleft, 10); if (r_len } r）;このウェブサイトの。

ディスカッションへの返信 (解決策)

ページのレイアウトが間違っています。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の幅を変更する必要があるような気がします。メニューとマップを左右に移動するには、左などを使用します。これらは以前に描画されているため、左または右に移動すると、メニュー自体の一部が覆われるか (この効果は左側のメニューにのみ必要です)、初期ロードのいずれかになります。画面が小さすぎるため、幅の変更に動的に適応できません (マップを左に移動すると、右側の新しい部分が自動的に塗りつぶされません)。
したがって、タイマーイベントで両側の 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 の幅を変更する必要があるような気がします。メニューとマップを左右に移動するには、左などを使用します。これらは以前に描画されているため、左または右に移動すると、メニュー自体の一部が覆われるか (この効果は左側のメニューにのみ必要です)、初期ロードのいずれかになります。画面が小さすぎるため、幅の変更に動的に適応できません (マップを左に移動すると、右側の新しい部分が自動的に塗りつぶされません)。
したがって、タイマーイベントで両側の 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 の幅を変更する必要があるように感じます。メニューとマップを左右に移動するには、左などを使用します。これらは以前に描画されているため、左または右に移動すると、メニュー自体の一部が覆われるか (この効果は左側のメニューにのみ必要です)、初期ロードのいずれかになります。画面が小さすぎるため、幅の変更に動的に適応できません (マップを左に移動すると、右側の新しい部分が自動的に塗りつぶされません)。
したがって、タイマーイベントで両側の div の幅を変更し、幅の変更に適応するように div のコンテンツを補充することをお勧めします。

リーリー

そうですね、あなたの助けに従ってコードを修正して実行しました。確かに、左側のメニューバーは右側のマップをカバーしませんが、メニューバーが非表示になると、右側のマップは15％空白のままになります。右側は自動的に塗りつぶすことはできません

私が作成したエフェクトでは、地図を自動的に適応させるために、
mapDiv.innerHTML = "map" を手動で再描画する必要があります。画面が切り替わります。

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;を使用するのは悪いですか?

<!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 = "map"; をマップの読み込みコードに置き換える必要があります。、マップが画面の変化に自動的に適応できるようにします。

マップはmapDivにのみロードされます。完全にロードしたい場合は、divの幅を変更するだけです。
位置決めやフローティングのものはできるだけ使用しないほうがよいと思います。多すぎると、後から機能を追加したり、スタイルを変更したりするときに困難になります。
もちろん、すべてのレイアウトで float とposition を使用しない限り、それを使用する必要がある場合もあります。

それは個人的な習慣でもあります。