CSS中設置height為100%是指元素的高度將占據其容器的整個高度。在一些情況下,height為100%顯得非常有用。
父容器 { height: 400px; position: relative; } 子容器 { height: 100%; position: absolute; top: 0; left: 0; }
在上述示例中,父容器設置高度為400像素,子容器設置高度為100%,通過設置子容器的位置為absolute,即可讓其高度占據整個父容器的高度。
另一個常見的例子是設置body和html的高度為100%以確保頁面的內容始終填滿整個視口。
html, body { height: 100%; }
需要注意的是,如果上層容器的高度沒有被設置,那么設置子容器的height為100%將會無法起效。此外,由于邊框和內邊距的存在,元素的實際高度可能會略小于容器的高度。