當達到最大高度時做一個div滾動？

項目將被添加到中心部分，我希望它根據其內容增長，直到整個容器達到窗口大小/高度。如果它溢出，我希望中間件滾動而不是整個頁面。我無法弄清楚如何去做。當達到最大高度時做一個div滾動？

的CODE：

.container { 
 
    width: 100%; 
 
    height: 100%; 
 
    display: table; 
 
} 
 
.header { 
 
    display: table-row; 
 
} 
 
.content { 
 
    background-color: #FFF; 
 
    border-radius: 5px; 
 
    padding: 10px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    white-space: normal; 
 
    min-height: 10vh; 
 
    max-height: 100vh; 
 
} 
 
.footer { 
 
    display: table-row; 
 
}

<div class="container"> 
 
    <div class="header "> 
 
    Header 
 
    </div> 
 

 
    <div class="content"> 
 
    Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    </div> 
 

 
    <div class="footer"> 
 
    Footer 
 
    </div> 
 
</div>

編輯：這裏有一張照片，以澄清它打算如何工作的：

來源

2016-04-22 Sakutard

您可以使用flexbox爲，

display:flex在父.container，以及在你.header和.footer，
適用flex-direction:column到.container
flex:1到.content（到窗口相應增長身高）

body { 
 
    margin: 0 
 
} 
 
.container { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-direction:column 
 
} 
 
.header, .footer { 
 
display:flex; 
 
} 
 
.content { 
 
    background-color: #FFF; 
 
    border-radius: 5px; 
 
    padding: 10px; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    white-space: normal; 
 
    min-height: 10vh; 
 
    border: 1px solid red; 
 
    flex:1 
 
}

<div class="container"> 
 
    <div class="header"> 
 
    Header 
 
    </div> 
 
    <div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique commodo nunc, at vestibulum lectus vehicula ut. Nam a orci sed dui convallis finibus sed non purus. Nullam porta, dolor eu dapibus finibus, tortor mi luctus libero, at cursus urna 
 
    ligula et eros. In sagittis lectus in nisl viverra, eu aliquet neque porta. Nunc rutrum fringilla est quis dapibus. Integer a lobortis purus, pretium condimentum nisi. Morbi non finibus lectus, nec pretium mi. Sed pretium, metus ut tempus varius, 
 
    eros urna congue elit, at congue magna dolor ut risus. Duis at velit quis nisl feugiat iaculis at sed orci. Nulla consectetur sem ligula, et auctor ante molestie sed. Curabitur consequat nunc velit, at rutrum tortor suscipit eget. Proin quis aliquet 
 
    ante. Cras tempus interdum orci nec elementum. Phasellus dictum mauris eu nunc pellentesque gravida. Ut pharetra arcu a velit iaculis cursus. Nunc porta hendrerit orci ac cursus. Fusce ut feugiat libero. Etiam odio mi, tempus non lorem ac, volutpat 
 
    cursus ligula. Aliquam semper odio ac turpis aliquam euismod sed non arcu. Pellentesque vestibulum id orci vitae euismod. Integer dignissim, risus eget aliquam finibus, dolor est fringilla lectus, vitae posuere lacus enim vitae dolor. Aenean lobortis 
 
    gravida ante, vitae tempor dui interdum sed. Donec in neque rutrum, vestibulum tortor et, tempor ligula. Donec sit amet quam in quam pretium rhoncus ut nec justo. Maecenas rutrum aliquet turpis, in dictum est imperdiet viverra. Vivamus auctor, tellus 
 
    sed iaculis mattis, risus ligula rhoncus velit, at varius nulla lacus non arcu. Integer sagittis neque vitae massa aliquet pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non iaculis tellus, 
 
    non faucibus mi. Maecenas venenatis dolor eros, in elementum ipsum bibendum et. Ut sed dui augue. Vivamus ac enim ac leo tristique convallis. Pellentesque erat massa, tempus eget hendrerit vitae, fringilla id urna. Nunc sit amet orci et tellus euismod 
 
    pellentesque eu id ante. Phasellus quis purus sapien. Nunc molestie porttitor odio, non tempor metus dapibus quis. Donec placerat fringilla purus et ultrices. Donec consectetur facilisis urna vel porttitor. Sed id semper tellus, vitae mollis justo. 
 
    Aliquam pharetra, lorem vel consequat posuere, diam odio sodales risus, at vehicula neque massa eu nisi. Cras viverra vitae nulla at posuere. Phasellus maximus cursus odio eget auctor. Mauris dapibus elit ut blandit euismod. Phasellus pulvinar sagittis 
 
    fermentum. Donec libero neque, ultricies luctus ornare a, accumsan eu leo. Aenean tincidunt ullamcorper ante, id laoreet risus vehicula sit amet. Curabitur lacus ex, pulvinar quis interdum eu, tincidunt sed nunc. Aliquam tempor arcu nec ipsum vehicula 
 
    tincidunt. Cras at risus eget tellus mollis malesuada. Fusce nec nisi ut mauris facilisis luctus sodales et tellus. Etiam eu placerat leo. Sed augue arcu, faucibus viverra mollis at, tincidunt sit amet enim. Phasellus ac lorem eget felis ornare aliquam. 
 
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam enim dui, feugiat quis tortor eget, laoreet dapibus metus. Nam auctor eget justo accumsan consequat. Quisque bibendum urna quis facilisis ullamcorper. 
 
    </div> 
 
    <div class="footer"> 
 
    Footer 
 
    </div> 
 
</div>

來源

2016-04-22 14:25:30 dippas

對不起，我應該已經寫窗口瀏覽器。我不希望腳下消失。整個容器應該保留，但容器應滾動 – Sakutard

@Sakutard看到更新的答案 – dippas

這是一個最接近我想要的東西。但是，我不希望它始終處於100％的高度。整個事情應該會增長，直到達到瀏覽器窗口大小。非常感謝！ – Sakutard

嘗試添加位置：固定;在'內容'類中。看看如果這對你有用。

來源

2016-04-22 14:24:57 Pushpendra

你想讓它滾動

，所以我告訴你，這是滾動，但之後100vh（在這種情況下，你沒有給div"content"屏幕的整個高度），這是max-height你沒給內容如果你把max-height到也許20vh你會看到它的工作原理

來源

2016-04-22 14:25:47 DanyCode

使用此：

.dyn-height { 
    width:100px; 
    max-height:250px; 
    overflow-y:auto; 
}

Refe R：http://jsfiddle.net/q4CqZ/6/

解決你的問題：

.content { 
 
    width: 100px; 
 
    max-height: 250px; 
 
    overflow-y: auto; 
 
}

<div class="content"> 
 
    Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
    <br>Content 
 
</div>

來源

2016-04-22 14:34:31

當達到最大高度時做一個div滾動？

回答

相關問題