JavaScript或jQuery - 根據div高度/寬度調整表格的大小

我有一個HTML表格，我將其用作日曆。通常，這個日曆是以690像素寬查看的，這使得每列都有98像素寬（690/7 = 98）。我希望每個日期都是正方形，所以它們的高度也是98像素。JavaScript或jQuery - 根據div高度/寬度調整表格的大小

我有一個用於所有日期的CSS類。這有高度屬性設置爲98像素。我在底部還有一個按鈕，讓用戶可以全屏查看日曆。所以這意味着表格寬度將被設置爲100％（因爲所有不同的屏幕分辨率）。但是，我需要所有的日期都是正方形。因此，我需要一些JavaScript或（最好是）jQuery來計算屏幕分辨率的14％（因爲屏幕分辨率爲7天，屏幕分辨率爲100％，所以現在每列都是14％）。

我認爲jQuery會更好，因爲將CSS高度屬性更改爲任何計算的值，但JavaScript也可以工作。

我對jQuery一無所知，我不知道如何用JavaScript做到這一點。

來源

2013-02-21 Ryan Fitzgerald

使用jQuery它非常簡單。如果你想知道你的窗口可以使用

var screenWidth = jQuery(window).width()

末，因爲你所有的日期有一個特定的類（.dateElement例如），你可以使用jQuery使用來調整所有這些

jQuery('.dateElement').width(screenWidth * 14/100).height(screenWidth * 14/100);

你要調用此代碼時的功能調整大小和jQuery有一個很不錯的事件：

jQuery(window).resize(function(){// Your code });

希望這有助於法比奧

來源

2013-02-21 22:52:20 wezzy

我想我應該說這將在一個單獨的頁面上。例如。當您看到標準日曆（690像素寬）時，您將在mysite.com/calendar.html上。然後你會點擊全屏，它會把你帶到mysite.com/fs_calendar.html。這將是100％寬的日曆。我需要jQuery來計算每天課程的高度。我在''部分添加了以下代碼，並且它返回語法錯誤。 '' – 2013-02-21 23:02:45

對於完整的html/js/css視圖http://jsfiddle.net/PWqYa/ – 2013-02-21 23:07:00

嗨，你已經做對了，如果你把代碼放在新打開的頁面內應該可以工作。語法錯誤來自於我在14之前忘記了代碼中的*符號，我很抱歉。我剛剛編輯了我的回覆 – wezzy 2013-02-22 17:28:52

您可能需要window.innerWidth和$（window）.on（'resize'，fn）事件來檢查窗口大小何時更改。

但更好的方法是隻添加寬度設置爲容器的14％的類

來源

2013-02-21 22:53:59 vergilius

JavaScript或jQuery - 根據div高度/寬度調整表格的大小

回答

相關問題