重新调整网页内容的大小

Re-sizing the webpage content

本文关键字：网页内容 调整 新调整      更新时间：2024-03-07

在我的项目中，我有一个网页，它有左右两个div区域。左边的div几乎占整个页面宽度的60%，右边的div大约占页面宽度的36%。当我从右侧或左侧收缩浏览器时，我想以适当的比例调整两个div区域的大小。UI是从Javascript生成的。这就是代码。

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);

我尝试了JQuery调整大小插件，但没有得到我想要的正确结果。有人有什么建议吗？

感谢

参见jsfiddle示例，但我认为您只需要将宽度设置为百分比，而不是尝试计算它们-注意显示设置为内联块

<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>

所以我认为以你为例，你会有这样的

$(document).ready(function () {
    $('#sidebar').addClass('small-left-column');
    $('#board').addClass('large-right-column');
});

也许您正在寻找上面的纯Javascript版本：

$(document).ready(function () {
    $('#sidebar').css( {
        width: '30%'
        backgroundColor: '#aeaeae',
        display: 'inline-block'
    });
    $('#board').css({
        width: '60%',
        backgroundColor: '#aeaeae',
        display: 'inline-block'
    });
});

我在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;
  }

感谢

相关文章：