变宽度布局

1-2-1 等比例变宽



总宽度设置 width: 85%; min-width: 650px; （关于IE6的min-width支持，可用）
content 设置 width: 66%; float: left;
side 设置 width: 33%; float: right;
增加clear 空div

HTML 结构：
  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4.     	<title>1-2-1 等比例变宽</title>
  5.         <meta charset="utf-8" />
  6.     </head>
  7.  
  8.     <body>
  9.     	<div id="header">
  10.             <p>Header</p>
  11.         </div>
  12.  
  13.         <div id="container">
  14.             <div id="content">
  15.                 <h2>Content Header</h2>
  16.                 <div class="main">
  17.                     <p>
  18.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
  19.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  20.                     </p>
  21.                 </div>
  22.             </div>
  23.             <div id="side">
  24.                 <h2>Side Header</h2>
  25.                 <div class="main">
  26.                     <p>
  27.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
  28.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  29.                     </p>
  30.                 </div>
  31.             </div>
  32.             <div id="clear"></div>
  33.         </div>
  34.  
  35.         <div id="footer">
  36. 			<p>footer footer footer footer footer footer footer footer</p>
  37.         </div>
  38.     </body>
  39. </html>

CSS：

  1. 			body{
  2. 				font: 13px/1.5 Arial;
  3. 				margin: 0;
  4. 				padding: 0;
  5. 			}
  6. 			#header, #container, #footer{
  7. 				width: 85%;
  8. 				margin: 10px auto;
  9. 				min-width: 650px;
  10. 			}
  11. 			#header{
  12. 				border: 1px solid black;
  13. 				background-color: #666;
  14. 			}
  15. 			#content{
  16. 				border: 1px solid black;
  17. 				background-color: #999;
  18. 				width: 66%;
  19. 				float: left;
  20. 			}
  21. 			#side{
  22. 				border: 1px solid black;
  23. 				background-color: #999;
  24. 				width: 33%;
  25. 				float: right;
  26. 			}
  27. 			#clear{
  28. 				clear: both;
  29. 			}
  30.  
  31. 			#footer{
  32. 				border: 1px solid black;
  33. 				background-color: #CCC;
  34. 			}

1-2-1 单列变宽


side 固定宽度，content 随窗体宽度变化
side设置 width: 200px; float: left;
在content外层增加 contentWrap，contentWrap 设置为 width: 100%; margin-right: -220px; float: right;
而content 设置为 margin-right: 220px;
这样就利用了wrap实现了content的宽度为 100%-320px

HTML 结构：
  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4.     	<title>1-2-1 单列变宽</title>
  5.         <meta charset="utf-8" />
  6.     </head>
  7.  
  8.     <body>
  9.     	<div id="header">
  10.             <p>Header</p>
  11.         </div>
  12.  
  13.         <div id="container">
  14.             <div id="contentWrap">
  15.                 <div id="content">
  16.                     <h2>Content Header</h2>
  17.                     <div class="main">
  18.                         <p>
  19.                             文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
  20.                             文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  21.                         </p>
  22.                     </div>
  23.                 </div>
  24.             </div>
  25.  
  26.             <div id="side">
  27.                 <h2>Side Header</h2>
  28.                 <div class="main">
  29.                     <p>
  30.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
  31.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  32.                     </p>
  33.                 </div>
  34.             </div>
  35.             <div id="clear"></div>
  36.         </div>
  37.  
  38.         <div id="footer">
  39. 			<p>footer footer footer footer footer footer footer footer</p>
  40.         </div>
  41.     </body>
  42. </html>

CSS：

  1. 			body{
  2. 				font: 13px/1.5 Arial;
  3. 				margin: 0;
  4. 				padding: 0;
  5. 			}
  6. 			#header, #container, #footer{
  7. 				width: 85%;
  8. 				margin: 10px auto;
  9. 				min-width: 700px;
  10. 			}
  11. 			#header{
  12. 				border: 1px solid black;
  13. 				background-color: #666;
  14. 			}
  15. 			#contentWrap{
  16. 				width: 100%;
  17. 				margin-right: -220px;
  18. 				float: right;
  19. 			}
  20. 			#content{
  21. 				border: 1px solid black;
  22. 				background-color: #999;
  23. 				margin-right: 220px;
  24. 			}
  25. 			#side{
  26. 				border: 1px solid black;
  27. 				background-color: #999;
  28. 				width: 200px;
  29. 				float: left;
  30. 			}
  31. 			#clear{
  32. 				clear: both;
  33. 			}
  34. 			#footer{
  35. 				border: 1px solid black;
  36. 				background-color: #CCC;
  37. 			}

