左边的位置绝对div与100％宽度与fittext.js

我有一个headline div容器<h1>和<h2>它是绝对位置和100％的宽度，我需要100％的宽度来得到fittext.js正常工作，但是当我把div放在这么多em s时，它给了我一个水平的滚动条。由于我的网站结构，我无法进行相对定位，但我可以，但这会让事情进一步恶化。好吧，那么为什么我会得到这个水平宽度，如果它出现，我该如何摆脱它。左边的位置绝对div与100％宽度与fittext.js

查看项目http://jsfiddle.net/sLXZs/3/

HTML/JS

 <div id="headLine"> 
      <h1 class="fitText">Austin Kitson</h1> 
      <h2 class="fitText">Marketing & Sales</h2> 
     </div> 




       <script> 
        jQuery(document).ready(function($) { 
    $('.fitText').fitText(2.2, { minFontSize: '10px', maxFontSize: '80px' }); 

}); 
       </script>

CSS

#headLine { 
    position: absolute; 
    top: 50%; 
    left: 55%; 
    width: 100%; 
    background: red; }

来源

2012-12-27 Cool Guy Yo

那么''left：55％'属性是什么导致滚动条出现... – elclanrs

似乎只是将div的大小而不是100％固定为45％，并将fittext的kompressor参数设置为1使其工作正确。

的CSS

#headLine { 
    position: absolute; 
    top: 50%; 
    left: 55%; 
    width: 45%; 
    background: red; }

脚本

jQuery(document).ready(function($) { 
    $('.fitText').fitText(1, { 
     minFontSize: '10px', 
     maxFontSize: '80px' 
    }); 
});

演示在http://jsfiddle.net/sLXZs/4/

来源

2012-12-27 22:42:46

谢谢你向导你。 –

集体溢出，避免滚动条：

body,html{overflow-x:hidden}

DEMO：http://jsfiddle.net/sLXZs/5/

overflow-x在某些较旧的浏览器中不受支持。您可以尝试使用overflow:hidden

来源

2012-12-27 22:45:54 charlietfl

，工作感谢。 –

假设你想保持100％的宽度的风格，而不是使用45％的宽度，它仍然是可能的，可以即时计算：

$("#headLine").width(function() { 
    return $(this).width() - $(this).css('left'); 
});

在行动：http://jsfiddle.net/sLXZs/6/

来源

2012-12-27 22:49:25

我想用这个，但在你的js小提琴fittext没有工作。 –

@AndersKitson以什么方式不起作用？你期望发生什么？ –

@AndersKitson抱歉，我实际上评论过'.fittext'调用：http://jsfiddle.net/sLXZs/7/ –

左边的位置绝对div与100％宽度与fittext.js

回答

相关问题