让 div 占用空间，即使它是空的 [重复]答案

【问题标题】：Make a div take space even if its empty [duplicate]让 div 占用空间，即使它是空的 [重复]
【发布时间】：2020-06-15 17:22:16
【问题描述】：

所以我有这些 div

如果您可以看到最后一个没有 sub 值，因此它是空的，但 div 没有占用空间，我尝试 display: block 并且它不起作用。如何让任何 div 占用空间，即使它没有价值

card.js：

import React from 'react';
import styles from '../Card/Card.module.css'

function card ({title,value,subValue,date,unit}) {
    return (
        <div>
            <div className={styles.title}>
            {title}
            </div>
            <div className={styles.in}>
            <div className={styles.value}>
            {value}
            </div>
            <div className={styles.unit}>
            {unit}
            </div>
            </div>  
            <div className={styles.subValue}>
            {subValue}
            </div>
            <div className={styles.date}>
            {date}
            </div>
        </div>
    )
}

export default card;

overview.js

import React from 'react';
import Card from '../../components/widgets/Card/Card';
import styles from '../../pages/Overview/Overview.module.css';

const Overview = (props) => {

    const measurment = [
    { title: "Last Blood Pressure", value: "90/60",unit:"mmhg",subValue:"85 BPM",date:"05/14/2020 04:12"},
    { title: "Last Body Weight", value: "154",unit:"lb",subValue:"13% Fat",date:"05/14/2020 04:12"},
    { title: "Last SpO2", value: "98",unit:"%",subValue:"85 BPM",date:"05/14/2020 04:12"},
    { title: "Last Glucose", value: "200",unit:"mg/dl",subValue:" ",date:"05/14/2020 04:12"}
]

return(
    <div style={{display: 'flex', justifyContent:'flex-end'}} >        
      {
        measurment.map(measurment => {
          return (
            <div  className={styles.cards}>
              <Card
                title={measurment.title}
                value={measurment.value}
                unit = {measurment.unit}
                subValue={measurment.subValue}
                date={measurment.date}
              />
            </div>

          );
        })
      }
    </div>
  )
};
export default Overview;

css:

.title {
    color:grey;
    font-size: 12px;
    text-align: left;
}

.value{
    font-size: 32px;
    margin-top: 6px;
    text-align: center;
}

.subValue {
    text-align: right;
    margin-right: 10px;
    display: block;
}

.date {
    color:lightslategrey;
    text-align: right;
    display:flex;
    float: right;
    margin-right: 10px;
    font-size: 11px;
}

card.css：

.cards{
    margin:1em;
    cursor:pointer;
    min-height: 120px;
    min-width:190px;
    border-radius: 10px;
    background-color:white;
    border:1px solid #57c0e8;
    padding-left: 0.4rem;
    padding-top: 0.3rem;
    margin-top: 7%;
}

我的沙盒：

https://codesandbox.io/live/Rgw3MK

【问题讨论】：

你能在你的帖子中分享渲染的 ("minimal reproducible example") HTML 和 CSS，虽然看看这是通过 React 渲染的可能很有用，这是一个CSS 问题等脚本在很大程度上是无关紧要的。您的浏览器看到的 HTML（在脚本完成后）很重要，它使我们更容易提供实用的解决方案。
我分享了完整的代码不是更好吗？你可以访问它，你可以在我的沙箱中编辑它
不，不是。 “沙盒”是一个外部站点（问题应该是自包含的，尽管外部站点可能会作为奖励）并且您有很多与问题无关的代码。问题越好，答案就越好（通常），我们在答案中重现您的问题所要做的工作越少，您（通常）得到的答案就越多。这完全是您的选择，我不会拒绝投票或投票结束（尽管其他人显然有），我提供我认为有用的建议，以帮助您获得更好的答案并为您的问题提供更多帮助。

标签： javascript css reactjs

【解决方案1】：

尝试在 CSS 中将 min-height 添加到 .subValue。

【讨论】：

我想过，但我不想为 div 设置固定高度，我希望它在有内容且没有内容时采用正常高度
如果元素为空，浏览器会将其视为height: 0。我说min-height 的原因是，如果元素高度在任何时候增加，那么它将采用其继承的高度。

【解决方案2】：

实际上，您想要这样做的名称是placeholder，您可以通过多种方式做到这一点，但我更喜欢使用名称为empty 的伪类：

.the-div-maybe-vanish:empty {
  height: 30px; /* as what you want */
  width: 30px; /* as what you want */
}

这是使用范围：

【讨论】：

请注意 :placeholder 类，如果元素中只有空格（换行符等），它不会算作空。
@JakeParis，感谢您的提示。
@AmerllicA 所以我试着像你说的那样给 subValue 一个空属性，但也没有用：/你能在沙箱里试试吗？