Css Divs溢出

Question

我有2個div，第一個div必須適應關於內容的高度，第二個div必須是高度的剩餘。 的第二個div必須滾動顯示所有項目 這是模板

這裏我舉的例子JSFiddle link 我不想的JavaScript，CSS只

<div class="tbl"> 
    <div class="header"> 
    <p>1</p> 
    <p>2</p> 
    </div> 
    <div class="body"> 
    <div class="in-body"> 
     <p>3</p> 
     <p>4</p> 
     <p>5</p> 
     <p>6</p> 
     <p>7</p> 
     <p>8</p> 
     <p>9</p> 
     <p>10</p> 
    </div> 
    </div> 
</div> 

Answer 1

這。我讓第二個div至少是窗口高度的35％。如果您希望第二個div的最小高度更高或更低，請調整包裝紙上的65vh。 （100vh是視口，什麼是不包裝高度是第二個div高度）。

body { 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    width: 35%; 
 
    max-height: 65vh; 
 
    position: relative; 
 
} 
 
.first, 
 
.second { 
 
    width: 100%; 
 
    color: white; 
 
    padding: 15px; 
 
    box-sizing: border-box; 
 
} 
 
.first { 
 
    background-color: green; 
 
} 
 
.second { 
 
    background-color: blue; 
 
    position: absolute; 
 
    height: calc(100vh - 100%); 
 
    top: 100%; 
 
    overflow-y: auto; 
 
}

<div class="wrapper"> 
 
    <div class="first"> 
 
    kitsch flannel direct trade listicle ramps truffaut. 
 
    </div> 
 
    <div class="second"> 
 
    Brunch fingerstache bespoke squid neutra. Cred hella meh, slow-carb kale chips fashion axe vinyl keytar banjo butcher ethical affogato taxidermy. Bicycle rights venmo lomo truffaut. Art party kickstarter vice, truffaut yr 90's farm-to-table. Banh mi try-hard 
 
    distillery, next level mumblecore jean shorts sustainable drinking vinegar squid banjo 3 wolf moon. Slow-carb waistcoat fashion axe, try-hard kinfolk flexitarian hella pitchfork semiotics truffaut blue bottle stumptown. Asymmetrical skateboard distillery 
 
    chambray. 
 
    </div> 
 
</div>