垂直滾動內容

+------------------+ <-- container - should not be stretched by its contents 
|+----------------+| 
||    ||| 
||    ||| <-- main div - as big as container minus footer 
||    |||     if content overflows, scrollbar appear 
||    ||| 
|| scrollbar-> H|| 
||    H|| 
||    ||| 
|+----------------+| 
|+----------------+| <-- footer - stretched by its contents (button) to 
|| [button]  ||    minimal needed height 
|+----------------+| 
+------------------+

分裂DIV。垂直滾動內容

該容器可以不具有靜態尺寸，從而解決方案「只是計算主div的高度」不是一個選項（不當然JS）

HTML5，不需要的向後兼容性。

來源

2016-10-04 David162795

你計劃的容器有視口的高度？（例如，瀏覽器窗口的高度） –

號如果潔具我已經發現使用位置的解決方案：固定的，但它被包含在另一複雜的佈局。（有附帶使用iframe記「髒」的解決方案......但「髒」） – David162795

你說你不想指定高度，它不應該採取內容既不視口的高度的高度。 **但應容器採取什麼樣的高度？** –

CSS3中你可以使用

height: calc(100% - 60px);

是60像素可以代表頁腳的高度。

來源

2016-10-04 10:41:27

嘗試這樣：

/* css */ 

<style> 
    .container{ 
     position: relative; 
     height: 100%; 
     width: 100%; 
    } 
    .main{ 
     position: relative; 
     height: calc{100% - 10%}; 
     width: 100%; 
     overflow: auto; 
    } 
    .footer{ 
     position: relative; 
     height: 10%; 
     width: 100%; 
    } 
</style> 

<!-- html --> 
<div class="container"> 
    <div class="main"> 
    </div> 
    <div class="footer"> 
    </div> 
</div>

來源

2016-10-04 10:46:27 nocturns2

在這裏你去;只使用html/flexbox：

您會注意到，在頁腳div上添加<p>標記時，div會縮放至最大高度30％，並強制主div再次溢出內容。

應該沒有一個靜態的容器高度/寬度，想這取決於父容器。

第一：以最小的內容

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
.container{ 
 
    height:200px; 
 
    width:400px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    } 
 
.main{ 
 
    width:100%; 
 
    background-color:blue; 
 
    overflow-y: scroll; 
 
    } 
 
    .main p{ 
 
     color:white; 
 
    } 
 
.footer{ 
 
    max-height:30%; 
 
    width:100%; 
 
    background-color:red; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
<div class="main"> 
 
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p> 
 
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p> 
 
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p> 
 
    </div> 
 
<div class="footer"> 
 
    <span>Trump2016</span> 
 

 
    </div> 
 
</div> 
 
</body> 
 
</html>

二：添加了內容（顯示容器遺囑規模，迫使主格了）。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
.container{ 
 
    height:200px; 
 
    width:400px; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-direction: column; 
 
    } 
 
.main{ 
 
    width:100%; 
 
    background-color:blue; 
 
    overflow-y: scroll; 
 
    } 
 
    .main p{ 
 
     color:white; 
 
    } 
 
.footer{ 
 
    max-height:30%; 
 
    width:100%; 
 
    background-color:red; 
 
    } 
 
</style> 
 
</head> 
 
<body> 
 
<div class="container"> 
 
<div class="main"> 
 
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p> 
 
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p> 
 
    <p>Trump2016</p><p>Trump2016</p><p>Trump2016</p><p>Trump2016</p> 
 
    </div> 
 
<div class="footer"> 
 
    <span>Trump2016</span> 
 
    <p>Trump2016</p> 
 
    
 

 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2016-10-04 10:55:03 Votlon

這篇文章包含我正在尋找的答案，但是，呃，是不是那麼隱藏的選舉廣告需要？ – David162795

不，它不是^。^ – Votlon

檢查這可以幫助你。

我對.container使用height: 100vh，並將.footer向上拉出負餘量。

* { 
 
    margin: 0; 
 
} 
 
.container { 
 
    height: 100vh; 
 
    box-sizing: border-box; 
 
    padding-bottom: 50px; 
 
    overflow: auto; 
 
} 
 
.footer { 
 
    height: 50px; 
 
    text-align: center; 
 
    margin-top: -50px; 
 
    background: #ccc; 
 
    position: relative; 
 
    z-index: 1; 
 
    box-sizing: border-box; 
 
    padding: 15px; 
 
}

<div class="outer"> 
 
    <div class="container"> 
 
    <ul> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
     <li>test</li> 
 
    </ul> 
 
    </div> 
 
</div> 
 
<div class="footer"> 
 
    footer 
 
</div>

來源

2016-10-04 11:47:34 Tushar

垂直滾動內容

回答

相關問題