Javascript 重新调整网页内容的大小

在我的项目中，我有一个网页，左右两个分区。左侧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 resize插件，但是没有得到我想要的正确结果。有人有什么建议吗

谢谢

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

---

也许您正在寻找上述内容的纯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;
  }

relativeSize:函数（宽度、高度）{
var boardWidth=此.$（“#board”）.width（），
boardHeight=此.$（“#board”）.height（），
newcard=this.$（“#newcard”）.width（），
空格=宽度-板宽-新卡；
ratio=space/width*3；//用于将比率增加到3，因为比率是非常小的值，这将有助于增加最小大小
bheight=boardHeight-25；//用于将高度降低25px，u可以使用任何数量来匹配ur比率
var relHeight=（空间<比率）？bheight：高度；
返回高度；
}

---

感谢

也许研究使用css媒体查询的响应式用户界面，例如@Malvolio，问题是整个页面都是从JS生成的，但我喜欢使用css的方式，我尝试了最小宽度和最大宽度，仍然只在右侧，侧边栏正在缩小，不是Board@ChrisMoutray：媒体查询是一种很好的方法。但如果我们能对屏幕大小有一个正确的概念，它就更合适了。如果用户在正常桌面环境下调整浏览器的大小，则页面应根据响应提示：如果您需要支持9以下的IE，请添加一个带有

的IE特定CSS。左小列，.右大列{zoom:1；display:inline}

。这是IE专有的说法，

inline block

@stefanmayewsky首先出现的样式是否重要，IE特定的样式应该出现在

显示：inline block之前还是之后样式？@ChrisMoutray，谢谢，但是这种方法在这里不起作用，因为整个布局都是使用Javascript生成的。我正在寻找一个使用JavaScription的解决方案。您可以继续使用JavaScript生成布局，最后将css类样式分配给元素。我不明白为什么这对你不起作用？
$(document).ready(function () {
    $('#sidebar').css( {
        width: '30%'
        backgroundColor: '#aeaeae',
        display: 'inline-block'
    });
    $('#board').css({
        width: '60%',
        backgroundColor: '#aeaeae',
        display: 'inline-block'
    });
});

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