亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Twitter bootstrap 3兩列全高

Twitter bootstrap 3兩列全高

慕田峪7331174 2019-09-18 15:15:54
我正在嘗試使用twitter bootstrap 3 制作雙列全高布局。似乎twitter bootstrap 3不支持全高度布局。我想做的事:  +-------------------------------------------------+  |                     Header                      |  +------------+------------------------------------+  |            |                                    |  |            |                                    |  |Navigation  |         Content                    |  |            |                                    |  |            |                                    |  |            |                                    |  |            |                                    |  |            |                                    |  |            |                                    |  +------------+------------------------------------+如果內容增長,導航也應該增長。每個父母的高度100%不起作用,因為存在內容是一行的情況。絕對的位置似乎是錯誤的方式display: table并display:table-cell解決問題,但它并不優雅HTML:    <div class="container">      <div class="row">        <div class="col-md-3"></div>        <div class="col-md-9"></div>      </div>    </div>有沒有辦法使用默認的twitter bootstrap 3類?
查看完整描述

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%;

}


查看完整回答
反對 回復 2019-09-18
?
慕標5832272

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)


查看完整回答
反對 回復 2019-09-18
  • 3 回答
  • 0 關注
  • 462 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號