如何在不将其位置设置为绝对位置的情况下设置弹性框的高度?
How to set the height of a flex box without setting its position to absolute?
我需要将 height: 50px
的维度分配给
.panelDraggable__header
.panelDraggable__info
.panelDraggable__footer
使用以下代码我无法设置高度,如果您尝试检查 .panelDraggable__header
它的计算值为 18px。
唯一的办法是当我将位置调整为绝对位置时,这会破坏我的布局。
- 如何解决这个问题?
- 一般来说,向弹性框添加正确尺寸的最佳方法是什么?
- 我应该改用
flex-basis
吗?
#panelDevTools {
position: fixed;
top: 25px;
left: 50px;
width: 260px;
height: 300px;
background-color: yellow;
}
.panelDraggable {
display: flex;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.panelDraggable__header {
order: 0;
background-color: greenyellow;
height: 50px;
}
.panelDraggable__info {
order: 1;
background-color: lightseagreen;
height: 50px;
}
.panelDraggable__content {
order: 3;
background-color: slategrey;
}
.panelDraggable__footer {
order: 4;
background-color: blueviolet;
height: 50px;
}
<div data-ntv-type="PanelDevTools" class="panelDraggable" id="panelDevTools" widgetid="panelDevTools">
<div id="panelDevTools__info" class="panelDraggable__info">Tools for developement</div>
<div id="panelDevTools__content" class="panelDraggable__content">
<div id="cnt-inner" style="height:800px;width:50px;background-color:red;"></div>
</div>
<div id="panelDevTools__footer" class="panelDraggable__footer ">Footer</div>
<div id="panelDevTools__header" class="panelDraggable__header">
<div id="panelDevTools__title" class="panelDraggable__title">Developer Tools</div>
<div id="panelDevTools__handle" class="panelDraggable__handle"></div>
<div id="panelDevTools__help" class="panelDraggable__help"></div>
</div>
</div>
只需使用 min-height 而不是 height 因为你实际上高度是灵活的但至少 50px
#panelDevTools {
position: fixed;
top: 25px;
left: 50px;
width: 260px;
height: 300px;
background-color: yellow;
}
.panelDraggable {
display: flex;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.panelDraggable__header {
order: 0;
background-color: greenyellow;
min-height: 50px;
}
.panelDraggable__info {
order: 1;
background-color: lightseagreen;
min-height: 50px;
}
.panelDraggable__content {
order: 3;
background-color: slategrey;
}
.panelDraggable__footer {
order: 4;
background-color: blueviolet;
min-height: 50px;
}
<div data-ntv-type="PanelDevTools" class="panelDraggable" id="panelDevTools" widgetid="panelDevTools">
<div id="panelDevTools__info" class="panelDraggable__info">Tools for developement</div>
<div id="panelDevTools__content" class="panelDraggable__content">
<div id="cnt-inner" style="height:800px;width:50px;background-color:red;"></div>
</div>
<div id="panelDevTools__footer" class="panelDraggable__footer ">Footer</div>
<div id="panelDevTools__header" class="panelDraggable__header">
<div id="panelDevTools__title" class="panelDraggable__title">Developer Tools</div>
<div id="panelDevTools__handle" class="panelDraggable__handle"></div>
<div id="panelDevTools__help" class="panelDraggable__help"></div>
</div>
</div>
我需要将 height: 50px
的维度分配给
.panelDraggable__header
.panelDraggable__info
.panelDraggable__footer
使用以下代码我无法设置高度,如果您尝试检查 .panelDraggable__header
它的计算值为 18px。
唯一的办法是当我将位置调整为绝对位置时,这会破坏我的布局。
- 如何解决这个问题?
- 一般来说,向弹性框添加正确尺寸的最佳方法是什么?
- 我应该改用
flex-basis
吗?
#panelDevTools {
position: fixed;
top: 25px;
left: 50px;
width: 260px;
height: 300px;
background-color: yellow;
}
.panelDraggable {
display: flex;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.panelDraggable__header {
order: 0;
background-color: greenyellow;
height: 50px;
}
.panelDraggable__info {
order: 1;
background-color: lightseagreen;
height: 50px;
}
.panelDraggable__content {
order: 3;
background-color: slategrey;
}
.panelDraggable__footer {
order: 4;
background-color: blueviolet;
height: 50px;
}
<div data-ntv-type="PanelDevTools" class="panelDraggable" id="panelDevTools" widgetid="panelDevTools">
<div id="panelDevTools__info" class="panelDraggable__info">Tools for developement</div>
<div id="panelDevTools__content" class="panelDraggable__content">
<div id="cnt-inner" style="height:800px;width:50px;background-color:red;"></div>
</div>
<div id="panelDevTools__footer" class="panelDraggable__footer ">Footer</div>
<div id="panelDevTools__header" class="panelDraggable__header">
<div id="panelDevTools__title" class="panelDraggable__title">Developer Tools</div>
<div id="panelDevTools__handle" class="panelDraggable__handle"></div>
<div id="panelDevTools__help" class="panelDraggable__help"></div>
</div>
</div>
只需使用 min-height 而不是 height 因为你实际上高度是灵活的但至少 50px
#panelDevTools {
position: fixed;
top: 25px;
left: 50px;
width: 260px;
height: 300px;
background-color: yellow;
}
.panelDraggable {
display: flex;
-webkit-flex: auto;
-ms-flex: auto;
flex: auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.panelDraggable__header {
order: 0;
background-color: greenyellow;
min-height: 50px;
}
.panelDraggable__info {
order: 1;
background-color: lightseagreen;
min-height: 50px;
}
.panelDraggable__content {
order: 3;
background-color: slategrey;
}
.panelDraggable__footer {
order: 4;
background-color: blueviolet;
min-height: 50px;
}
<div data-ntv-type="PanelDevTools" class="panelDraggable" id="panelDevTools" widgetid="panelDevTools">
<div id="panelDevTools__info" class="panelDraggable__info">Tools for developement</div>
<div id="panelDevTools__content" class="panelDraggable__content">
<div id="cnt-inner" style="height:800px;width:50px;background-color:red;"></div>
</div>
<div id="panelDevTools__footer" class="panelDraggable__footer ">Footer</div>
<div id="panelDevTools__header" class="panelDraggable__header">
<div id="panelDevTools__title" class="panelDraggable__title">Developer Tools</div>
<div id="panelDevTools__handle" class="panelDraggable__handle"></div>
<div id="panelDevTools__help" class="panelDraggable__help"></div>
</div>
</div>