如何让标题自动调整其高度以适应其内容？

Posted 2023-03-05

技术标签:

【中文标题】如何让标题自动调整其高度以适应其内容？【英文标题】：How to get the header to auto adjust its height to its content? 【发布时间】：2022-01-23 08:34:50 【问题描述】：

使用 flexbox，我用填充和底部边框线设置了链接的样式，但边框线显示在标题线之外，如何让链接及其底部边框线完全位于标题内？

容器不应该自动调整以适应其内容吗？

* 
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1rem;
  margin: 0px;
  padding: 0px;


body 
  display: flex;
  flex-flow: column;
  height: 100vh;
  background-color: whitesmoke;


body>header,
body>footer 
  flex: 0 0 auto;
  background-color: white;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;
  /* padding: 0.25rem; */


body>header .link 
  color: blue;
  border-bottom: 2px solid transparent;
  outline: 0;
  padding: 0.25rem;
  text-decoration: none;


body>header .link:hover,
body>header .link:focus 
  border-bottom: 2px solid blue;


body>header .link.title 
  font-size: larger;
  font-variant: small-caps;


body>main 
  flex: 1 1 auto;
  overflow: auto;

<body>
  <header>
    <a href="#" class="link title">One</a>
    <a href="#" class="link">Two</a>
    <a href="#" class="link">Three</a>
    <a href="#" class="link">Four</a>
    <a href="#" class="link">Five</a>
  </header>
  <main></main>
  <footer>Footer</footer>
</body>

【问题讨论】：

【参考方案1】：

花了一段时间敲打我的头后，我终于找到了方法......我只需要设置标题的display: flex;，就像它工作一样，不需要指定标题的尺寸、边距或填充，我是一个快乐的露营者！

* 
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1rem;
  margin: 0px;
  padding: 0px;


body 
  display: flex;
  flex-flow: column;
  height: 100vh;


body>header,
body>footer 
  flex: 0 0 auto;
  display: flex;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;


body>header .link 
  color: blue;
  border-bottom: 2px solid transparent;
  outline: 0;
  padding: 0.5rem;
  text-decoration: none;


body>header .link:hover,
body>header .link:focus 
  border-bottom: 2px solid blue;


body>main 
  flex: 1 1 auto;
  background-color: whitesmoke;

<body>
  <header>
    <a href="#" class="link">One</a>
    <a href="#" class="link">Two</a>
    <a href="#" class="link">Three</a>
    <a href="#" class="link">Four</a>
    <a href="#" class="link">Five</a>
  </header>
  <main></main>
  <footer>Footer</footer>
<body>

【讨论】：

【参考方案2】：

您应该尝试将padding-left: 0.25rem 而不是padding: 0.25rem 放在选择器body>header .link 下。如下：

* 
  box-sizing: border-box;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 1rem;
  margin: 0px;
  padding: 0px;


body 
  display: flex;
  flex-flow: column;
  height: 100vh;
  background-color: whitesmoke;


body>header,
body>footer 
  flex: 0 0 auto;
  background-color: white;
  border-top: 1px solid lightgray;
  border-bottom: 1px solid lightgray;


body>header .link 
  color: blue;
  border-bottom: 2px solid transparent;
  outline: 0;
  padding: 0.25rem 0.25rem 0 0.25rem;
  text-decoration: none;
  border


body>header .link:hover,
body>header .link:focus 
  border-bottom: 2px solid blue;


body>header .link.title 
  font-size: larger;
  font-variant: small-caps;


body>main 
  flex: 1 1 auto;
  overflow: auto;


header 
  min-height: 30px;

<body>
  <header>
    <a href="#" class="link title">One</a>
    <a href="#" class="link">Two</a>
    <a href="#" class="link">Three</a>
    <a href="#" class="link">Four</a>
    <a href="#" class="link">Five</a>
  </header>
  <main></main>
  <footer>Footer</footer>
</body>

希望它能解决您的问题。

【讨论】：

您的想法是正确的，因为我想要的是底部边框位于标题行的正上方，但是当您这样做时，底部边框仅延伸到左侧的文本之外并且没有空间在文本和底部边框之间，我想在链接周围创建空间，并通过使用填充我还让底部边框在文本之前和之后延伸。 @JorgeZ 你能解释得更好一点吗，因为我无法正确理解你在说什么。我想我明白你在说什么，但你能解释一下吗？我想要的是类似于pub.dev/packages/pdf 上的菜单查看菜单“自述文件 | 更改日志 | 示例 | 安装 | 版本 | 分数” 我已经编辑了我的答案，是否满足您的需要。让我知道它是否不能解决您的问题。在敲了一阵头之后，我终于找到了方法......只需将标题的显示设置为 flex display: flex; 我已经发布了答案。【参考方案3】：

如果你想让你的父元素适合它的子元素，那么试试display:auto

【讨论】：

不能这样做，因为我使用 flexbox 作为显示。【参考方案4】：

尝试在标题中添加填充底部。我刚刚在沙盒中尝试了这个，它似乎对我有用。

header
  padding-bottom: 10px;

【讨论】：

我也尝试过填充，但我希望标题自动调整到其内容的高度。【参考方案5】：

因为您已经为 body > header .link 定义了填充，所以边框会消失。

您可以为<header>添加填充或定义高度，问题将得到解决。

例如：（将padding:0.5rem添加到<header>标签）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * 
        box-sizing: border-box;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        font-size: 1rem;
        margin: 0px;
        padding: 0px;
      

      body 
        display: flex;
        flex-flow: column;
        height: 100vh;
        background-color: whitesmoke;
      
      
      body > header 
        padding:0.5rem
      

      body > header,
      body > footer 
        flex: 0 0 auto;
        background-color: white;
        border-top: 1px solid lightgray;
        border-bottom: 1px solid lightgray;
        /* padding: 0.25rem; */
      

      body > header .link 
        color: blue;
        border-bottom: 2px solid transparent;
        outline: 0;
        padding: 0.25rem;
        text-decoration: none;
      

      body > header .link:hover,
      body > header .link:focus 
        border-bottom: 2px solid blue;
      

      body > header .link.title 
        font-size: larger;
        font-variant: small-caps;
      

      body > main 
        flex: 1 1 auto;
        overflow: auto;
      
    </style>
  </head>
  <body>
    <header>
      <a href="#" class="link">One</a>
      <a href="#" class="link">Two</a>
      <a href="#" class="link">Three</a>
      <a href="#" class="link">Four</a>
      <a href="#" class="link">Five</a>
    </header>
    <main></main>
    <footer>Footer</footer>
  </body>
</html>

【讨论】：

我试过了，它确实有效，但我希望标题自动调整其高度以适应其内容。您应该使用margin 而不是padding。您也不需要向<header> 添加填充/边距如果我在页眉上使用边距，那么页眉会与文档的边缘分开，我不希望这样。如果我在链接上使用边距，则底部边框不会越过链接的两侧。

以上是关于如何让标题自动调整其高度以适应其内容？的主要内容，如果未能解决你的问题，请参考以下文章

iframe 自动调整其高度以适应内容高度

如何使节标题中的 UITextView 将其高度调整为其内容

是否可以制作一个 UILabel、UITextView 或类似的东西，它总是在不截断的情况下调整其高度以适应其在 Interface Builder 中的内容？

自动调整UICollectionView高度以调整其内容大小

如何调整 UITableViewCell 的大小以适应其内容？

自动调整多个文本区域的高度以适应加载的内容