Question

我想做一些看似简单的事情。我想在页面上有两列，每列宽度为50％，高度为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'});
});

Answer 1

使用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/

高度值％？＆LT;＆LT;我对它有很大的疑问......

Answer 2

不知道这对你有用，但是......

.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;      
}

你甚至不需要容器。

Answer 3

对于这两个类，下面的代码都可以使用。设置在右侧的容器需要和绝对的位置所以无论页面上的内容是什么，它都准确地设置在你告诉它的位置。 `

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

添加您想要的任何其他属性。

Answer 4

我建议你使用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（保持站点精益），没有浮动：左;使用（有时导致不可预测的结果）

Answer 5

我不是一位经验丰富的程序员，但最近遇到类似问题时，我不得不将包装容器的宽度分成4块。我遇到了同样的问题，第4块将在第1块下滑下。我给了宽度：我的css为25％。当我把它改成24％时，这些块排成一排。它的余量是把整个东西扔掉所以我占据了边缘和填充的1％。希望这有用

Answer 6

您绝对不需要jquery或表（或表格显示类型）。两件事：

一：你需要给身体元素一个高度。基本上，目标元素和窗口之间的所有内容（或目标容器可能是什么）都需要高度。

html, body { height: 100%; }

二：您希望使用＆＃34;容器＆＃34;的类来定位div，而不是名为container的元素。因此添加一段时间：

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

小提琴：http://jsfiddle.net/nFeh8/7/

高度100％，多列不工作

6 个答案: