高度100％，多列不工作

我想做一些看似簡單的事情。我想在頁面上有兩列，每列寬度爲50％，高度爲100％，因此它們完全填充屏幕。我希望它們並排放置，以便將屏幕分成兩半。然而，不管我出於某種原因做什麼，他們都拒絕填充頁面並相互浮動。高度100％，多列不工作

我試着繞過它使用jQuery，但如果窗口被調整大小，那麼列不再填充頁面。我試着四處搜尋，但沒有提供多列解決方案。我已經在很多網站上看到了這一點，但無法弄清楚。有沒有辦法用純CSS或更高效的jQuery來做到這一點？

<div class="container"> 
    <div class="on"> 
     <button type="button" class="btn-on"> 
      on 
     </button> 
    </div> 

     <div class="off"> 
     <button type="button" class="btn-off"> 
      off 
     </button> 
    </div> 

</div>

。

html { 
    height: 100%; 
} 

container { 
    width: 100%; 
    height: 100%; 
} 

.on { 
    width: 50%; 
    height: 100%; 
    background-color: #FEE; 
    float: left; 
} 

.off { 
    width: 50%; 
    height: 100%; 
    background-color: #666; 
    float: left;  
} 

.btn-off { 
    position: relative; 
}

。

$(document).ready(function() { 
    var height = $(window).height(); 
    $('.on').css({'height':height + 'px'}); 
    $('.off').css({'height':height + 'px'}); 
});

來源

2014-03-26 user3417966

我建議你使用div的風格作爲表來實現它。這是最容易理解的方法。試着這樣說：

CSS：

html,body { 
    width:100%; 
    height:100%; 
    margin:0px; 
    padding:0px; 
} 

.div-table { 
    display:table; 
    width:100%; 
    height:100%; 
} 

.div-table-row { 
    display:table-row; 
} 

.div-table-cell { 
    display:table-cell; 
    width:50%; 
    height:100%; 
} 

/* only for showing you the columns */ 

.div-table-cell:nth-child(1) { 
    background-color:red; 
} 

.div-table-cell:nth-child(2) { 
    background-color:green; 
}

和HTML：

<div class="div-table"> 
    <div class="div-table-row"> 
     <div class="div-table-cell"></div> 
     <div class="div-table-cell"></div> 
    </div> 
</div>

工作的jsfiddle：http://jsfiddle.net/T9BsG/1/

優點是：不使用（一直網站瘦）JS，無浮：剩下;使用（有時導致不可預知的結果）

來源

2014-03-26 23:48:35 Robin

我怕使用表，但這似乎是迄今爲止沒有使用js的最佳方法。謝謝 – user3417966

其實你沒有使用表格，但只有div的表格像表格一樣。有一個重要的區別;-) – Robin

不知道這是否會爲你工作，但是......

.on { 
    width: 50%; 
    height: 100%; 
    position: absolute; 
    bottom: 0; 
    background-color: #FEE; 
} 

.off { 
    width: 50%; 
    height: 100%; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    background-color: #666;  
}

你並不真的需要，即使這個容器。

來源

2014-03-26 23:40:04

對於這兩個類下面的代碼將工作。在右側設置的容器需要是絕對位置，因此無論頁面上的內容如何，它都會精確設置您要告訴的位置。 `

.on{ 
    position:absolute; 
    width: 50%; 
    height:100% 
} 
.off{ 
    position:absolute; 
    left:50%; 
    height:100%; 
} 
`

添加你想要的任何其他屬性。

來源

2014-03-26 23:42:35

使用jQuery，你可以調用文檔準備相同的聲明以及窗口大小調整：

var blockAdj = function() { 
    var height = $(window).height(); 
    $('.on').css({'height':height + 'px'}); 
    $('.off').css({'height':height + 'px'}); 
}; 

$(document).ready(blockAdj); 
$(window).resize(blockAdj);

演示：使用高度http://jsfiddle.net/effone/nFeh8/6/

％的價值？ < <我有一個很大的疑問...

來源

2014-03-26 23:44:36 effone

此作品不夠好，但其高效使用jQuery，而不是僅僅CSS這樣的事情？ – user3417966

正如我所說的，我之前遇到過高％的問題;如果你完全想用CSS去解決問題，我只能想到display：table-cell; – effone