文本不会填满 Div答案

【问题标题】：Text Will Not Fill Up Div文本不会填满 Div
【发布时间】：2014-04-04 15:20:46
【问题描述】：

我正在为呼叫中心设计一个统计板，但无法正确调整 2 个元素的大小。我使用了一个名为 FitText（下面的链接）的自动文本调整器。除了代码中列出的 100% 和 100 之外，我已经让所有其他元素都可以使用 FitText。我无法弄清楚为什么 100% 和 100 与它们所包含的 div 的大小相比保持如此之小。两个容器都是 100% 宽度。我玩过数百种 CSS 组合都无济于事。任何帮助将不胜感激。通过下面的请求，这里是 JSFiddle 链接。

http://jsfiddle.net/neggly/57tVW/

CSS

#wrap {
    position: absolute;
    height:100%;
    width:100%;
    margin:0 auto;
    background-color: black;
}

#statuscolorwrap
{
    background-color: aqua;
    float: left;
    width: 1%;
    height: 100%;
}

#numberwrap
{
    background-color: #ff0;
    float: left;
    width: 20%;
    height: 100%;
}

#announcementwrap
{
    background-color: coral;
    float: left;
    width: 79%;
    height: 100%;
}

#queuewrapper
{
    height:40%;
    width:100%;
    float: top;
    background-color: darkorchid;
}

#queuecolors
{
    height:40%;
    width:100%;
    float: top;
    background-color: cadetblue;
}

#queuepercentage
{
    height: 50%;
    width: 100%;
    float: top;
    background-color: chartreuse;
}

#queueholding
{
    height: 50%;
    width: 100%;
    float: bottom;
    background-color: crimson;
}

#topcolor
{
    height: 50%;
    width: 100%;
    float: top;
    background-color: darkseagreen;
}

#bottomcolor
{
    height: 50%;
    width: 100%;
    float: bottom;
    background-color: moccasin;
}

#datetimewrapper
{
    width:100%;
    height:5%;
    float: top;
    background-color: deepskyblue;
}

#messages
{
    width: 100%;
    height: 60%;
    float: top;
    background-color: darkorchid;
    overflow-y: auto;
}

.messagewrapper
{
    width: 100%;
    height: 100px;
    float:top;
    background-color: azure;
}

.messageimportance
{
    float:left;
    width: 5%;
    height: 100%;
    background-color: darkslategrey;
}

.messagesubject
{
    float:left;
    width: 95%;
    height: 100%;
    background-color: blanchedalmond;
}

h1
{
    font: Helvetica, sans-serif;
    margin:0;
    padding:0;
    text-align: center;
}

h2
{
    font: Helvetica, sans-serif;
    margin:0;
    padding:0;
    text-align: center;
}

h3
{
    font: Helvetica, sans-serif;
    font-weight: bold;
    margin:0;
    padding:0;
    text-align: center;
}

#anpicturewrap
{
    float:top;
    width:100%;
    height:45%;
    background-color: darkcyan;
}

#antextwrap
{
    float:top;
    width:100%;
    height:50%;
    background-color: darkkhaki;
    overflow-y: auto;
}

img
{
    max-width: 100%;
    max-height: 100%;
    display:block;
    margin:auto;
}

h4
{
    font: Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    text-align: left;
}

#text
{
    width: auto;
    margin-left: 40px;
    margin-right:40px;
    margin-bottom: 30px;
}

.subjecttext
{
    height: 100%;
    width:100%;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: auto;
    margin-bottom: auto;
}

HTML

