具有百分比高度和最小高度的模態

我試圖創建一個模式對話框，其高度將是瀏覽器窗口高度的百分比。模式應該有一個最小高度，這樣它就不會變得不可能小，並且應該隨着窗口大小的調整而相應地增長/縮小/重新居中。模態有一個頁眉和一個頁腳夾住了模態主體的內容。具有百分比高度和最小高度的模態

這是我到目前爲止所提出的。如果我垂直調整窗口大小，紅色框會正確生長並保持居中。但是，內容區域和頁腳似乎並未完全填充到模式容器的底部（紅色框）。

enter image description here

這是怎麼回事，我該如何解決？

- - FIDDLE HERE - -

HTML：

<div class="modal"> 
    <div class="modal-header">Header</div> 
    <div class="modal-body"> 
     [...words...] 
    </div> 
    <div class="modal-footer">Footer</div> 
</div>

CSS：

.modal { 
    border:1px solid red; 
    width:600px; 
    position:absolute; 
    top:50%; 
    left:50%; 
} 

.modal-header, .modal-body, .modal-footer { 
    padding:10px; 
} 

.modal-header, .modal-footer { 
    background:#ccc; 
    font-weight:bold; 
    font-size:14px; 
} 

.modal-body { 
    height:inherit; 
    overflow:auto; 
    line-height:1.75em; 
}

的jQuery：

$(function() { 
    $('.modal').css('height','50%'); 
    $('.modal').css({ 
     'margin-top': (-1*$('.modal').height()/2), 
     'margin-left': (-1*$('.modal').width()/2) 
    }) 
}); 

$(window).resize(function() { 
    $('.modal').css({ 
     'margin-top': (-1*$('.modal').height()/2), 
     'margin-left': (-1*$('.modal').width()/2) 
    }) 
});

來源

2013-06-03 Jon

有點兒黑客攻擊行動，但我的overflow:hidden，position:fixed組合，幾個position:absolute S和其他一些隨機的編輯做到了。這應該讓你去。

http://jsfiddle.net/d3Ym2/6/

來源

2013-06-03 20:03:27

你的回答比我的好是個好主意。 +1 – DontVoteMeDown

This Works。感謝您的幫助！ – Jon

@DontVoteMeDown，no no no no no ... – coma

我真的不上這個了，但看this update。

只需用bottom:0設置頁腳並調整身體的高度即可。

來源

2013-06-03 20:07:52 DontVoteMeDown

這也適用，但我繼續@蒂姆的答案。不管怎樣，謝謝你！ – Jon

別擔心他的回答非常好！ – DontVoteMeDown

你沒有正確確定你的內部框的大小。

我解釋：其中一個框設置爲50％，其他2個設置爲他們所需要的。剩餘50％的標題爲&頁腳。一旦它是充足的，一旦沒有。

因此將這兩個設置爲25％;

除此之外，你在p元素上有默認的保證金，這將跳出包裝盒。

將heigth和box-sizing設置爲頁眉和頁腳將包含它們。
你的CSS重新

* { 
    font-family:Arial, sans-serif; 
    font-size:12px; 
} 

.modal { 
    border:1px solid red; 
    width:600px; 
    position:absolute; 
    top:50%; 
    left:50%; 
    min-height:200px; 
} 

.modal-header, .modal-body, .modal-footer { 
    padding:10px; 
    height:25%; 
    box-sizing: border-box 
} 

.modal-header, .modal-footer { 
    background:#ccc; 
    font-weight:bold; 
    font-size:14px; 

} 

.modal-body { 
    height:inherit; 
    padding:1px; 
    overflow:auto; 
    line-height:1.75em; 
}

注意，它是設置一個最小高度.mobal :)

來源

2013-06-03 20:28:50

http://jsfiddle.net/GCyrillus/SNE53/1/ –

具有百分比高度和最小高度的模態

回答

相關問題