div/css 如何实现左右分栏,左侧菜单能展开/隐藏

发布网友发布时间：2022-04-30 23:59

共5个回答

热心网友时间：2022-04-20 20:12

兄弟,div实现不了100%高度,最多只能自适应高度.你还是在iframe上定高度吧
=============================================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>左右分栏</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta content="MSHTML 6.00.2900.2180" name="GENERATOR">

<script language="JavaScript">
//左右
function switchSysBarl(){
var imgsrc;
imgsrc=document.all("makeleft").src;
document.all("makeleft").src="img/menu_open.gif";
document.all("makeleft").title="显示左边的菜单";
parent.document.all("bbs_left").style.display="none";
}
else{
document.all("makeleft").src="img/menu_close.gif";
document.all("makeleft").title="隐藏左边的菜单";
parent.document.all("bbs_left").style.display="";
}
}
</script>

<link rel="shortcut icon" href="favicon.ico">
</head>
<body bottommargin="0" leftmargin="0" topmargin="0" scroll="no" rightmargin="0">
<div style="z-index: 2; visibility: inherit; width: auto; height: auto; float: left;"
frameborder="0" scrolling="no" target="main">
<iframe name="bbs_left" style="z-index: 2; visibility: inherit; width: 180px; height: 100%"
src="left.htm" frameborder="0" scrolling="no" target="main"></iframe>
</div>
<div style="background-color: #005fbd; width: 10px; float: left; height: 800px; cursor: hand;
padding: 300px 0px 0px 0px;" id="menuSwitch" onclick="switchSysBarl()">
<img src="img/menu_close.gif" name="makeleft" width="10" height="10" border="0" id="makeleft" /></div>
<div style="float: left; width: auto;">
<iframe name="bbs_main" style="z-index: 1; visibility: inherit; width: 100%; height: 100%" src="right.htm"
frameborder="0" scrolling="yes"></iframe>
</div>
</body>
</html>

热心网友时间：2022-04-20 21:30

用浮动，关于隐藏就必须的用js特效

热心网友时间：2022-04-20 23:04

这个最好用 table 或者给 div 用table的格式 div 是不能自动扩充的。
例table：
《table》
《tr》
《td》

《div》第一个《/div》

《/td》
《td》

《div》第二个《/div》
《/td》
《/tr》

《/table》
这样把第一个 td 隐藏了，第二个td 会自动扩充。

div 的
css
<style>
html, body{
margin: 0;
height: 100%;
}
.main{
background:#ccc;
width: 100%;
height: 100%;
margin: auto;

min-width: 1000px;
}
.top_nav{
background:#ff0;
width: 100%;
height: 5%;
min-height: 30px;
}
.content{
background:blue;
width: 100%;
height: 90%;
display: table;
}
.toolbar{
background:red;
width: 10%;
height: 100%;
display: table-cell;
}
.main_container{

display: table-cell;
width: 90%;
height: 100%;
}
.ddd{
float: right;
height: 100%;
width: 220px;

}
.foot{
background:#900;
width: 100%;
height: 5%;
display: table;
}
</style>
html：
<div class="main">
<div class="top_nav">
</div>
<div class="content">
<div class="toolbar" > // 把他隐藏后边的会自动扩充
<div class="ddd"></div>
</div>

<div class="main_container"></div>
</div>
<div class="foot"></div>
</div>

热心网友时间：2022-04-21 00:56

你可以尝试一下display:flex

热心网友时间：2022-04-21 03:04

jquery可以写的，奈何这里无法加入文件，我没法给你展示实例