<html>
    <head>
        <title>Virginia Summary</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="reset.css"/>
        <link rel="stylesheet" href="base.css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="js/libs/jquery/jquery.fittext.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="wrap">
            <div id="numberwrap">
                <div id="queuewrapper">
                    <div id="queuepercentage">
                        <div class="subjecttext">
                            <h1 id="fittext1">1</h1>
                        </div>
                    </div>
                    <div id="queueholding">
                        <h1 id="fittext2">100</h1>
                    </div>
                </div>
                <div id="messages">
                    <div class="messagewrapper">
                        <div class="messagesubject">
                            <div class="subjecttext">
                                <h2 id="fittext3">Enter Subject here</h2>
                            </div>
                        </div>
                        <div class="messageimportance">

                        </div>
                    </div>
                </div>
            </div>
            <div id ="statuscolorwrap">
                <div id="queuecolors">
                    <div id="topcolor">

                    </div>
                    <div id="bottomcolor">

                    </div>
                </div>
            </div>
            <div id="announcementwrap">
                <div id="datetimewrapper">
                    <h3 id="fittext4">12/12/2014 18:00</h3>
                </div>
                <div id="anpicturewrap">
                    <img src="images/pic.jpg" alt=""/>
                </div>
                <div id="antextwrap">
                    <div id="text">
                        <h4 id="fittext5">sample text</h4>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $("h1").fitText(1);
            $("#fittext2").fitText(1.2);
            $("#fittext3").fitText(1.2);
            $("#fittext4").fitText(1.2, {minFontSize: '20px', maxFontSize: '30px'});
            $("#fittext5").fitText(1.2);
        </script>
    </body>
</html>

https://github.com/davatron5000/FitText.js

【问题讨论】：

如果您将显示问题的 JSFiddle 放在一起可能会有所帮助。这个问题有点难以想象。
我在 JSFiddle 中的 queuestats div 上收到了一个空格，我在 chrome 中进行的测试并没有引起我的注意。这是 JSFiddle 的链接：jsfiddle.net/neggly/57tVW
在下面查看我的答案。我清理了你的一些 CSS，并添加了一个更新的小提琴，使文本大小正常工作。

标签： javascript html css web

【解决方案1】：

标题的默认边距和您设置的一些边距会导致一些对齐问题。如果您将其中的一些切换为填充，并在其中一些 div 上使用 box-sizing:border-box;，它会使样式更容易一些：

div {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

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

在 JS fiddle 示例中，调整文本大小的 Javascript 看起来并不实际被任何东西调用。当我在小提琴中打开 JQuery 然后实际调用元素上的 text-resize 东西时，它确实可以调整元素的大小。

$(document).ready( function(){
    jQuery("#fittext1").fitText(.2);
    jQuery("#fittext2").fitText(.3);
    jQuery("#fittext3").fitText(.6);
    jQuery("#fittext4").fitText(1, {minFontSize: '20px', maxFontSize: '30px'});
    jQuery("#fittext5").fitText(1.2);
});

编辑：我更新了您的一些 CSS，使其按您预期的方式工作。我将 normalize 移到 CSS 的顶部，因为它应该是添加的第一件事。您可能希望在某些框中添加一些空间和东西，但由于我添加了边框框，您可以通过在百分比大小的元素上进行填充来做到这一点。

http://jsfiddle.net/57tVW/2/

【讨论】：

感谢您的改进建议。我一直在寻找那些。但是，在您的 JSFiddle 示例中，您会注意到左上角的 100% 和 100 非常小。你能告诉我如何让它们变大吗？
另外，使用分组：jQuery 代码最好写成：jQuery('div[id^="fittext"]').fitText()，或jQuery('#fittext1, #fittext2, #fittext3, #fittext4, #fittext5').fitText();
fitText 正在使它们变小。看看它是如何工作的，看起来默认字体大小是容器宽度的 1/10。玩转 fitText() JS 中的值。 jQuery("#fittext1").fitText(.2);适用于 1 列 jQuery("#fittext2").fitText(.3);适用于 100% 列，您只需要找到适合您的应用程序的内容即可。
我用 fitText 上使用的更好值更新了我的示例。这样可以更好地为您的内容调整大小，至少在小提琴中
我在这里遇到了同样的问题：stackoverflow.com/questions/26342411/… 你会碰巧知道如何解决省略号问题吗？谢谢。