使div動態變化高度

我有一個3行的頁面。第一行是150px的固定高度，最後一行是120px的固定高度。我需要中間行根據窗口的高度進行調整，以便所有三行都可見，並且沒有可見的滾動條。中間行必須動態調整，以便即使在加載後，如果將瀏覽器窗口移動到另一個較小的屏幕，中間行也必須相應地進行調整。其次，中間行必須使其內容垂直中間和水平居中。任何幫助表示讚賞。使div動態變化高度

來源

2016-10-25 Corne Lombaard

也請發表您的代碼？ – prasanth

你可以從'$（window）.height（）'獲得窗口高度，然後使用'position：fixed; btw'來計算容器的高度，所有主容器都是設計佈局的可怕方法。 – Sojtin

使用100vh從CSS獲得高度比使用JS好得多。你的代碼也依賴Jquery –

CSS的高度：

.first-row { 
    height: 150px; 
} 

.middle-row { 
    height: calc(100vh - 150px - 120px); 
} 

.last-row { 
    height: 120px; 
}

來源

2016-10-25 09:00:12

I打算用flexbox製作一支筆，但@Kevin Farrugia打敗了我。使用它比「display：table-cell;」更好。 –

請記住，並不總是支持以下技術： calc：http://caniuse.com/#feat=calc 視口單元：http://caniuse.com/viewport-units/embed/ –

謝謝Ben您的解決方案已運行。現在我該如何垂直對齊中間行內容？ –

運行在全頁模式的代碼片段（！）。使用css calc函數來自動計算中間容器的高度。

body { 
 
    margin: 0; 
 
} 
 
.top { 
 
    background-color: #f0f0f0; 
 
    height: 150px; 
 
} 
 
.bottom { 
 
    background-color: #ddd; 
 
    height: 120px; 
 
} 
 
.middle { 
 
    background-color: teal; 
 
    display: table-cell; 
 
    height: calc(100vh - 270px); 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    width: 100vw; 
 
}

<div class="top">TOP</div> 
 
<div class="middle">MIDDLE</div> 
 
<div class="bottom">BOTTOM</div>

來源

2016-10-25 09:01:39 connexo

個人清潔的解決方案是使用flexbox：

.container { 
    display: flex; 
    flex-direction: column; 
} 

.dynamic { 
    flex: 1 1 auto; 
}

http://codepen.io/kevinfarrugia/pen/wzOqGo?editors=1100#0

來源

2016-10-25 09:04:24

Flexbox是更好的解決方案，我只是在做一個codepen！ –

如所建議的，嘗試使用Flexbox的：

<style> 
.container { 
    display: flex; 
    flex-flow: column wrap; 
    align-items: stretch; 
    height: 100%; 
} 
.row{} 
.row.row1{height: 150px;} 
.row.row2{flex: 1 1 auto;} 
.row.row3{height: 120px;} 
</style> 

<div class="container"> 
    <div class="row row1">First row</div> 
    <div class="row row2">Middle row</div> 
    <div class="row row3">Final row</div> 
</div>

使用此時，不要忘記添加您的供應商前綴。

來源

2016-10-25 09:06:12

我用flexboxes這些東西：A Complete Guide to Flexbox

.container { 
 
    display: flex; 
 
    flex: 1 1 auto; 
 
    flex-direction: column; 
 
} 
 

 
.header { 
 
    height: 50px; 
 
    background-color: green; 
 
    flex: 0 0; 
 
} 
 

 
.footer { 
 
    height: 30px; 
 
    background-color: red; 
 
    flex: 0 0; 
 
} 
 

 
.content { 
 
    background-color: blue; 
 
    flex: 1 1 auto; 
 
    min-height: 50px; 
 
}

<div class="container"> 
 
    <div class="header"></div> 
 
    <div class="content"></div> 
 
    <div class="footer"></div> 
 
<div>

來源

2016-10-25 09:08:37 NoRyb

使div動態變化高度

回答

相關問題