对齐两个div垂直

我有两个div为：对齐两个div垂直

DIV1和DIV2应低于一个另一个。
DIV2将在底部
DIV1应该调整到上述DIV2
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>

我怎么能做这个？

来源

2016-11-28 MPK

添加使用一些代码为您检查 – Abood

你可以发布你试过的代码吗？ – GraveyardQueen

你的问题不是关于“垂直对齐两个div”;它更多地是关于“动态调整垂直排列的div的高度”。 – 2016-11-28 12:54:55

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>

来源

2016-11-28 11:30:33

'Flexbox执行此操作为了生活。'++ – avrahamcool

它确实.... :) + – LGSon

要激活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>

来源

2016-11-28 11:35:56 frnt

@Mounika希望它的作品。 – frnt

对齐两个div垂直

回答

相关问题