1-3-1 单側列宽固定




nav 固定宽度 width: 200px; float: left;
在content 和 side 外层增加两层 div：outerWrap 和 innerWrap 
outerWrap 设置为 width: 100%; margin-right: -210px; float: right;
innerWrap 设置为 margin-right: 210px;
然后content 和 side 相当于在 innerWrap 内部等比例变宽

HTML结构：
  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4.     	<title>1-3-1 单側列宽固定</title>
  5.         <meta charset="utf-8" />
  6.     </head>
  7.  
  8.     <body>
  9.     	<div id="header">
  10.             <p>Header</p>
  11.         </div>
  12.  
  13.         <div id="container">
  14.             <div id="nav">
  15.                 <h2>Nav Header</h2>
  16.                 <div class="main">
  17.                     <p>
  18.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
  19.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  20.                     </p>
  21.                 </div>
  22.             </div>
  23.  
  24.             <div id="outerWrap">
  25.             	<div id="innerWrap">
  26.                     <div id="content">
  27.                         <h2>Content Header</h2>
  28.                         <div class="main">
  29.                             <p>
  30.                                 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
  31.                                 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  32.                             </p>
  33.                         </div>
  34.                     </div>
  35.                     <div id="side">
  36.                         <h2>Side Header</h2>
  37.                         <div class="main">
  38.                             <p>
  39.                                 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
  40.                                 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  41.                             </p>
  42.                         </div>
  43.                     </div>
  44.                 </div>
  45.             </div>
  46.             <div id="clear"></div>
  47.         </div>
  48.  
  49.         <div id="footer">
  50. 			<p>footer footer footer footer footer footer footer footer</p>
  51.         </div>
  52.     </body>
  53. </html>

CSS：

  1. 			body{
  2. 				font: 13px/1.5 Arial;
  3. 				margin: 0;
  4. 				padding: 0;
  5. 			}
  6. 			#header, #container, #footer{
  7. 				width: 85%;
  8. 				margin: 10px auto;
  9. 				min-width: 800px;
  10. 			}
  11. 			#header{
  12. 				border: 1px solid black;
  13. 				background-color: #666;
  14. 			}
  15. 			#nav{
  16. 				border: 1px solid black;
  17. 				background-color: #999;
  18. 				width: 200px;
  19. 				float: left;
  20. 			}
  21. 			#outerWrap{
  22. 				width: 100%;
  23. 				margin-right: -210px;
  24. 				float: right;
  25. 			}
  26. 			#innerWrap{
  27. 				margin-right: 210px;
  28. 			}
  29. 			#content{
  30. 				border: 1px solid black;
  31. 				background-color: #999;
  32. 				width: 66%;
  33. 				float: left;
  34. 			}
  35. 			#side{
  36. 				border: 1px solid black;
  37. 				background-color: #999;
  38. 				width: 33%;
  39. 				float: right;
  40. 			}
  41. 			#clear{
  42. 				clear: both;
  43. 			}
  44.  
  45. 			#footer{
  46. 				border: 1px solid black;
  47. 				background-color: #CCC;
  48. 			}

1-3-1 中间列宽固定


content 宽度固定
在 nav 和 side 分别加上外层 div ：navWrap 和 sideWrap
navWrap 设置为 width: 50%; margin-left: -210px; float: left;
nav 设置为 margin-left: 210px;
同理，sideWrap 和 side 也做类似的设置

