Javascript 文本不会填充Div_Javascript_Html_Css_Web

Javascript 文本不会填充Div

javascript html css web

Javascript 文本不会填充Div,javascript,html,css,web,Javascript,Html,Css,Web,我正在为一个呼叫中心设计一个统计板，我很难让两个元素的大小正确。我使用了一个名为FitText的自动文本大小调整器（下面的链接）。除了代码中列出的100%和100%之外，我已经让所有其他元素与FitText一起工作。我不明白为什么100%和100%与它们所包含的div的大小相比仍然很小。两个容器的宽度均为100%。我已经玩了数百个CSS组合，但都没有用。任何帮助都将不胜感激。通过下面的请求，这里是JSFIDLE链接 CSS #wrap { position: absolute;

我正在为一个呼叫中心设计一个统计板，我很难让两个元素的大小正确。我使用了一个名为FitText的自动文本大小调整器（下面的链接）。除了代码中列出的100%和100%之外，我已经让所有其他元素与FitText一起工作。我不明白为什么100%和100%与它们所包含的div的大小相比仍然很小。两个容器的宽度均为100%。我已经玩了数百个CSS组合，但都没有用。任何帮助都将不胜感激。通过下面的请求，这里是JSFIDLE链接

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>


弗吉尼亚摘要
1.
100
在此输入主题
12/12/2014 18:00
示例文本
$（“h1”）.fitText（1）；
$（“#fitText 2”）.fitText（1.2）；
$（“fittext3”）.fitText（1.2）；
$（“#fittext4”）.fitText（1.2，{minFontSize:'20px'，maxFontSize:'30px'}）；
$（“fittext5”）.fitText（1.2）；

标题上的默认页边距和您设置的某些页边距会导致一些对齐问题。如果您将其中一些切换为填充，并使用

框大小：边框框

在某些div上，它会使样式更容易：

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

在JS fiddle示例中，调整文本大小的Javascript看起来并没有在任何地方被调用。当我在fiddle中打开JQuery，然后实际调用元素上的文本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的顶部，因为它应该是第一个添加的内容。您可能希望在某些框中添加一些空间和内容，但由于我添加了边框框，您只需在百分比大小的元素上添加填充即可

$(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);
});

如果您将一个显示问题的JSFIDLE放在一起，可能会有所帮助。这个问题有点难以想象，我在JSFiddle中的queuestats div中收到一个空格，我没有在chrome中进行测试。这里是指向JSFiddle的链接：请参阅下面我的答案。我清理了你的一些CSS，并添加了一个更新的提琴，使文本大小的东西正常工作。谢谢你的改进建议。我一直在找那些。但是，在JSFIDLE示例中，您会注意到左上角的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上使用的更好的值更新了我的示例。这会使内容更适合您的内容，至少在Fiddle中是这样。我这里有一个相同的问题：您会碰巧知道如何解决省略号问题吗？谢谢