A customer said that they want to use DIV CSS layout with two columns. The width of the navigation column is uncertain (determined by the TreeView control inside), and the width of the content column parallel to it must be adaptive. That is,
Content column width navigation column width == fixed value (total width)
However, content column width and navigation column width are both There is no fixed value, and most of the adaptive column width codes on the Internet are based on a fixed value
Helpless, I am a Winform person who knows very little about CSS DIV, so I can only pass JavaScript is used to complete it, and the effect is OK. IE7.0 and Firefox2.0 tests pass
In the code below, the width of the navigation column is not defined, and its actual width depends on the content inside. Confirmed:
Rendering, with the navigation bar on the right (not used to it, haha, the customer is Arabic):
< html >
< head >
< title > title >
< script type ="text/javascript" >
window.onload = function (){
document.getElementById( " left " ).style.width = ( 773 - (document.getElementById( " right " ).clientWidth)) " px " ;
}
script >
< style type ="text/css" >
body
{
background : #999 ;
text-align : center ;
color : #333 ;
font-family : Verdana, Arial, Helvetica, sans-serif ;
margin : 0px ;
}
#header
{
margin-right : auto ;
margin-left : auto ;
padding : 0px ;
width : 776px ;
background : #EEE ;
height : 60px ;
text-align : left ;
}
#contain
{
margin-left : auto ;
margin-right : auto ;
width : 776px ;
}
#mainbg
{
float : left ;
padding : 0px ;
width : 776px ;
background : #60A179 ;
}
#right
{
float : right ;
margin : 2px 0px 2px 0px ;
padding : 0px ;
background : #ccd2de ;
min-height : 300px ;
_height : 300px ;
text-align : left ;
}
#left
{
float : right ;
margin : 2px 2px 0px 0px ;
padding : 0px ;
background : #F2F3F7 ;
width : 574px ;
min-height : 600px ;
_height : 600px ;
text-align : left ;
}
#footer
{
clear : both ;
margin-right : auto ;
margin-left : auto ;
padding : 0px ;
width : 776px ;
background : #EEE ;
height : 60px ;
}
.text
{
margin : 0px ;
padding : 20px ;
}
style >
head >
< body >
< div id ="header" >
header with height of 60px
div >
< div id ="contain" >
< div id ="mainbg" >
< div id ="right" >
< div class ="text" >
< p >
put your tree here p >
div >
div >
< div id ="left" >
< div class ="text" >
the width of this div is dependent on the right div
left < br />
left < br />
left < br />
left < br />
div >
div >
div >
div >
In addition, the original code before modification is my collection. It seems that there are many copies online, and I don’t know where the original source is. Feel free to do it It has been expanded and modified, but it should still be noted. If you are the original author, please contact me blodfox777@hotmal.com