HTML结构：
  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4.     	<title>1-3-1 中间列宽固定</title>
  5.         <meta charset="utf-8" />
  6.     </head>
  7.  
  8.     <body>
  9.     	<div id="header">
  10.             <p>Header</p>
  11.         </div>
  12.  
  13.         <div id="container">
  14.             <div id="navWrap">
  15.                 <div id="nav">
  16.                     <h2>Nav Header</h2>
  17.                     <div class="main">
  18.                         <p>
  19.                             文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
  20.                             文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  21.                         </p>
  22.                     </div>
  23.                 </div>
  24.             </div>
  25.  
  26.             <div id="content">
  27.                 <h2>Content Header</h2>
  28.                 <div class="main">
  29.                     <p>
  30.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
  31.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  32.                     </p>
  33.                 </div>
  34.             </div>
  35.  
  36.             <div id="sideWrap">
  37.                 <div id="side">
  38.                     <h2>Side Header</h2>
  39.                     <div class="main">
  40.                         <p>
  41.                             文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
  42.                             文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  43.                         </p>
  44.                     </div>
  45.                 </div>
  46.             </div>
  47.  
  48.             <div id="clear"></div>
  49.         </div>
  50.  
  51.         <div id="footer">
  52. 			<p>footer footer footer footer footer footer footer footer</p>
  53.         </div>
  54.     </body>
  55. </html>

CSS：

  1. 			body{
  2. 				font: 13px/1.5 Arial;
  3. 				margin: 0;
  4. 				padding: 0;
  5. 			}
  6. 			#header, #container, #footer{
  7. 				width: 85%;
  8. 				margin: 10px auto;
  9. 				min-width: 700px;
  10. 			}
  11. 			#header{
  12. 				border: 1px solid black;
  13. 				background-color: #666;
  14. 			}
  15. 			#navWrap{
  16. 				width: 50%;
  17. 				margin-left: -210px;
  18. 				float: left;
  19. 			}
  20. 			#nav{
  21. 				border: 1px solid black;
  22. 				background-color: #999;
  23. 				margin-left: 210px;
  24. 			}
  25. 			#content{
  26. 				border: 1px solid black;
  27. 				background-color: #999;
  28. 				width: 400px;
  29. 				float: left;
  30. 				margin-left: 10px;
  31. 			}
  32. 			#sideWrap{
  33. 				width: 49.9%;
  34. 				margin-right: -210px;
  35. 				float: right;
  36. 			}
  37. 			#side{
  38. 				border: 1px solid black;
  39. 				background-color: #999;
  40. 				margin-right: 210px;
  41. 			}
  42. 			#clear{
  43. 				clear: both;
  44. 			}
  45.  
  46. 			#footer{
  47. 				border: 1px solid black;
  48. 				background-color: #CCC;
  49. 			}

1-3-1 双側列宽固定


nav 和 side 宽度固定
nav 设置为 width: 200px; float: left;
在 content 和 side 外层加上 outerWrap 和 innerWrap ，这样就相当于单列固定宽度的设置，nav 固定宽度
然后再在 content 外层加上 contentWrap ，也相当于在 innerWrap 内部单列固定宽度设置，side 固定宽度

HTML 结构：
  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4.     	<title>1-3-1 双側列宽固定</title>
  5.         <meta charset="utf-8" />
  6.     </head>
  7.  
  8.     <body>
  9.     	<div id="header">
  10.             <p>Header</p>
  11.         </div>
  12.  
  13.         <div id="container">
  14.             <div id="nav">
  15.                 <h2>Nav Header</h2>
  16.                 <div class="main">
  17.                     <p>
  18.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
  19.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  20.                     </p>
  21.                 </div>
  22.             </div>
  23.  
  24.             <div id="outerWrap">
  25.             	<div id="innerWrap">
  26.                     <div id="contentWrap">
  27.                         <div id="content">
  28.                             <h2>Content Header</h2>
  29.                             <div class="main">
  30.                                 <p>
  31.                                     文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
  32.                                     文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  33.                                 </p>
  34.                             </div>
  35.                         </div>
  36.                     </div>
  37.  
  38.                     <div id="side">
  39.                         <h2>Side Header</h2>
  40.                         <div class="main">
  41.                             <p>
  42.                                 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
  43.                                 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  44.                             </p>
  45.                         </div>
  46.                     </div>
  47.                 </div>
  48.             </div>
  49.             <div id="clear"></div>
  50.         </div>
  51.  
  52.         <div id="footer">
  53. 			<p>footer footer footer footer footer footer footer footer</p>
  54.         </div>
  55.     </body>
  56. </html>

