• WEB开发技能树-CSS-height 100%

    1 需求

    CSS让height100%生效的解决方案

    方案一：所有父节点高度都需要设置为100%

    方案二：删除

    注意事项：切记，一定是所有父节点都要设置为100%

    2 语法

    3.1 示例：body的height为100%

    错误实现：

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title></title>
    6. 		<style>
    7. 			body {
    8. 				border: 1px black solid;
    9. 				height: 100%;
    10. 			}
    11. 		</style>
    12. 	</head>
    13. 	<body>
    14. 		123
    15. 	</body>
    16. </html>

    正确实现1：

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title></title>
    6. 		<style>
    7. 			html {
    8. 				height: 100%;
    9. 			}
    10.  
    11. 			body {
    12. 				border: 1px black solid;
    13. 				height: 100%;
    14. 			}
    15. 		</style>
    16. 	</head>
    17. 	<body>
    18. 		123
    19. 	</body>
    20. </html>

    正确实现2： 

    1. <html>
    2. 	<head>
    3. 		<meta charset="UTF-8" />
    4. 		<title></title>
    5. 		<style>
    6. 			body {
    7. 				border: 1px black solid;
    8. 				height: 100%;
    9. 			}
    10. 		</style>
    11. 	</head>
    12. 	<body>
    13. 		123
    14. 	</body>
    15. </html>

    正确实现3：

    1. <!DOCTYPE>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title></title>
    6. 		<style>
    7. 			body {
    8. 				border: 1px black solid;
    9. 				height: 100%;
    10. 			}
    11. 		</style>
    12. 	</head>
    13. 	<body>
    14. 		123
    15. 	</body>
    16. </html>

    3.2 示例：

    错误实现

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title></title>
    6. 		<style>
    7. /* 			html {
    8. 				height: 100%;
    9. 			} */
    10.  
    11. 			body {
    12. 				/* border: 1px black solid; */
    13. 				height: 100%;
    14. 			}
    15.  
    16. 			#container {
    17. 				/* border: 1px black solid; */
    18. 				text-align: center;
    19. 				/* height: 100%; */
    20. 			}
    21.  
    22. 			#header {
    23. 				/* border: 1px black solid; */
    24. 				background-color: lightblue;
    25. 				height: 5%;
    26. 			}
    27.  
    28. 			#menu {
    29. 				/* border: 1px black solid; */
    30. 				background-color: aliceblue;
    31. 				float: left;
    32. 				height: 90%;
    33. 				width: 15%;
    34. 			}
    35.  
    36. 			#content {
    37. 				/* border: 1px black solid; */
    38. 				float: left;
    39. 				height: 90%;
    40. 				width: 85%;
    41.  
    42. 			}
    43.  
    44. 			#footer {
    45. 				/* border: 1px black solid; */
    46. 				background-color: lightblue;
    47. 				clear: both;
    48. 				height: 90%;
    49. 			}
    50. 		</style>
    51. 	</head>
    52. 	<body>
    53. 		<div id="container">
    54. 			<div id="header">header</div>
    55. 			<div id="menu">menu</div>
    56. 			<div id="content">content</div>
    57. 			<div id="footer">footer</div>
    58. 		</div>
    59. 	</body>
    60. </html>

    正确实现

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title></title>
    6. 		<style>
    7. 			html {
    8. 				height: 100%;
    9. 			}
    10.  
    11. 			body {
    12. 				/* border: 1px black solid; */
    13. 				height: 100%;
    14. 			}
    15.  
    16. 			#container {
    17. 				/* border: 1px black solid; */
    18. 				text-align: center;
    19. 				height: 100%;
    20. 			}
    21.  
    22. 			#header {
    23. 				/* border: 1px black solid; */
    24. 				background-color: lightblue;
    25. 				height: 5%;
    26. 			}
    27.  
    28. 			#menu {
    29. 				/* border: 1px black solid; */
    30. 				background-color: aliceblue;
    31. 				float: left;
    32. 				height: 90%;
    33. 				width: 15%;
    34. 			}
    35.  
    36. 			#content {
    37. 				/* border: 1px black solid; */
    38. 				float: left;
    39. 				height: 90%;
    40. 				width: 85%;
    41.  
    42. 			}
    43.  
    44. 			#footer {
    45. 				/* border: 1px black solid; */
    46. 				background-color: lightblue;
    47. 				clear: both;
    48. 				height: 90%;
    49. 			}
    50. 		</style>
    51. 	</head>
    52. 	<body>
    53. 		<div id="container">
    54. 			<div id="header">header</div>
    55. 			<div id="menu">menu</div>
    56. 			<div id="content">content</div>
    57. 			<div id="footer">footer</div>
    58. 		</div>
    59. 	</body>
    60. </html>

    4 参考资料

    css如何让height:100%起作用？_shanql的博客-CSDN博客

    设置百分比高度的问题_Young_Gao的博客-CSDN博客

    css如何让height:100%起作用？_shanql的博客-CSDN博客

  • 相关阅读:
    第一章 计算机系统概述
    [PHP]得推跑腿O2O系统 v3.41
    npm install err 4058报错处理
    Web APIs
    【毕业设计项目】基于单片机的手势识别设计与实现 - 物联网 嵌入式 stm32 c51
    Qt图形视图、动画框架
    缓存使用的一些经验
    面试官问我 “A + B” 算法，我懵了
    vue的use和extend的理解
    STC15单片机-串口打印printf重定向
  • 原文地址：https://blog.csdn.net/pwp032984/article/details/128191993