使用CSS3設置高度100 在前端開發中，高度自適應是非常重要的一個概念。而CSS3提供的設置高度100%的特性，則是實現高度自適應的一個重要工具。在使用這一特性的時候，我們可以通過以下幾種方法來實現高度100%的效果。 方法一：使用絕對定位 在CSS樣式表中為元素設置position:absolute，然后設置上下左右四個方向的值都為0，即可實現高度100%的效果。如下所示： pre { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } 方法二：使用flex布局 使用flex布局是當前比較流行的一種布局方式，通過設置容器的display為flex，然后設置子元素的flex-grow為1，即可實現高度自適應。代碼如下： pre { display: flex; flex-grow: 1; } 方法三：使用table布局 使用table布局也可以實現高度自適應的效果。將元素的display設置為table，然后將其包裹在一個設置了高度的容器中，就可以實現高度自適應的效果。代碼如下： .container { height: 100%; } pre { display: table; width: 100%; height: 100%; } 需要注意的是，在使用table布局時，元素的box-sizing屬性會被設置為content-box，所以需要另外設置為border-box來避免尺寸計算錯誤。 總之，CSS3提供的設置高度100%的特性是實現高度自適應的一個重要工具。通過以上幾種方法的使用，我們可以在前端開發中更加方便地實現高度自適應。