2016-11-28 127 views
1

我有兩個div爲:對齊兩個div垂直

  1. DIV1和DIV2應低於一個另一個。
  2. DIV2將在底部
  3. DIV1應該調整到上述DIV2
  4. DIV1高度的其餘部分也應該有一個滾動條(DIV2不需要滾動條)

代碼片斷

<div id="outer"> 
 
    <div id="div1" style="position:relative;overflow-y:scroll;width:340px;float:left;display:inline-block"></div> 
 
    <div id="div2" style="float:left;clear:left;display:inline-block"></div> 
 
</div>

我怎麼能 做這個?

+0

添加使用一些代碼爲您檢查 – Abood

+0

你可以發佈你試過的代碼嗎? – GraveyardQueen

+0

你的問題不是關於「垂直對齊兩個div」;它更多地是關於「動態調整垂直排列的div的高度」。 – 2016-11-28 12:54:55

回答

3

Flexbox以此爲生。

.container { 
 
    height: 100px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    outline: 1px red solid; 
 
} 
 

 
.div1 { 
 
    flex-grow: 1; 
 
    overflow-y: scroll; 
 
    width: 340px; 
 
} 
 

 
.div2 { 
 
    border-top: 1px blue solid; 
 
}
<div class="container"> 
 
    <div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 
 
    <div class="div2">I am div 2.</div> 
 
</div> 
 
        

+2

'Flexbox執行此操作爲了生活。'++ – avrahamcool

+0

它確實.... :) + – LGSon

0

要激活overflow-y即滾動條上.div1內容目前它裏面需要overflow它,如下,

#outer{ 
 
    width:100%; 
 
    height:auto; 
 
} 
 
#outer > .div1{ 
 
    width:400px; 
 
    height:250px; 
 
    background:#f2f; 
 
    overflow-y:scroll; 
 
} 
 
#outer > .div2{ 
 
    width:400px; 
 
    height:auto; 
 
    background:#f22; 
 
}
<div id="outer"> 
 
    <div class="div1">Div1 Demo text Demo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo text Demo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo textDemo text.</div> 
 
    <div class="div2">Div2</div> 
 
</div>

+0

@Mounika希望它的作品。 – frnt