调整子DIV的大小等于父DIV
我有一个宽度为400px，高度为200px的DIV。 在这个div里面是另一个div，在位置50,50和字体大小14px上有一些文本;
当父DIV调整大小（例如600px x 300px）时，我希望子DIV中的文本大小也调整为（更大的字体大小），等于调整后的父DIV。
我怎样才能做到这一点与jQuery和HTML？
使子div的宽度和高度100％
childDiv {
display:block;
width: 100%;
height: 100%;
position:relative //so you dont lose the positioning of your text
}
例如，当父潜水大小从（400/200）变为（600/300）时，您应该像这样对子div应用JavaScript函数
function resizeFont(parentElementId, childElementId, newWidth) {
currWidthParentElement = parseFloat( $(parentElementId).width() ); // get current width
currChildFontSize = parseInt( $(childElementId).css('font-size') ); // get font size for child
percentaRaise = (newWidth - ceil(currWidthParentElement)) * (100/ceil(currWidthParentElement)); // calculate how much parent increase
// calculate and apply new font size
newFontSize = currChildFontSize * percentaRaise/100 + currChildFontSize;
$(childElementId).css(newFontSize);
}
似乎很棘手，但是简单的代数。 我希望这会帮助你
http://codepen.io/rafaelcastrocouto/pen/EiFIL
var div = $('div');
$(window).on('resize', function(){
var u = div.width() / 200;
div.css('font-size', u +'em');
});