三列100％高度的CSS佈局

我真的堅持與這種佈局的CSS。這裏是我的html代碼：三列100％高度的CSS佈局

<body> 
    <div id="main"> 
     <div id="left"> 
      menu 
     </div> 
     <div id="middle"> 
     </div> 
     <div id="right"> 
      sidebar 
     </div> 
    </div> 
</body>

我想三列左，中，右爲25％，60％的寬度，和父母的15％百分比寬度和所有擴展到的100％的高度的父母（主）。同時我希望主div具有瀏覽器窗口的最小高度和子節點的最大高度。

來源

2014-07-10 Meysam Feghhi

您可以輕鬆地使用CSS表格做到這一點：

html, body { 
    height: 100%; 
} 
body { 
    margin: 0; 
} 
.main { 
    display: table; 
    height: 100%; 
    width: 100%; 
} 
.left, .middle, .right { 
    display: table-cell; 
    background-color: lightgray; 
} 
.left { 
    width: 25%; 
} 
.middle { 
    background-color: beige; 
} 
.right { 
    width: 15%; 
}

見演示在：http://jsfiddle.net/audetwebdesign/9L8wJ/

填補了視口的高度，你首先需要設置html和body元素height: 100% 。

將display: table應用到父容器並設置height: 100%，並且由於這是一個表，所以此值將作爲最小值，因此它將填充垂直屏幕，除非內容很長，並且在這種情況下，表格高度將自動增加以包含內容。

添加寬度以左，右列，中間將填補餘下所以沒必要做數學題。

最後，將display: table-cell應用於三個子元素。

您可能希望在每個表格單元的內容中添加一個包裝，您希望更好地控制列之間的空白區域，但這取決於您的佈局和設計。

來源

2014-07-10 15:45:35

三列100％高度的CSS佈局

回答

相關問題