製作元素不會影響頁面高度（因此滾動）

我正在製作一個網站，屏幕兩側各有一些「浮動」圖像。頁面高度介於900-3000像素之間，因此我創建了浮動圖像來覆蓋此區域。製作元素不會影響頁面高度（因此滾動）

問題是，即使頁面高度只有900像素，頁面也會將浮動圖像看作頁面上的對象，並使其滾動到可能的位置。使頁面比需要的時間長得多。

從我可以收集在StackOverflow上。絕對元素不應該算入文檔的流程中，但顯然這些都是。我也看到涉及溢出使用的答案：隱藏，但這似乎並沒有達到預期的效果。

也許唯一的辦法是創建圖像取決於使用JavaScript的頁面高度？

這裏是有問題的網站的WIP：http://apa.smars.se

來源

2013-03-24 jsmars

如果你想讓所有的內容都以簡潔的格式顯示，你肯定會需要用JavaScript來擴展它們。 – 2013-03-24 21:22:27

如果你想有一個CSS這裏唯一的解決辦法是你應該做的：

添加position:relative;和margin:0到<body>元素。

添加下一個元素作爲第一元素在你的<body>：

<div style="position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;">

移動<div class="botleft ...">和<div class="botright ...">元素，該專區。

通過應用position:relative到<body>元素，並增加它的另一個元素與position:absolute; left:0; top:0; width:100%; height:100%你告訴該元素「跟蹤」 <body>元素的大小。並通過添加overflow:hidden;隱藏底部溢出的圖像。

該解決方案的缺點是，您可能會在頁面底部看到剪切圖像。好了，沒有什麼是完美的:)

這是你的DOM樹應該如何看待這樣的變化之後

enter image description here

要馬上看到結果，你可以從瀏覽器的控制檯運行下面的代碼：

d = document.createElement("div"); 
d.style.cssText = "position:absolute; left:0; top:0; width:100%; height:100%; overflow:hidden;"; 
document.body.insertBefore(d, document.body.firstChild); 
d.appendChild(document.getElementsByClassName("botleft")[0]); 
d.appendChild(document.getElementsByClassName("botright")[0]); 
document.body.style.position = "relative"; 
document.body.style.margin = "0";

來源

2013-03-24 22:08:27 smnh

完美地工作，非常感謝！ – jsmars 2013-03-24 22:15:51

當您給某個元素指定absolute位置時，它將與包含絕對元素的第一個元素relative絕對相關。

而且由於元素的默認位置是靜態的，所以您可能必須更改容器元素（可能是body）。

祝你好運！

來源

2013-03-24 22:17:25 HasanAboShally

製作元素不會影響頁面高度（因此滾動）

回答

相關問題