如何讓瀏覽器窗口大小更改時顯示子div？

如果我有兩個嵌套div元素我的index.html頁：如何讓瀏覽器窗口大小更改時顯示子div？

<body> 
    <div id="parent"> 
     <div id="child"></div> 

    </div> 
</body>

父div具有寬度900，高度800

我想位於右上方的孩子div父母div的角落，所以，我定義了兒童div的CSS，如下所示：

#child { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 300px; 
    height: 30px; 
}

CSS很好，它使得子div位於父div的右上角。

但是，如果我更改（更小）瀏覽器窗口大小，子節點div會在某個點消失（隱藏）。

如何使子div始終可見，但仍然位於父div的右上角無論瀏覽器窗口大小如何變化？

來源

2011-06-15 Leem

你有js的工作。 – sandeep 2011-06-15 07:21:36

給父母的相對位置，以便孩子的位置相對於它。

#parent { 
    position: relative; 
    width: 900px; 
    height: 800px; 
} 


#child { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 300px; 
    height: 30px; 
}

編輯：我誤解你問的是什麼，現在當我看到它，我看到你想要孩子的div在頁面上留下可見不管是什麼，不只是在父母的左上角。爲此，需要綁定到窗口大小調整事件，並在窗口寬度小於父寬度時更改子div的位置。改變正確的位置的差異。

好吧，這裏會做什麼，我認爲你問它做了jQuery：

$(function(){ 
    $(window).resize(function(){ 
    var delta = parseInt($('#parent').width(), 10) - parseInt($(window).width(), 10); 
    if (delta > 0) { 
     $('#child').css('right', delta); 
    } 
    }); 
});

兩件事情：

如果您快速調整窗口的大小，孩子div並不總是返回到最右邊的角落。我不確定這是否是一個計時問題，其中窗口的寬度實際上是移動得更遠或什麼，但是當您緩慢調整大小時，這會更好，這導致我相信有更好的方法可以做到這一點。
如果窗口被打開，這不會處理移動子div，以至於它太小而無法首先看到子div。這可以很容易地修復使用相同的技術來找到最好的位置爲子div，但只是當頁面加載而不是調整大小時。

來源

2011-06-15 07:12:32 kinakuta

取決於你如何想的父母的大小，你可以做的幾件事情之一：

集#parent大小，最大寬度，而不是寬度

#parent { 
    position: absolute; 
    max-width: 300px; 
    height: 100%; 
}

尺寸＃百分比寬度百分比

#parent { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
}

或者只是使用類似這種規模的#parent：

#parent { 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
}

使用2或3做幾乎同樣的事情在這種情況下，但如果你想圍繞#parent一些額外的空間2提供了更多的靈活性。

來源

2011-06-15 07:50:24 BDawg

如何讓瀏覽器窗口大小更改時顯示子div？

回答

相關問題