引導模式百分比高度

Question

我構建的應用程序有很多情態動詞的，我需要設置模式類似的東西：

.modal {頂：5％;左：5％;右：5％;底部：5％; }

所以它會在瀏覽器窗口的90％寬度和90％高度。但我需要有可滾動的模態主體。我使用模態頭，它必須始終可見，因爲它包含功能按鈕。

當我想要定義最大高度時，即使它是百分比，也不是正確的數字，因爲 - 例如，頭部寬度設置爲5％，但具有填充5px，並已將底部邊框定義爲1px，所以我不能統計這些。爲了定義溢出，我必須定義最大寬度或寬度，但是無法動態地知道它，並且百分比不適合。

因爲我找不到任何解決方案，我開始考慮長卷軸模式，儘管長卷軸滾動標題滾動。

有什麼方法可以得到我想要的東西嗎？

Answer 1

你可以試試這個CSS：

.modal{ 
    width: 90%; /* desired relative width */ 
    min-height:80%; 
    left: 5%; /* (100%-width)/2 */ 
    margin: auto auto auto auto; /* place center */} 

.modal-body{overflow-y:scroll;max-height:none;position:absolute;top:50px;bottom:50px;right:0px;left:0px;} 

.modal-footer {position: absolute;bottom: 0;right: 0;left: 0;} 

Here is an example

讓我知道它的工作=）