CSS：

  1. 			body{
  2. 				font: 13px/1.5 Arial;
  3. 				margin: 0;
  4. 				padding: 0;
  5. 			}
  6. 			#header, #container, #footer{
  7. 				width: 85%;
  8. 				margin: 10px auto;
  9. 				min-width: 800px;
  10. 			}
  11. 			#header{
  12. 				border: 1px solid black;
  13. 				background-color: #666;
  14. 			}
  15. 			#nav{
  16. 				border: 1px solid black;
  17. 				background-color: #999;
  18. 				width: 200px;
  19. 				float: left;
  20. 			}
  21. 			#outerWrap{
  22. 				width: 100%;
  23. 				margin-right: -210px;
  24. 				float: right;
  25. 			}
  26. 			#innerWrap{
  27. 				margin-right: 210px;
  28. 			}
  29. 			#contentWrap{
  30. 				width: 100%;
  31. 				margin-left: -110px;
  32. 				float: left;
  33. 			}
  34. 			#content{
  35. 				border: 1px solid black;
  36. 				background-color: #999;
  37. 				margin-left: 110px;
  38. 			}
  39. 			#side{
  40. 				border: 1px solid black;
  41. 				background-color: #999;
  42. 				width: 100px;
  43. 				float: right;
  44. 			}
  45. 			#clear{
  46. 				clear: both;
  47. 			}
  48.  
  49. 			#footer{
  50. 				border: 1px solid black;
  51. 				background-color: #CCC;
  52. 			}

1-3-1 中列和側列宽固定

nav 和 content 固定宽度，side 外层加上 sideWrap ，相当于1-2-1单列变宽

HTML 结构：
  1. <!DOCTYPE HTML>
  2. <html>
  3. 	<head>
  4.     	<title>1-3-1 中列和側列宽固定</title>
  5.         <meta charset="utf-8" />
  6.     </head>
  7.  
  8.     <body>
  9.     	<div id="header">
  10.             <p>Header</p>
  11.         </div>
  12.  
  13.         <div id="container">
  14.  
  15.             <div id="nav">
  16.                 <h2>Nav Header</h2>
  17.                 <div class="main">
  18.                     <p>
  19.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
  20.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  21.                     </p>
  22.                 </div>
  23.             </div>
  24.  
  25.             <div id="content">
  26.                 <h2>Content Header</h2>
  27.                 <div class="main">
  28.                     <p>
  29.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
  30.                         文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  31.                     </p>
  32.                 </div>
  33.             </div>
  34.  
  35.             <div id="sideWrap">
  36.                 <div id="side">
  37.                     <h2>Side Header</h2>
  38.                     <div class="main">
  39.                         <p>
  40.                             文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本<br>
  41.                             文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
  42.                         </p>
  43.                     </div>
  44.                 </div>
  45.             </div>
  46.             <div id="clear"></div>
  47.         </div>
  48.  
  49.         <div id="footer">
  50. 			<p>footer footer footer footer footer footer footer footer</p>
  51.         </div>
  52.     </body>
  53. </html>

CSS：

  1. 			body{
  2. 				font: 13px/1.5 Arial;
  3. 				margin: 0;
  4. 				padding: 0;
  5. 			}
  6. 			#header, #container, #footer{
  7. 				width: 85%;
  8. 				margin: 10px auto;
  9. 				min-width: 800px;
  10. 			}
  11. 			#header{
  12. 				border: 1px solid black;
  13. 				background-color: #666;
  14. 			}
  15. 			#nav{
  16. 				border: 1px solid black;
  17. 				background-color: #999;
  18. 				width: 200px;
  19. 				float: left;
  20. 			}
  21. 			#content{
  22. 				border: 1px solid black;
  23. 				background-color: #999;
  24. 				margin-left: 10px;
  25. 				width: 400px;
  26. 				float: left;
  27. 			}
  28. 			#sideWrap{
  29. 				width: 100%;
  30. 				margin-right: -620px;
  31. 				float: right;
  32. 			}
  33. 			#side{
  34. 				border: 1px solid black;
  35. 				background-color: #999;
  36. 				margin-right: 620px;
  37. 			}
  38. 			#clear{
  39. 				clear: both;
  40. 			}
  41.  
  42. 			#footer{
  43. 				border: 1px solid black;
  44. 				background-color: #CCC;
  45. 			}








