我有一个带有全局页眉和页脚(具有动态高度)的页面,并且在页面剩余区域的中心有一张卡片,该卡片根据卡片中的内容而缩小或增大。
卡本身还具有页眉和页脚,我需要在页面上保持可见,而中间的内容是滚动的部分。我最困难的时间试图弄清楚如何完成这项工作。
编辑:我知道我可以通过给卡片内容设置一个最大高度来实现这一点,但是由于全局和卡片页眉和页脚的所有高度都是动态的,所以我不知道在任何给定时间给出的最大高度?还是我需要一个javascript解决方案来完成此任务?
Codepen:https://codepen.io/Yorria/pen/yWaWxg
屏幕截图:
型号:
html,
body {
padding: 0px;
margin: 0px;
background-color: pink;
}
.global-container {
height: 100vh;
display: flex;
flex-direction: column;
}
.card-wrapper {
flex-direction: row;
box-sizing: border-box;
display: flex;
place-content: center;
align-items: center;
flex: 1 1 100%;
max-height: 100%;
overflow-y: auto;
}
.card-wrapper-inner {
flex: 1 1 100%;
box-sizing: border-box;
max-width: 70%;
max-height: 100%;
}
.card {
display: flex;
flex-direction: column;
background-color: white;
padding: 20px;
}
.card-content {
flex: 1;
overflow-y: auto;
background-color: #ddd;
}
/* ignore: forcing overflow */
.overflow-content {
height: 2000px;
}
.global-info {
background-color: green;
margin: 0px;
padding: 16px;
font-size: 20px;
font-weight: bold;
color: white;
}
<div class="global-container">
<div class="global-info">Global Header</div>
<div class="card-wrapper">
<div class="card-wrapper-inner">
<div class="card">
<div>Card Header</div>
<div class="card-content">
<div class="overflow-content">
I want only this content to scroll, and to shrink if it doesn't take up the entire page.
<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec dapibus libero. Cras sollicitudin consectetur nunc, ac faucibus tellus feugiat vel. Morbi sollicitudin, ex eu consectetur pulvinar, nibh elit ullamcorper erat, eu viverra
sem dui eu orci. Mauris auctor dapibus lectus ac iaculis. Vivamus varius enim non dui porttitor condimentum. Pellentesque euismod massa id imperdiet tincidunt. Mauris imperdiet leo in enim malesuada lacinia. Sed eget porta ligula, nec mollis
quam. Nullam viverra ex lorem, eget euismod ligula gravida vel. Vestibulum accumsan lacinia consectetur.
</div>
</div>
<div>Card Footer</div>
</div>
</div>
</div>
<div class="global-info">Global Footer</div>
</div>
答案 0 :(得分:0)
您必须为卡片div设置最大高度,并将卡片内容设置为滚动
此处的笔示例:https://codepen.io/anon/pen/xNEoVQ
html,
body {
padding: 0px;
margin: 0px;
background-color: pink;
}
.global-container {
height: 100vh;
display: flex;
flex-direction: column;
}
.card-wrapper {
flex-direction: row;
box-sizing: border-box;
display: flex;
place-content: center;
align-items: center;
flex: 1 1 100%;
max-height: 100%;
overflow-y: auto;
}
.card-wrapper-inner {
flex: 1 1 100%;
box-sizing: border-box;
max-width: 70%;
max-height: 100%;
}
.card {
display: flex;
flex-direction: column;
background-color: white;
max-height: 70vh;
}
.card-content {
flex: 1;
background-color: #ddd;
overflow: scroll;
height:50vh;
}
/* ignore: the overflow content itself */
.overflow-content {
height: 2000px;
}
.global-info {
background-color: green;
margin: 0px;
padding: 16px;
font-size: 20px;
font-weight: bold;
color: white;
}
答案 1 :(得分:0)
帮助浏览器将整个高度传递到后代容器。他们无法通过.card-wrapper-inner
。
只需将display: flex
添加到该类中即可。该命令将激活align-items: stretch
默认值,该默认值将消耗父级的所有可用高度,并使子级可用。
换一种说法,链中缺少链接。全高不能超过一个水平。通过将.card-wrapper-inner
设置为flex容器,高度规则将从顶部向下传递。
html,
body {
padding: 0px;
margin: 0px;
background-color: pink;
}
.global-container {
height: 100vh;
display: flex;
flex-direction: column;
}
.card-wrapper {
flex-direction: row;
box-sizing: border-box;
display: flex;
place-content: center;
align-items: center;
flex: 1 1 100%;
max-height: 100%;
overflow-y: auto;
}
.card-wrapper-inner {
display: flex; /* new */
flex: 1 1 100%;
box-sizing: border-box;
max-width: 70%;
max-height: 100%;
}
.card {
display: flex;
flex-direction: column;
background-color: white;
padding: 20px;
}
.card-content {
flex: 1;
overflow-y: auto;
background-color: #ddd;
}
/* ignore: forcing overflow */
.overflow-content {
height: 2000px;
}
.global-info {
background-color: green;
margin: 0px;
padding: 16px;
font-size: 20px;
font-weight: bold;
color: white;
}
<div class="global-container">
<div class="global-info">Global Header</div>
<div class="card-wrapper">
<div class="card-wrapper-inner">
<div class="card">
<div>Card Header</div>
<div class="card-content">
<div class="overflow-content">
I want only this content to scroll, and to shrink if it doesn't take up the entire page.
<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec dapibus libero. Cras sollicitudin consectetur nunc, ac faucibus tellus feugiat vel. Morbi sollicitudin, ex eu consectetur pulvinar, nibh elit ullamcorper erat, eu viverra
sem dui eu orci. Mauris auctor dapibus lectus ac iaculis. Vivamus varius enim non dui porttitor condimentum. Pellentesque euismod massa id imperdiet tincidunt. Mauris imperdiet leo in enim malesuada lacinia. Sed eget porta ligula, nec mollis
quam. Nullam viverra ex lorem, eget euismod ligula gravida vel. Vestibulum accumsan lacinia consectetur.
</div>
</div>
<div>Card Footer</div>
</div>
</div>
</div>
<div class="global-info">Global Footer</div>
</div>