HTML/CSS：佈局列不填充空間

我正在嘗試製作3列布局，但正如您從下面的屏幕截圖中所看到的，最左側和最右側的列不會一直向下：HTML/CSS：佈局列不填充空間

3-column layout with left and right columns not spanning down entirely

您可以找到http://codepen.io/vbelenky/pen/hvbEq的代碼，我要在這裏貼，太：

<div class="wrapper"> 

    <div class="primary"> 
     <div class="primary-left"> 
      Primary Left<br> 
      blah 
     </div> 
     <div class="primary-right"> 
      Primary Right 
     </div> 
    </div> 

    <div class="secondary"> 
     Secondary 
    </div> 

</div>

CSS：

.wrapper { 
    overflow: hidden; 
    width: 600px; 
    border: 1px solid black; 
} 

.secondary { 
    width: 200px; 
    float: left; 
    background: cyan; 
} 

.primary { 
    width: 400px; 
    float: right; 
} 

.primary-left { 
    width: 300px; 
    float: left; 
    background: grey; 
} 

.primary-right { 
    width: 100px; 
    float: right; 
    background: yellow; 
}

來源

2013-07-26 SBel

你必須給所有3個div的包裝div和'height：inherit'賦予高度...... – mohkhan

他們沒有設定高度當然他們不會 –

我只能想到javascript。我現在認爲只有js免費解決方案是使用適當寬度顏色的600 x 1背景圖像並使用repeat-y;雖然不是很方便... – mshsayem

我的同事給了一個解決方案。主要思想是不使用float屬性並使用display table和table-cell。請參閱the code以供參考。我必須將div.secondary移動到頂端，我將浮點屬性無處不在地註釋掉了，我將div.wrapper聲明爲display：table和div.secondary，div.primary-left和div.primary-right，如下所示：表單元格。

來源

2013-08-16 10:50:39 SBel

像monkhan說，你需要設置高度爲所有的元素，例如（see on CodePen）：

.wrapper { 
    overflow: hidden; 
    width: 600px; 
    border: 1px solid black; 
    height: 40px; 
} 

.secondary { 
    width: 200px; 
    float: left; 
    background: cyan; 
    height: inherit; 
} 

.primary { 
    width: 400px; 
    float: right; 
    height: inherit; 
} 

.primary-left { 
    width: 300px; 
    float: left; 
    background: grey; 
    height: inherit; 
} 

.primary-right { 
    width: 100px; 
    float: right; 
    background: yellow; 
    height: inherit; 
}

這種方法的缺點是，你需要知道的最大高度提前（在這種情況下，我選擇了40px）。

來源

2013-07-26 09:37:57 BadgerPriest

此解決方案（其中指定高度）很糟糕，因爲您不知道高度以及文本大小何時增加，因此會被切斷。 – SBel

解決此問題的一種方法是使用絕對位置（而不是浮點數）。它不適合所有需求，但它可能適合你。 http://codepen.io/anon/pen/lLngy

.wrapper { 
    overflow: hidden; 
    width: 600px; 
    border: 1px solid black; 
    position: absolute; top: 0; left: 0; bottom: 0; 
} 

.secondary { 
    width: 200px; 
    background: cyan; 
    position: absolute; top: 0; bottom: 0; 
} 

.primary-left { 
    width: 300px; 
    background: grey; 
    position: absolute; top: 0; left: 200px; bottom: 0; 
} 

.primary-right { 
    width: 100px; 
    background: yellow; 
    position: absolute; top: 0; right: 0; bottom: 0; 
}

來源

2013-07-26 09:39:01

HTML：使用跟蹤代碼類似於查詢：

<div class="mainDiv"> 
     <div class="left">Left</div> 
     <div class="center">Center</br>Center<br/>Center<br/></div> 
     <div class="right">Right</div> 
    </div>

CSS：

.mainDiv{ position: relative; height: auto;} 
.left{ position: absolute;background:red; left: 0; top: 0; width: 100px; height: 100% } 
.right{ position: absolute;background:blue; right: 0; top: 0; width: 100px;height: 100%; } 
.center{ margin: 0 100px;background:green; }

http://jsfiddle.net/pfqpR/

來源

2013-07-26 09:39:19

一種方式，不會要求你設置任何p重新確定的高度應該是將3色背景圖像應用於包裝（圖像高度可以是50px並且「repeat-y」）。

這樣你就可以將內部div的背景顏色一直重複到底部，並且無論哪個內部div是最高的。

例如：

.wrapper { 
    overflow: hidden; 
    width: 600px; 
    border: 1px solid black; 
    background-image: url('3colours.png'); 
    background-repeat: repeat-y; 
}

來源

2013-07-26 09:45:17 KingLiNoodles

其他人說得好。我只是展示了另一種可能的方式（不方便）。不方便，因爲它會使寬度變化更加困難。只是一個背景圖像破解。對.wrapper使用（包裝寬度x 1）px的背景圖像，顏色在適當的位置。同時從.secondary,.primary-right和.primary-left中刪除背景顏色樣式。

這裏是小提琴：http://jsfiddle.net/eY9VR/

來源

2013-07-26 09:59:48 mshsayem

HTML/CSS：佈局列不填充空間

回答

相關問題