使窗口

的特定部分標籤100％的寬度和高度，我有以下結構：使窗口

<section id="first"> 
    <div> 
    <h2>Header</h2> 
    <p>Des</p> 
    <a href="#second">Link</a> 
    </div> 
</section> 
<section id="second"> 
    <div> 
    <h2>Header</h2> 
    <p>Des</p> 
    <a href="#first">Link</a> 
    </div> 
</section>

我想節＃首先是寬度100％和高度的100％，無論窗外是什麼尺寸和那麼當點擊錨點標記時，我希望第＃部分做相同的操作，使每個部分有效地顯示其自己的頁面。

我試過在每個部分添加寬度：100％和高度：100％，但我認爲js需要達到這個目標？任何人都可以告訴我如何實現這一目標？

凱爾

來源

2011-08-31 styler

你的意思是每一個自己的頁面？如果它們都是100％的高度和寬度，那麼其中一個會與另一個重疊......或者是你想要的行爲？ – mrBorna

@mrBorna我希望＃首先佔用整個瀏覽器窗口，不管大小如何，#second只能在選擇標籤或用戶滾動時才能看到 – styler

使用width: 100%;要切實保持DIV窗口的寬度，但高度是有點棘手。

一種技術是使用javascript來保持高度。這是一個例子。

function handleResize(){ 
    $("#first").height($(window).height()); 
}

這將設置頁面加載時的高度，但是當頁面被調整大小時它將不會更新。

要處理調整大小，您可以綁定到resize事件。

$(window).bind('resize', handleResize);

您可能還需要考慮一些其他活動，例如：onorientationchange是iPad的觸發的事件，當它旋轉。

爲簡單起見，這些代碼示例使用jQuery，但這不是必需的。

要讓兩個頁面替代，你可以這樣做：

function handleResize(selector){ 
    $(selector).height($(window).height()); 
} 
function handleShrink(selector){ 
    $(selector).height(0); 
} 
$("#pageTwoLink").click(function(){ 
    handleShrink("#first"); 
    handleResize("#second"); 
} 
$("#pageOneLink").click(function(){ 
    handleShrink("#second"); 
    handleResize("#first"); 
}

當然，這可以極大地清理，如果你提供關於確切的規格一些更多的信息。

來源

2011-08-31 13:56:41 idbentley

感謝@idbentley基本上我只是想確保section標籤佔據瀏覽器窗口的全部寬度和高度，並可以適應調整大小。然後我想將scrollto添加到將滾動到下一個/ prev部分的定位標記 – styler

在求助於javascript之前，總是用css耗盡您的選項。許多瀏覽器（儘管很低級）沒有啓用javascript。除了這個特定的解決方案，整個事情可以通過＃section first＃target，section＃second：target {width：100％; height：100％;}'這個比較短的來完成 – mrBorna

'height：100％'是一個尤其是css中的persnickity項目。有很多情況下，它不會做預期的事情。 – idbentley

太棒了！不需要JavaScript！它很容易的CSS像2個部分：

section#first{ 
    background:darkkhaki; 
    } 
    section#second{ 
    background:darkseagreen; 
    } 

    section#first:target,section#second:target{ 
    width:100%; 
    height:100%; 
    }

DEMO：http://jsbin.com/emeyag/edit

來源

2011-08-31 14:10:03 mrBorna

@mrBoma section＃首先不佔用整個瀏覽器窗口，100％高度不適用？ – styler

那麼你必須把它放在一個高度爲100％的容器（例如身體）中，因爲它填充了100％的家長容器;因此將父容器的css設置爲高度：100％;這裏你去：http://jsfiddle.net/rWuCf/ – mrBorna

通過位置屬性設置爲固定的，你讓兩個部分在同一地點存在。

section{ position:fixed; top:0;bottom:0;left:0;right:0;}

然後你可以使用JavaScript來改變哪一個是可見：

$('a').click(function(){ 
    $(this).closest('section').hide(); 
    $($(this).attr('href')).show(); 
});

來源

2011-08-31 14:35:46

回答

相關問題