[英]Re-sizing the webpage content
In my project I have a webpage which has 2 div areas right and left. 在我的项目中,我有一个网页,该网页的左右两侧有2个div区域。 The left div takes almost 60% of the whole page width and the right one takes around 36% of the page. 左div占据整个页面宽度的近60%,右div占据整个页面宽度的36%。 I wanted to resize the both div areas in a proper ratio when I shrink the browser from the right side or left side. 当我从右侧或左侧缩小浏览器时,我想以适当的比例调整两个div区域的大小。 The UI is getting generated from Javascript. UI是从Javascript生成的。 This is the code. 这是代码。
boardHolderPadding = $board.outerHeight() - $board.height();
$board.height(viewportHeight - siblingsHeight - boardHolderPadding);
this.$('#board .droptarget').setWidthAsRatioOfHeight(this.options.ratio);
$('#sidebar').width($(window).width() - $board.find('#board').width() - 50);
I tried with JQuery resize plugin but couldnt get the proper result I'm looking for. 我尝试使用JQuery调整大小插件,但无法获得我想要的正确结果。 Anyone have suggestion? 有人有建议吗?
Thanks 谢谢
See jsfiddle example but I think you just need to set your widths as percentages rather than trying to calculate them - note display is set to inline-block 参见jsfiddle示例,但我认为您只需要将宽度设置为百分比,而不是尝试计算它们-注释显示设置为inline-block
<div>
<div class="small-left-column">this is the left column</div>
<div class="large-right-column">this is the right column</div>
</div>
<style>
.small-left-column {
width: 30%;
background-color: #aeaeae;
display: inline-block;
}
.large-right-column {
width: 60%;
background-color: #aeaeae;
display: inline-block;
}
</style>
So I think for your example your would have something like this 所以我想举个例子
$(document).ready(function () {
$('#sidebar').addClass('small-left-column');
$('#board').addClass('large-right-column');
});
Maybe you're looking for the pure-Javascript version of the above: 也许您正在寻找以上的纯Javascript版本:
$(document).ready(function () {
$('#sidebar').css( {
width: '30%'
backgroundColor: '#aeaeae',
display: 'inline-block'
});
$('#board').css({
width: '60%',
backgroundColor: '#aeaeae',
display: 'inline-block'
});
});
I did it in a different way in Javascript and I hope this will help someone to fix if they come across an issue like that 我用Javascript做了另一种方式,希望这会帮助某人解决类似的问题
relativeSize : function(width, height){
var boardWidth = this.$("#board").width(),
boardHeight = this.$("#board").height(),
newcard = this.$("#newCard").width(),
space = width - boardWidth - newcard;
ratio = space / width * 3; //used to increment the ratio with 3 as the ratio is very tiny value, this will help to increase minimizing size
bheight = boardHeight - 25; // used to reduce the height by 25px, u can use any amount to match ur ratio
var relHeight = (space < ratio) ? bheight : height;
return relHeight;
}
Thanks 谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.