英文:
Make div height adjustable to parent div based on previous div height
问题
有两个<div>，一个在另一个下面，第一个<div>包含一个可能有2-3行的标题。
要求第二个<div>，包含描述，将占用父<div>的剩余高度。如果内容很多，应该出现垂直滚动条。滚动条只应用于第二个<div>。
这里可以找到jsfiddle链接: https://jsfiddle.net/6emsjuya/2
代码片段：
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#main-container {
height: 100%;
width: 100%;
}
#fixed-height {
background-color: #ebcaca;
height: 80px;
}
#remaining-height {
background-color: #ebe6e6;
height: calc(100% - 100px);
overflow-y: auto;
}
<div id="main-container">
<div id="fixed-height">
Fixed height
</div>
<div id="remaining-height">
Remaining height 1<br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height
<br>
</div>
</div>
这里，现在第一个<div>的高度是固定的80px。应该是动态的，即根据内容，第一个<div>应该采用相应的高度，第二个<div>将占用剩余的高度，并在需要时出现滚动条。
英文:
There are two divs one below another, here first div will contain title that might have 2 -3 lines.
And the requirement is the second div which will contain the description will take remaining height of the parent div. And if the content is large then vertical scroll should be applicable. Scroll should be applicable to second div only.
Here you can find the jsfiddle link: https://jsfiddle.net/6emsjuya/2
Code snippet:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#main-container {
height: 100%;
width: 100%;
}
#fixed-height {
background-color: #ebcaca;
height: 80px;
}
#remaining-height {
background-color: #ebe6e6;
height: calc(100% - 100px);
overflow-y: auto;
}
<!-- language: lang-html -->
<div id="main-container">
<div id="fixed-height">
Fixed height
</div>
<div id="remaining-height">
Remaining height 1<br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining
height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height
<br>
</div>
</div>
<!-- end snippet -->
Here right now the first div has fixed height 80px. which should be dynamic i.e. based on the content first div should take height and second div will take remaining height with scroll if needed.
答案1
得分: 1
你可以使用弹性布局来实现你期望的效果。
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#main-container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
#fixed-height {
background-color: #ebcaca;
}
#remaining-height {
background-color: #ebe6e6;
overflow-y: auto;
height: 100%;
}
<div id="main-container">
<div id="fixed-height">
固定高度
</div>
<div id="remaining-height">
剩余高度 1<br> 剩余高度 <br> 剩余高度 <br> 剩余高度 <br> 剩余高度 <br> 剩余高度 <br> 剩余高度 <br> 剩余高度 <br> 剩余高度 <br> 剩余高度 <br> 剩余高度 <br> 剩余高度 <br> 剩余高度 <br> 剩余高度 <br> 剩余高度 <br> 剩余高度 <br> 剩余高度 <br> 剩余高度 <br> 剩余高度 <br> 剩余高度
</div>
</div>
英文:
Well you can use flex box to instane you expect.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
html,
body {
height: 100%;
width: 100%;
margin: 0;
}
#main-container {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
#fixed-height {
background-color: #ebcaca;
}
#remaining-height {
background-color: #ebe6e6;
overflow-y: auto;
height: 100%;
}
<!-- language: lang-html -->
<div id="main-container">
<div id="fixed-height">
Fixed height
</div>
<div id="remaining-height">
Remaining height 1<br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining
height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height <br> Remaining height
<br>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论