CSS 布局总结——变宽度布局的更多相关文章

  1. CSS设置表格TD宽度布局

    使用表格布局时,对单元格的宽度控制很伤脑筋,所以查阅资料整理如下: 一.表格布局table-layout 语法: table-layout : auto | fixed 取值: auto  : 大多数 ...

  2. css两列自适应宽度布局（左定宽，右自适应）

    1.利用BFC: <div id="root"> <div class="left">左</div> <div cla ...

  3. RelativeLayout中的格局，自适应宽度布局

    RelativeLayout中的布局,自适应宽度布局 该图片中为android布局:总布局为 RelativeLayoutAtLeft 为居左 <TextView android:backgro ...

  4. css判断不同分辨率显示不同宽度布局实现自适应宽度

    一.CSS DIV网页布局中当分辨率小于等于1024px(像素)时,DIV布局对象显示1000px宽度,当分辨率大于1024px时候显示1200px宽度等需求.使用CSS实现改变浏览器显示宽度从而实现 ...

  5. web前端学习笔记(CSS变化宽度布局)

    一.“1-2-1”单列变宽布局: 对于变宽度的布局,首先要使内容的整体宽度随浏览器窗口宽度的变化而变化.因此中间的container容器中的左右两列的总宽度也会变化,这样就会产生不同的情况.这两列是按 ...

  6. CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

    CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8.将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS ...

  7. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  8. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  9. CSS布局——左定宽度右自适应宽度并且等高布局

    方法一: 别的不多说,直接上代码,或者参考在线DEMO,下面所有的DEMO都有HTML和CSS代码,感兴趣的同学自己慢慢看吧. HTML Markup <div id="contain ...

随机推荐

  1. https实现安全传输的流程

    HTTPS简介 HTTPS其实是有两部分组成:HTTP + SSL / TLS,也就是在HTTP上又加了一层处理加密信息的模块.服务端和客户端的信息传输都会通过TLS进行加密,所以传输的数据都是加密后 ...

  2. Oracle RAC环境下如何更新patch(Rolling Patch)

    Oracle RAC数据库环境与单实例数据库环境有很多共性,也有很多异性.对于数据库补丁的更新同样如此,都可以通过opatch来完成.但RAC环境的补丁更新有几种不同的更新方式,甚至于可以在零停机的情 ...

  3. [转]LINK:fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏

    LINK:fatal error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 原文地址:http://yacare.iteye.com/blog/2010049 很多伙伴在更新VS ...

  4. HDU1402 A * B Problem Plus FFT

    分析:网上别家的代码都分析的很好,我只是给我自己贴个代码,我是kuangbin的搬运工 一点想法:其实FFT就是快速求卷积罢了,当小数据的时候我们完全可以用母函数来做,比如那种硬币问题 FFT只是用来 ...

  5. 【剑指offer 面试题21】包含min函数的栈

    思路: 通过增加一个辅助栈保存每个状态对应的最小值.栈实现的不完整,应该还包含empty()等常规函数. #include <iostream> #include <stack> ...

  6. 如何在 Windows Azure 的虚拟机 ubuntu 上面安装和配置 openVPN（二）

    第二步:登录到虚拟机 一旦创建好虚拟机后,默认azure会打开TCP 22端口,即SSH的端口.所以,我们可以通过远程连接,访问和管理该虚拟机. 首先,下载一个PuTTY软件.该软件很简单,就一个可执 ...

  7. Python 变量 对象 引用

    1.变量 变量第一次赋值时被创建,变量在使用前必须赋值 变量本身没有类型,变量类型为它引用的对象类型: 变量在使用时被替换成它引用的对象 2.对象 对象本身具有计数和类型,变量引用对象,当对象的引用变 ...

  8. (四面体)CCPC网络赛 HDU5839 Special Tetrahedron

    CCPC网络赛 HDU5839 Special Tetrahedron 题意:n个点,选四个出来组成四面体,要符合四面体至少四条边相等,若四条边相等则剩下两条边不相邻,求个数 思路:枚举四面体上一条线 ...

  9. java 复习003 之排序篇

    由java 复习003跳转过来的C语言实现版见some-sort-algorithms 快速排序(不稳定 O(n log n)) package vell.bibi.sort_algorithms; ...

  10. [Hive - LanguageManual] VirtualColumns

    Virtual Columns Simple Examples Virtual Columns Hive 0.8.0 provides support for two virtual columns: ...