重新調整網頁內容的大小

在我的項目中，我有一個網頁，左右有2個div區域。左側div佔整個頁面寬度的將近60％，右側佔用頁面的36％左右。當我將瀏覽器從右側或左側縮小時，我想以適當的比例調整兩個div區域的大小。用戶界面正從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試圖調整插件，但不可能得到正確的結果我要找的。任何人有建議？

感謝

來源

2012-07-27 Mujahid

如何只使用CSS？ – Malvolio 2012-07-27 08:34:21

也許研究到響應的UI使用CSS媒體查詢例如http://neevtech.com/blog/2012/05/01/responsive-ui-using-css-media-query/ – 2012-07-27 08:35:38

@Malvolio，問題是整個頁面越來越從JS生成，但我喜歡的方式，如果我們可以用CSS來做到這一點，我試圖用最小寬度和最大寬度仍然只是右側，側邊欄正在縮小，而不是董事會 – Mujahid 2012-07-27 08:36:59

我這麼做是在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; 
    }

感謝

來源

2012-08-07 03:48:48 Mujahid

見jsfiddle example，但我認爲你只需要設置你的寬度爲百分比，而不是試圖計算他們 - 注意顯示設置爲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>

所以我認爲你的例子你會有這樣的事情

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

來源

2012-07-27 08:50:41

提示：如果您需要支持低於9的IE，請添加一個特定於IE的CSS，使用'.small-left-column，.large-right-column {zoom：1;顯示：內聯}'。這就是IE'專有的'inline-block'方式。 – 2012-07-27 08:52:58

@StefanMajewsky是否有關於哪種風格首先出現，IE應該在'display：inline-block;'樣式之前還是之後？ – 2012-07-27 09:03:13

@ChrisMoutray，謝謝，但這種方法不會在這裏工作，因爲整個佈局是使用Javascript生成的。我正在尋找一個使用Javascript的解決方案 – Mujahid 2012-07-27 09:44:10

也許你正在尋找上述的純JavaScript版本：

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

來源

2012-07-27 19:02:13 Malvolio

重新調整網頁內容的大小

回答

相關問題