自動調整div間隔可達100％的高度

我已經準備好了一個移動網站，它具有正確的圖像寬高比，但是在一些屏幕較大的手機上，它會縮短頁腳長度，之後會出現白色空白。我寧願在內容之間添加一些DIV，以便在需要時自動拉伸。自動調整div間隔可達100％的高度

我在想是這樣的：

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="content1"></div> 
    <div class="empty_gap"></div> 
    <div id="accordion"></div> 
    <div class="empty_gap"></div> 
    <div id="footer"></div> 
</div>

的.empty_gap的DIV會得到均勻的高度，使該網頁將適應屏幕的高度。如何完成這項工作？或者當頁面縮短以填充整個移動屏幕時，您是否有針對這種情況的其他解決方案？

編輯：我必須添加一件事情，我不認爲它會導致問題。這些解決方案都不適合我，因爲我使用jquery手風琴，並且當我執行$("#wrapper").outerHeight();時，即使我將所有面板摺疊，我都會獲得比屏幕尺寸更大的值。我想這也是這些解決方案無法工作的靈活盒子的原因。

編輯2： JS解決方案現在正在工作，我只需要從包裝中減去面板的內容。

來源

2016-06-21 soonic

如果您不需要支持舊瀏覽器，它可以是flexible boxes的作業。

看看here爲瀏覽器支持（當與-webkit前綴版本聯合使用時，支持94.22％）。

您只需將容器元素設置爲display: flex;，然後將flex-direction: column;添加到.empty_gap元素的flex-grow: 1（或任何大於0的值）。

#container { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
#header, #footer { 
 
    height: 25px; 
 
    background-color: red; 
 
} 
 

 
#content1, #content2 { 
 
    height: 50px; 
 
    background-color: blue; 
 
} 
 

 
.empty_gap { 
 
    background-color: yellow; 
 
    flex-grow: 1; 
 
}

<div id="container"> 
 

 
    <div id="header"></div> 
 
    <div id="content1"></div> 
 
    <div class="empty_gap"></div> 
 
    <div id="content2"></div> 
 
    <div class="empty_gap"></div> 
 
    <div id="footer"></div> 
 
    
 
</div>

來源

2016-06-21 15:19:34

該解決方案似乎還不錯，我寧願比JS但jQuery的手風琴（我認爲）讓，這並不正常工作的問題更加爲了我。看到我的帖子編輯，如果你能幫助這種新的情況。 – soonic

flex佈局將使內容適應容器/包裝器大小。你只需要確保這個容器填滿你想要填充的空間。我不確定jQuery手風琴是如何工作的，但是如果前面的語句被驗證了，這應該起作用。 –

謝謝您的回答，這對未來將會有所幫助，因爲我對柔性盒以及如何使用它們都不瞭解。 – soonic

如果你是一個JavaScript解決方案確定，試試這個：

通常你div S的關係用div容器包裹。如果不是這種情況，就勇往直前，並添加一個這樣的：

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="content1"></div> 
    <div class="empty_gap"></div> 
    <div id="content2"></div> 
    <div class="empty_gap"></div> 
    <div id="footer"></div> 
</div>

然後在JavaScript中，計算該容器div的高度，從窗口的高度減去它。那將是你所有差距的總和，所以除以你的差距數（在你的例子中爲2）來得到每個差距的高度。類似這樣的：

var totalGap = $(window).height() - $("#wrapper").outerHeight(); 
var gap = totalGap/2; //2 is the number of your gaps 
$(".empty_gap").css("height", gap);

將此代碼置於頁面完成加載時的事件中。不過，如果您的應用支持輪播，那麼您必須將此代碼置於$(window).resize()事件中。

來源

2016-06-21 15:22:43

您可能還必須查找窗口大小調整事件。 –

此外，FWIW，[你顯然不需要jQuery]（http://youmightnotneedjquery.com）。 –

@Roque如果你的應用支持旋轉，你只需要'resize'事件。至於你的第二個評論，是否使用jQuery是個人選擇。如果OP沒有在他的代碼中使用jQuery，上面的代碼可以很容易地轉換成純JavaScript。 –

我建議使用flexbox佈局，對於#content2以上和以下的相等空間，您只需設置#content2 { margin: auto 0; }即可使其工作。

jsFiddle

html, body { 
 
    height: 100%; 
 
} 
 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin: 0; 
 
} 
 
#content2 { 
 
    margin: auto 0; 
 
}

<div id="header">header</div> 
 
<div id="content1">content1</div> 
 
<div id="content2">content2</div> 
 
<div id="footer">footer</div>

來源

2016-06-21 15:47:45 Stickers

自動調整div間隔可達100％的高度

回答

相關問題