當瀏覽器窗口小於800像素高時，需要幫助保持嵌套div可見

我有兩個div：外部div始終爲800像素高，內部div爲150像素高。內部div的位置距離外部div的底部60像素。當瀏覽器窗口小於800像素高時，需要幫助保持嵌套div可見

外部div也在瀏覽器窗口內垂直居中。

<div id='outer'> 
    <div id='inner'> 
    some stuff 
    </div> 
<div> 

<styles> 
#outer 
{ 
    position: relative; 
text-align: left; 
width: 1200px; 
height: 800px; 
min-width: 1000px; 
min-height: 750px; 
margin: 0px auto; 
} 
#inner 
{ 
    position: absolute; 
    background: rgba(10, 9, 9, .9); 
    height: 150px; 
    width: 100%; 
    z-index: 1; 
    bottom: 60px; 
    overflow: hidden; 
}

我需要調整我的CSS，這樣，如果瀏覽器窗口小於800個像素高，內格從瀏覽器窗口的底部（因此它保持可見），位於60個像素，而不是距離外部div的底部60像素。

但是，當瀏覽器窗口高於800像素，我希望內部div被定位爲距離外部div底部60像素。

來源

2010-09-21 JamesTBennett

我已經有了一個重新措辭的問題要更清楚一點（這很難描述視覺效果）。你能看看它嗎？檢查我是否明白你在問什麼？ – 2010-09-22 00:35:50

您必須添加position:relative到外層div它成爲絕對定位的元素

我真的不明白你的問題的容器，所以這是我最好的猜測。

來源

2010-09-21 23:54:09 Galen

它實際上有位置：相對..我有一個1200像素×800像素的框，裏面有一個條，寬度爲100％，高度爲150px。酒吧在外箱底部以上60px。如果窗口的高度小於800px，並且仍然高於底部60px，我希望欄仍然可見。 – JamesTBennett 2010-09-22 00:02:01

@creocare：如果'＃outer'具有'position：relative'，是否還有其他未發佈的CSS？如果你遺漏了相關的代碼，很難診斷你的問題。 – 2010-09-22 00:05:44

margin：0px auto – JamesTBennett 2010-09-22 00:15:09

嗯，我的猜測是你希望內部div始終位於外部div的頂部，而不管窗口的大小。

我在想什麼，你正在尋找的是position: fixed，也許一般的CSS定位有所幫助：http://www.w3schools.com/css/css_positioning.asp和使用的z-index的：http://www.w3schools.com/css/pr_pos_z-index.asp

我會用這個CSS去：

#inner 
{ 
position: fixed; 
z-index: 1; 
width; 100%; 
height: 150px; 
bottom: 60px; 
}

來源

2010-09-22 00:11:30 MadsMadsDk

我不確定修復是否正確。 – JamesTBennett 2010-09-22 00:14:11

也許你可以使用CSS3媒體查詢如下記載：

http://www.w3.org/TR/css3-mediaqueries/#height

這些將在大多數功能強大的瀏覽器中工作，但不支持IE瀏覽器，並允許您編寫只有在瀏覽器具有特定寬度/高度（以及更多）時纔會啓用的css。例如，它們對iPad和iPhone的不同樣式的設計非常有用。

有是一個jQuery插件，以使他們的工作IE瀏覽器...

www.protofunc.com/scripts/jquery/mediaqueries/

...但它僅支持基於寬度媒體查詢不幸。： -/

來源

2010-09-22 12:14:39

如果刪除「最小高度」，然後添加以下行：

#outer { max-height: 100% }

它的工作原理（但外元件是更小）。

來源

2010-09-22 12:27:07 hluk

CSS3媒體查詢指定height？

@media screen and (max-width: 800px) , screen and (max-height: 800px) { 
    ... 
}

不能完全確定你的要求，以及 - 但具體佈局瀏覽器尺寸/分辨率，我建議這一點。

來源

2014-02-05 04:25:46

當瀏覽器窗口小於800像素高時，需要幫助保持嵌套div可見

回答

相關問題