CSS是前端開發中非常重要的一部分。其中一個比較常用的技巧就是讓左側高度自適應。在實際開發中,經常會遇到這樣的情況:左側是導航菜單,右側是內容區,導航菜單的高度可能比內容區高度更高或更低。如果兩者高度不同,界面就會顯得比較奇怪。這時就需要使用CSS來讓左側自適應。
.nav{ width: 200px; float: left; background-color: #f2f2f2; padding: 10px; box-sizing: border-box; min-height: 100%; } .content{ width: calc(100% - 200px); float: left; padding: 10px; box-sizing: border-box; } .clear{ clear: both; }
如上所示,我們首先給左側導航菜單添加min-height:100%屬性,這樣就能讓左側的高度自適應。接著,我們用float屬性讓左側和右側都浮動到頁面左邊,這樣才能讓兩列并排顯示。接下來,我們用calc函數計算出內容區的寬度,這里是100%減去左側菜單的寬度。最后,我們還需要再添加一個clearfix來清除浮動。
總之,讓左側高度自適應的技巧在前端開發中是非常常見的。以上是一個簡單的示例,希望大家能夠理解并應用到實際開發中。
上一篇css 左右上下居中
下一篇css 屬性設置音頻路徑