瀏覽器上的流體容器縮小尺寸

我目前正在使用的網站是https://twobyfore.com。目前有一個iframe爲英雄頭部顯示一個Codepen，其中有一個ID爲#lp-code-196的div。這div有造型，瀏覽器上的流體容器縮小尺寸

position: relative; 
width: 100vw; 
left: calc(-50vw + 50%);

這工作，以適應股利屏幕寬度（移動，13" ，17" ），但是，我剛纔注意到，在瘦身的瀏覽器的寬度，白水溝啓動出現在任何一邊（https://snag.gy/qwE1XH.jpg）。

我已經嘗試使用一些jQuery的，

$(window).resize(function() { 
    $('#lp-code-196').css('width', $(window).width); 
});

除了這並沒有成功地解決了寬度+白水溝的問題。

有人會知道如何解決這個問題嗎？

來源

2017-03-01 Ivan RL

有在編輯CodePen沒有機會？ – SpyderScript

你會對Codepen做什麼版本？ –

因爲你的問題不是minified，很難給出完整的答案。但是問題在於你有一個固定寬度的容器，.lp-positioned-content，然後是內部的內容，你試圖在其容器之外延伸。這是不好的做法。這裏是你有什麼一個XML版本：

<container width="900px"> <div-that-tries-to-be-100%-screen-width> </div-that-tries-to-be-100%-screen-width> </container>

，這裏是你應該嘗試什麼：

<div width="100%" position="relative"> <cool-iframe width="100%" position="absolute"></cool-iframe> <container width="900px"> <header>Top producers aren't satisfied with average.</header> ... </container> </div>

開始你了：

設置的#lp-code-196的width到100%和left至0。

執行相同的.lp-positioned-content

與要水平居中在頁面上爲margin: 0 auto和東西都創建一個固定寬度的容器，它

來源

2017-03-01 19:06:18 SpyderScript

所以我們使用Unbounce構建頁面，這是他們設置HTML的方式。根據你提到的，我實際上已經設計出一種hacky方法來將iframe從.lp定位的內容中取出，並將其轉換爲另一個寬度與身體成比例的div。 –

具有諷刺意味的是，大多數宣傳'不需要編碼'或'沒有IT'的產品往往讓用戶想要，或者無論如何都要求IT幫助。但我很樂意提供幫助。注意：在將來，您可能會考慮提及您在問題中使用的任何頁面生成器或框架，以便獲得更多專業化的幫助。 – SpyderScript

關於頁面生成器/框架的好處。當我發佈問題時，我絕對需要在清晰度和實質上進行工作。再次感謝您指引我朝着正確的方向發展！ –

我沒有推開它仍然活着，但是這是該代碼似乎很好地擺脫瀏覽器調整大小的排水溝。

中的JavaScript：

<script> 
    $(document).ready(function() { 
    var element = $('#lp-code-196'); 
    $(element).remove(); 
    $('#lp-pom-block-8').append(element); 
    }); 
</script>

的CSS：

#lp-code-196 { 
    z-index: 0; 
    display: block; 
    width: 100%; 
    left: 0; 
    top: 0; 
    }

來源

2017-03-01 19:57:41

瀏覽器上的流體容器縮小尺寸

回答

相關問題