在CSS中使用剩餘空間

-1

我試圖設置一個由兩個主要區域組成的網站：導航和內容。導航部分需要佔用左列的整個高度。主要內容將在左欄。在試圖對此進行設置，我使用了下面的CSS：在CSS中使用剩餘空間

<div class="full-height row"> 
    <div id="navDiv" class="four wide column full-height" style="background-color:#40546C;"> 
    <!-- Nav COntent goes here --> 
    </div> 

    <div class="eight wide column"> 
     Main Content 
    </div>  
</div>

我創建了一個撥弄完整的例子here。我在導航欄中要做的事情有三件事：顯示標題，使標籤與屏幕底部對齊，並讓標籤內容佔據剩餘空間。不幸的是，我沒有太多的運氣讓這個工作。具體來說，我在獲取標籤內容以填充剩餘空間和與屏幕底部對齊的標籤時遇到問題。

非常感謝您的幫助！

來源

2014-02-28 user3284007

爲了將來的參考，您應該嘗試提及您正在使用外部網格系統。我花了幾分鐘才知道發生了什麼，爲什麼有那麼多的課程。沒什麼大不了的，雖然:-)

我覺得這個新的小提琴應該是非常接近你所談論的，但什麼： theFiddle

我首先要定身和HTML的高度100％，以便他們的孩子也可以100％。然後，我將navDiv放在左邊，並將其寬度設爲25％。您可以根據需要調整該寬度。

#navDiv { 
width: 25%; 
float: left; 
position:relative; 
}

然後，我使用絕對定位獲取底部的標籤，並獲得選項卡上方的標籤內容。

我在幾個地方添加了新的類，以避免與網格庫衝突。我還必須使用重要的來覆蓋細分類的邊距，因爲我不想刪除您在網格中使用的任何內容。

可能有一種方法可以更有效地使用該網格進行此佈局。正如我所說，我不熟悉它，所以我只使用普通的CSS。

正如一邊，這是一個我最喜歡的資源刷新CSS佈局。以爲你可能會發現它有幫助： http://learnlayout.com/

來源

2014-02-28 02:00:08 developering

在CSS中使用剩餘空間

回答

相關問題