html - 最小高度和位置:绝对不能一起工作?
问题描述
我正在制作一个网站并为它定义了一个标题标签。我已经分配了一个最小高度的标题并将其相对定位。但是当我分配position: absolute
它的内容时,标题标签不会根据内容增加它的高度。
header {
background-color: aqua;
display: block;
position: relative;
min-height: 100px;
overflow: display;
}
.firstpart,
.secondpart {
position: absolute;
}
.firstpart {
top: 100px;
left: 300px;
}
.secondpart {
top: 100px;
right: 300px;
}
<header>
<div class="firstpart">
<h1>My Name</h1>
<h2>Student</h2>
</div>
<div class="secondpart">
<h1>Welcome to my website.</h1>
<h2>Want to give a feedback?</h2>
</div>
</header>
标题保持 100 像素的高度,第一部分和第二部分显示在其下方。当我删除绝对定位并一一添加内容时,标题会根据内容增加其高度。任何人都可以帮忙吗?
解决方案
推荐阅读
- reactjs - 如何重新组织此 JSON 以在 Google React Charts 烛台格式中工作?
- c# - C# asp.net web api将字节保存为pdf
- rest - 有没有办法在 Fluentd 中使用过滤器参数从 rest api 端点提取数据
- c# - Visual Studio Windows 窗体设计器不允许移动 SplitContainer 的垂直边框
- javascript - 添加到我的 index.html 文件中的 Webpack Babel 脚本需要是 src="/main.js" 但是是 src="main.js"。如何正确配置它?
- python - 运行 Flask 应用程序后,Celery 任务会在后台运行两次,为什么?
- php - 仅在嵌入视频中插入 adblock
- python - 从 DF 内部删除列表 - Pandas - python
- c - 为什么指针a的值改变时指针b的值不变
- smtp - Postfix/Dovecot SMTP setup throwing "undefined array key 3"