如何调整 div 的大小以填充所有空间答案

【问题标题】：how to size up divs to fill all space如何调整 div 的大小以填充所有空间
【发布时间】：2013-10-17 18:07:14
【问题描述】：

<head>
    <style type="text/css">
        .bar {
            background-color:red;
            height:100%;
            display: inline-block;
            border: 1px solid black;
            float:left;
        }
    </style>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>


</head>
<body>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>        
    <div class="bar"></div>        
    <div class="bar"></div>                
</body>
   <script type="text/javascript">
            $( document ).ready(function() {
                 var count = 7;
                 var divs = $('.bar');
                 for (var i = 0; i < divs.length; i++) {
                    $(divs[i]).width((100/count) +'%');
                 }
            }); 
    </script>

上述输出中的一个条低于第一个，即不是所有条容纳在一条线上，我该怎么做？有可能吗？

【问题讨论】：

检查这个：jsfiddle.net/XEGNE

标签： javascript jquery html css bar-chart

【解决方案1】：

好的，我对JS做了一个非常小的改动，然后我将.bar的父级设置为100%，这将强制它占用100%，因为它已设置为100%什么都没有 - 这是0。

此外，使用box-sizing 将强制将borders 计算为width/height 的divs。

jsFiddle here

更新的 JS - 注意更改..

$(window).load(function(){
$(document).ready(function () {
    var count = 7;
    var divs = $('.bar');
    for (var i = 0; i < divs.length; i++) {
        $(divs[i]).width((100 / count - 2) + '%');
    }
});

更新的 CSS

.bar {
     background-color:red;
     height:100%;
     display: inline-block;
     border: 1px solid black;
     float:left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

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

【讨论】：

谢谢。有用。它也可以在不设置正文和 html 高度的情况下工作。我有点困惑，虽然 (100/7-2) 导致 12.xx 呈现的 html 的宽度设置为 14.xx .... 为什么要减去 2？
@JohnSmith 实际上，如果您不在 body/html 上设置高度，它就不起作用。请参阅jsfiddle.net/J9GqL/1 .. 至于 JS，我真的不知道 - 试用和错误。
好的，我认为这是正确的方法。它在我正在尝试的网页上运行。

【解决方案2】：

你根本不需要 JS。更好的解决方案是执行以下操作：

.container {
  display: table;
  width: 100%;    
}

.bar {
  display: table-cell;
}

参见示例：http://codepen.io/anon/pen/anfgD

【讨论】：

这是错误的。它不会填满整个页面。请参阅我的示例填充整页：jsbin.com/eYUDUTa/2

【解决方案3】：

边框导致宽度超过 100%，迫使最后一个块到下一行。

您可以安全地添加以解决此问题：

* (box-sizing:border-box;)

见http://www.paulirish.com/2012/box-sizing-border-box-ftw/

【讨论】：

- 我不知道边界框，会读一读。 - 但是，如果我取出“边框”，上面的代码会按预期工作，如果我保留边框，即使我使用 box-sizing 它也不起作用。
box-sizing 与填充有关，而不是边框。 box-sizing 与边框没有任何关系。
否 - 包括边框。在此处查看图形：css-tricks.com/box-sizing
有人建议编辑：stackoverflow.com/review/suggested-edits/3157732 它被拒绝了，但看起来它可能正在添加有价值的信息。不过，我没有判断的专业知识。您可能希望查看一下，看看是否要实施任何建议的更改。
不，不包括边框。试试看，你会看到的。

【解决方案4】：

由于浏览器在宽度上添加了水平填充，您需要使用 box-sizing hack。

哦，还有，减去 2，而不是 1。因为即使是 1px 边框，以及 1px 左边框和 1px 右边框的组合，总边框宽度是 2px 而不是 1px。更新了js。

查看这个工作的 jsbin：
http://jsbin.com/eYUDUTa/2/

代码（同jsbin）：

page.html

<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>        
    <div class="bar"></div>        
    <div class="bar"></div>    
</body>
</html>

style.css

    body, html {
        height:100%;
        margin:0px;
        padding: 0;
    }        
    .bar {
        background-color:green;
        height:100%;
        display: inline-block;
        border: 1px solid black;
        float:left;
    }
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

script.js

$(document).ready(function () {
    var count = 7;
    var divs = $('.bar');
    for (var i = 0; i < divs.length; i++) {
        $(divs[i]).width((100 / count - 2) + '%');
    }
});

【讨论】：

顺便说一句，减去的部分被转换为百分比？
@JohnSmith 什么？不，它完美地工作！你有没有看过 jsbin？
@JohnSmith 我也将我的 jsbin 更新为高度为 100%。另外，您确实意识到我提出的解决方案与您选择的最佳答案完全相同？？
我很好奇完成的计算 .width((100 / count - 2) + '%');如果 count = 7 ，它不应该导致 .width('12.28%') 而不是 .width('14.28%') 吗？这也意味着..计数越多，留下的空白就越多..但这不会发生