在頁面中部創建Conetent面板

我想創建一個位於頁面絕對中間的內容面板。在滾動條出現之前，它可以將其寬度和高度都擴展到頁面的某個百分比。在頁面中部創建Conetent面板

我在JSF頁面上使用Primefaces。我確信有很多解決方案可以做到這一點。我想使用JSF的組合。

這裏是我的解決方案：

<p:layout id="layout"> 
     <p:layoutUnit position="center"> 
      <p:panel header="Test" style="width:50%"> 
       <ui:insert name="content"/> 
      </p:panel> 
     </p:layoutUnit> 
    </p:layout>

然而，這並沒有真正做任何事情。它不居中，我插入「內容」標籤的內容擴展到整個頁面。

任何人都可以協助我如何實現我的目標嗎？

編輯

我試過了Rick Calder發佈的解決方案。以下是我的代碼。但它不適合我。我將css寫入了style.css。我將javascript寫入resizeContentPanel.js。我在我的resource.xhtml的頭部加載了JQUery和resizeContentPanel.js。我相信這些都是正確的步驟。有什麼我可能會失蹤。

至於我其實錯了，我沒有看到內容面板。當我調試javascript時，它的高度邊緣爲-71，寬度邊緣爲-160。我假設這就是爲什麼我不能看到它。

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:ui="http://java.sun.com/jsf/facelets" 
    xmlns:p="http://primefaces.org/ui" 
    xmlns:f="http://java.sun.com/jsf/core"> 
<h:head> 
    <title> 
     <ui:insert name="windowTitle"/> 
    </title> 

    <h:outputStylesheet library="css" name="style.css"/> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
    <h:outputScript library="scripts" name="resizeContentPanel.js" /> 
</h:head> 
<h:body> 
    <div class="centeredPanel"> 
     <p:layout id="layout" > 
      <p:layoutUnit position="center"> 
       <ui:insert name="content"/> 
      </p:layoutUnit> 
     </p:layout> 
    </div> 

    <h:form> 
     <div id="stack"> 
      <p:stack id="stackMenu" icon="/resources/images/stack/stack.png" model="#{pageBuilder.stackMenuModel}" /> 
     </div> 
    </h:form> 

    <div id="dock"> 
     <p:dock id="dockMenu" model="#{pageBuilder.dockMenuModel}"/> 
    </div> 

</h:body>

的style.css

root 
{ 
    display: block; 
} 

body 
{ 
    background-image: url('../../resources/images/background/background.jpg'); 
} 

.centeredPanel{ 
    width:25%; 
    height:25%; 
    min-width:100px; 
    min-height:100px; 
    position:absolute; 
    left:50%; 
    top:50%; 
}

resizeContentPanel.js

$(document).ready(function(){ 
var heightMargin = -($('.centeredPanel').height()/2); 
var widthMargin= -($('.centeredPanel').width()/2); 
$('.centeredPanel').css('margin-left',widthMargin); 
$('.centeredPanel').css('margin-top',heightMargin); 
}); 

$(window).resize(function(){ 
var heightMargin = -($('.centeredPanel').height()/2); 
var widthMargin= -($('.centeredPanel').width()/2); 
$('.centeredPanel').css('margin-left',widthMargin); 
$('.centeredPanel').css('margin-top',heightMargin); 
});

來源

2012-11-12 user489041

完美中心東西在頁面你真的希望它是一個固定的大小，這樣就可以做計算。

.centeredPanel{ 
    width:500px; 
    height:500px; 
    position:absolute; 
    left:50%; //sets left edge at the midway point of it's container 
    top:50%; //sets top edge at the midway point of it's container 
    margin-left:-250px; //moves the div back half it's width to centre it. 
    margin-top:-250px; //moves the div up half it's height to centre it. 
}

演示：http://jsfiddle.net/calder12/qNNvb/

要使用百分比做到這一點，需要jQuery的。

.centeredPanel{ 
    width:25%; 
    height:25%; 
    min-width:100px; 
    min-height:100px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    background-color:red; 
} 


$(document).ready(function(){ 
var heightMargin = -($('.centeredPanel').height()/2); 
var widthMargin= -($('.centeredPanel').width()/2); 
$('.centeredPanel').css('margin-left',widthMargin); 
$('.centeredPanel').css('margin-top',heightMargin); 
}); 

$(window).resize(function(){ 
var heightMargin = -($('.centeredPanel').height()/2); 
var widthMargin= -($('.centeredPanel').width()/2); 
$('.centeredPanel').css('margin-left',widthMargin); 
$('.centeredPanel').css('margin-top',heightMargin); 
});

演示：http://jsfiddle.net/calder12/qNNvb/3/

來源

2012-11-12 20:46:53

真棒，謝謝！是否有可能以頁面的百分比來做高度和寬度？就像我希望它佔據75％的寬度和50％的高度。這可能嗎？ – user489041

我想如果你想使用百分比，你將需要使用JavaScript來計算高度和寬度，並適當地設置邊距。我想不出另一種方式去做。 –

請參閱編輯jQuery和百分比。 –