内容溢出：自动高度为 header div

Question

我目前遇到一个问题，内容溢出了我的 html 的 header。我尝试使用 css-property 溢出，但将其设置为隐藏或自动并不是我想要实现的。我不想隐藏溢出的内容，我希望内容的高度适合我 header.

的固定高度

有人可以帮忙吗？

下面是一些有问题的示例代码：

body
{
  padding: 5%;
}
h1
{
  color: rgb(0, 32, 96);
  padding-bottom: 10px;
  border-bottom: 5px solid gray;
}
h3
{
  color: rgb(0, 32, 96);
}
.Header
{
  height: 120px;
  border-bottom: 3px solid gray;
}

<div class=Header>
        <h1>Header Sample Text</h1>
        <h3>Sub-Header Sample Text</h3>
        <p>Some Properties I have to display which are overflowing.</p>
</div>

Answer 1

如果您为页眉设置了固定高度，但元素不适合它，则它们与底部边框重叠是正常的。您需要将 height 更改为 min-height，或者将这些元素放置在固定高度之外 div:

最小高度：

body
{
  padding: 5%;
}
h1
{
  color: rgb(0, 32, 96);
  padding-bottom: 10px;
  border-bottom: 5px solid gray;
}
h3
{
  color: rgb(0, 32, 96);
}
.Header
{
  min-height: 120px;
  border-bottom: 3px solid gray;
}

<div class=Header>
        <h1>Header Sample Text</h1>
        <h3>Sub-Header Sample Text</h3>
        <p>Some Properties I have to display which are overflowing.</p>
</div>

或 div 之外：

body
{
  padding: 5%;
}
h1
{
  color: rgb(0, 32, 96);
  padding-bottom: 10px;
  border-bottom: 5px solid gray;
}
h3
{
  color: rgb(0, 32, 96);
}
.Header
{
  min-height: 120px;
  border-bottom: 3px solid gray;
}

<div class=Header>
        <h1>Header Sample Text</h1>
        <h3>Sub-Header Sample Text</h3>
</div>
<p>Some Properties I have to display which are overflowing.</p>

Answer 2

您可以将 margin 属性应用到

h1,h3,p{
margin:5px 0px;}

对于固定高度的内容

body
{
  padding: 5%;
}
h1
{
  color: rgb(0, 32, 96);
  padding-bottom: 10px;
  border-bottom: 5px solid gray;
}
h3
{
  color: rgb(0, 32, 96);
}
.Header
{
  height: 120px;
  border-bottom: 3px solid gray;
}

h1,h3,p{
margin:5px 0px;}

<div class=Header>
        <h1>Header Sample Text</h1>
        <h3>Sub-Header Sample Text</h3>
        <p>Some Properties I have to display which are overflowing.</p>
</div>

内容溢出：自动高度为 header div

Content overflowing: auto height to tall for header div

html

css

height