3 回答

TA貢獻1786條經驗 獲得超13個贊
你可以通過這個padding-bottom: 100%; margin-bottom: -100%;技巧實現你想要的東西,你可以在這個小提琴中看到。
我稍微改變了你的HTML,但你可以使用以下代碼用自己的HTML實現相同的結果
.col-md-9 {
overflow: hidden;
}
.col-md-3 {
padding-bottom: 100%;
margin-bottom: -100%;
}

TA貢獻1966條經驗 獲得超4個贊
純CSS解決方案
僅使用CSS2.1,可以使用所有瀏覽器(IE8 +),而無需指定任何高度或寬度。
這意味著如果您的標題突然變長,或者您的左側導航需要放大,則無需在CSS中修復任何內容。
完全響應,簡單,清晰,易于管理。
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="LeftNavigation">
</div>
<div class="Content">
</div>
</div>
</div>
</div>
說明: 容器div占據身體的100%高度,并分為2個部分。標題部分將跨越其所需的高度,HeightTaker其余部分將采用。它是如何實現的?通過在容器旁邊以100%高度(使用:before)浮動一個空元素,并HeightTaker在末尾給出一個空元素和清除規則(使用:after)。那個元素與浮動元素不在同一條線上,所以他被推到了最后。這正是文件的100%。
由此我們將HeightTaker跨度設置為容器高度的其余部分,而沒有說明任何特定的高度/邊距。
在內部,HeightTaker我們構建一個正常的浮動布局(以實現像顯示一樣的列),并進行微小的更改..我們有一個Wrapper元素,這是100%高度工作所需要的。
更新
這是使用Bootstrap類的Demo。(我剛給你的布局添加了一個div)
- 3 回答
- 0 關注
- 462 瀏覽
相關問題推薦
添加回答
舉報