Javascript是創建流體佈局的有效方法嗎？

Question

我想JavaScript的是否是一個仍在生產流體網站佈局的一個可行的和比較有效的方法的意見。 我知道這是可能的，用javascript建立流體佈局，但是相對於其他方法（如CSS3/HTML5），它是如何站起來在性能和複雜性方面？下面的函數代表我的意思。在函數中，javascript被用來查找各種元素的尺寸並相應地放置其他元素。看到它的工作，follow this link。

function onPageResize() { 
 
    //center the header 
 
    var headerWidth = document.getElementById('header').offsetWidth; //find the width of the div 'header' 
 
    var insideHeaderWidth = (document.getElementsByClassName('header')[0].offsetWidth + document.getElementsByClassName('header')[1].offsetWidth + document.getElementById('logoHeader').offsetWidth); //find the combined width of all elements located within the parent element 'header' 
 
    document.getElementsByClassName('header')[0].style.marginLeft = ((headerWidth - insideHeaderWidth)/2) + "px"; //set the margin-left of the first element inside of the 'header' div 
 
    ///////////////////////////////////////////////////////////////// 
 

 
    //justify alignment of textboxes 
 
    var subtitleWidth = document.getElementsByClassName('subtitle'); //assign the properties of all elements in the class 'subtitle' to a new array 'subtitleWidth' 
 
    var inputForm = document.getElementsByClassName('inputForm'); //assign the properties of all elements in the class 'inputForm' to a new array 'inputForm' 
 
    for (i = 0; i < inputForm.length; i++) { //for every element in the array 'inputForm' set the margin-left to dynamically place the input forms relative to eachother 
 
    inputForm[i].style.marginLeft = (subtitleWidth[4].offsetWidth - subtitleWidth[i].offsetWidth) + "px"; 
 
    } 
 
    ///////////////////////////////////////////////////////////////// 
 

 
    //place footer on absolute bottom of page 
 
    if (window.innerHeight >= 910) { //when the page is larger than '910px' execute the following 
 
    var totalHeight = 0; //initialize a new variable 'totalHeight' which will eventually be used to calulate the total height of all elements in the window 
 
    var bodyBlockHeight = document.getElementsByClassName('bodyBlock'); //assign the properties of all elements in the class 'bodyBlock' to a new array 'bodyBlockHeight' 
 
    for (i = 0; i < bodyBlockHeight.length; i++) { //for every instance of bodyBlockHeight in the array, add the height of that element into the 'totalHeight' 
 
     totalHeight += bodyBlockHeight[i].offsetHeight; 
 
    } 
 
    totalHeight += document.getElementById('header').offsetHeight; //finally, to add the height of the only element that has yet to be quantified, include the height of the element 'header' into the 'totalHeight' 
 

 
    /*Set the margin-top of the element 'footer' to the result of subtracting the combined heights of all elements in the window from the height of the window. 
 
    This will cause the footer to always be at the absolute bottom of the page, despite whether or not content actually exists there. */ 
 
    document.getElementById('footer').style.marginTop = (window.innerHeight - totalHeight) - document.getElementById('footer').offsetHeight + "px"; 
 
    } else { 
 
    //if the page height is larger than 910px (approx the height of all elements combined), then simply place the footer 20px below the last element in the body 
 
    document.getElementById('footer').style.marginTop = "20px" 
 
    } 
 
    ///////////////////////////////////////////////////////////////// 
 

 
}

再次，上述函數的結果可以被看作at this link。

感謝您的任何及所有誰提供他們的意見！

Answer 1

您應該使用CSS而不是JavaScript的，因爲這是CSS是專門做。如果您想要使用百分比寬度，浮動和媒體查詢來播放流式佈局。