CSS layout?? Left fixed width, right adaptive width and equal height layout_html/css

CSS layout?? Left fixed width, right adaptive width and equal height layout_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:34:23

Original

1038 people have browsed it

Method 1:

Not much else to say, just upload the code directly, or refer to the online DEMO. All the DEMOs below have HTML and CSS codes. Interested students can read it by themselves. .

HTML Markup

		<div id="container">			<div id="wrapper">				<div id="sidebar">Left Sidebar</div>				<div id="main">Main Content</div>			</div>		</div>

Copy after login

CSS Code

		<style type="text/css">			* { margin: 0; padding: 0; }			html { height: auto; }			body { margin: 0; padding: 0; }			#container { background: #ffe3a6; }			#wrapper { display: inline-block; border-left: 200px solid #d4c376;/*==此值等于左边栏的宽度值==*/ position: relative; vertical-align: bottom; }			#sidebar { float: left; width: 200px; margin-left: -200px;/*==此值等于左边栏的宽度值==*/ position: relative; }			#main { float: left; }				#maing,			#sidebar{ min-height: 200px; height: auto !important; height: 200px; }		</style>

Copy after login

View the online DEMO.

Method 2

HTML Markup

		<div id="container">			<div id="left" class="aside">Left Sidebar</div>			<div id="content" class="section">Main Content</div>		</div>

Copy after login

CSS Code

		<style type="text/css">			 	*{margin: 0;padding: 0;}			 	#container { overflow: hidden; }			 	#left { background: #ccc; float: left; width: 200px; margin-bottom: -99999px; padding-bottom: 99999px; }			 	#content { background: #eee; margin-left: 200px;/*==此值等于左边栏的宽度值==*/ margin-bottom: -99999px; padding-bottom: 99999px; }			 	#left,			 	#content { min-height: 200px; height: auto !important; height: 200px; }		</style>

Copy after login

View the online DEMO.

Method 3:

HTML Markup

		<div id="container">			<div id="content">Main Content</div>			<div id="sidebar">Left Sidebar</div>		</div>

Copy after login

CSS Code

			*{margin: 0;padding: 0;}		 	#container{		 		background-color:#0ff;		 		overflow:hidden;		 		padding-left:220px; /* 宽度大小等与边栏宽度大小*/		 	}		 	* html #container{		 		height:1%; /* So IE plays nice */		 	}		 	#content{		 		background-color:#0ff;		 		width:100%;		 		border-left:220px solid #f00;/* 宽度大小等与边栏宽度大小*/		 		margin-left:-220px;/* 宽度大小等与边栏宽度大小*/		 		float:right;		 	}		 	#sidebar{		 		background-color:#f00;		 		width:220px;		 		float:right;		 		margin-left:-220px;/* 宽度大小等与边栏宽度大小*/		 	}		 	#content,		 	#sidebar {		 		min-height: 200px;		 		height: auto !important;		 		height: 200px;		 	}

Copy after login

View the online DEMO effect.

Method 4:

HTML Markup

		<div id="container2">			<div id="container1">					<div id="col1">Left Sidebar</div>					<div id="col2">Main Content</div>		 	</div>		</div>

Copy after login

CSS Code

		*{padding: 0;margin:0;}		#container2 {		  	float: left;		  	width: 100%;		  	background: orange;		  	position: relative;		  	overflow: hidden;		  }		  #container1 {		  	float: left;		  	width: 100%;		  	background: green;		  	position: relative;		  	left: 220px;/* 宽度大小等与边栏宽度大小*/		  }     		  #col2 {		  	position: relative;		  	margin-right: 220px;/* 宽度大小等与边栏宽度大小*/		  }     		  #col1 {		  	width: 220px;		  	float: left;		  	position: relative;		  	margin-left: -220px;/* 宽度大小等与边栏宽度大小*/		  }	   			#col1,#col2 {				min-height: 200px;				height: auto !important;				height: 200px;			}

Copy after login

View the online DEMO.

Method 5:

HTML Markup

		<div id="container1">			<div id="container">				<div id="left">Left Sidebar</div>				<div id="content">					<div id="contentInner">Main Content</div>				</div>			</div>		</div>

Copy after login

CSS Code

		*{padding: 0;margin: 0;}		#container1 {			float: left;			width: 100%;			overflow: hidden;			position: relative;			background-color: #dbddbb;		}		#container {			background-color: orange;			width: 100%;			float: left;			position: relative;			left: 220px;/* 宽度大小等与边栏宽度大小*/		}		#left {						float: left;			margin-right: -100%;			margin-left: -220px;/* 宽度大小等与边栏宽度大小*/			width: 220px;		}		#content {			float: left;			width: 100%;			margin-left: -220px;/* 宽度大小等与边栏宽度大小*/		}		#contentInner {						margin-left: 220px;/* 宽度大小等与边栏宽度大小*/			overflow: hidden;		}				#left,		#content {				min-height: 200px;				height: auto !important;				height: 200px;		}

Copy after login

View the online DEMO.

In response to the above interview question requirements, I used a total of five different methods to implement them. After testing, they can all run in various browsers. Finally, I have a few points to make in particular:

All of the above In the DEMO, pay attention to the directional coordination and the values should be unified. If you want to try to use the width value required for your own layout, please modify it according to the relevant code links; In all the above DEMOs, the spacing between them is not set. If You want to have a certain spacing between them. There are two ways to achieve this. One is to modify the relevant parameters based on the above DEMO. The other is to add the "div" tag to the corresponding one and set its "padding". value, this is safer and will not break your layout because we have a column here that uses adaptive width. In some browsers, when the browser screen is stretched to a certain size, it gives us the feeling that it is adaptive. The content of the width column seems to be hidden. In your actual project, it is best to add a "min-width" setting to "body".