我想知道如何获得一个DIV容器的子容器，其中Position：fixed适合父容器。我正在努力获得div＆＃34; text-manager＆＃34;完全适合它的父母，这是＆＃34; top-bar＆＃34;
谢谢！
body {
margin: 0;
padding: 0;
background-color: #EFEFEF;
font-family: sans-serif;
}
.wrapper {
height: 100vh;
}
.top-bar {
position: fixed;
left: 20%;
width: 100%;
max-width: 1100px;
height: 6%;
background-color: red;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.top-bar .text-manager {
width: inherit;
max-width: inherit;
height: 100%;
background-color: green;
}
.side-bar {
position: fixed;
width: 20%;
height: 100%;
background-color: #2E3E4E;
} <link rel="stylesheet" type="text/css" href="CSS/Homepage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
<title>Cold-Ops Homepage</title>
</head>
<body>
<div class="wrapper">
<div class="top-bar">
<div class="text-manager">
<p>Some more text</p>
</div>
</div>
<div class="side-bar">
</div>
</div>
</body>
答案 0 :(得分：1)
在text-manager div周围添加一个相对位置div，并使text-manager位于绝对位置。
<div style="position: relative;">
<div class="text-manager" style="position: absolute;top:0; left:0;height:100%;">
<p>Some more text</p>
</div>
</div>
body {
margin: 0;
padding: 0;
background-color: #EFEFEF;
font-family: sans-serif;
}
.wrapper {
height: 100vh;
}
.top-bar {
position: fixed;
left: 20%;
width: 100%;
max-width: 1100px;
height: 6%;
background-color: red;
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.top-bar .text-manager {
width: inherit;
max-width: inherit;
height: 100%;
background-color: green;
}
.side-bar {
position: fixed;
width: 20%;
height: 100%;
background-color: #2E3E4E;
}
p {
margin: 0;
} <link rel="stylesheet" type="text/css" href="CSS/Homepage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
<title>Cold-Ops Homepage</title>
</head>
<body>
<div class="wrapper">
<div class="top-bar">
<div style="position: relative;">
<div class="text-manager" style="position: absolute;top:0; left:0;height:100%;">
<p>Some more text</p>
</div>
</div>
</div>
<div class="side-bar">
</div>
</div>
</body>
答案 1 :(得分：1)
似乎user agent style sheet已应用于p标记，其中margin的{{1}}被设置。以下代码有效，另外避免给1em位置元素赋予固定的宽度和高度，让它们根据内容调整宽度和高度
fixedbody {
margin: 0;
padding: 0;
background-color: #EFEFEF;
font-family: sans-serif;
}
.wrapper {
height: 100vh;
}
.top-bar {
position: fixed;
left: 20%;
width: 100%;
max-width: 1100px;
height: 6%;
background-color: red;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.top-bar .text-manager {
width: inherit;
max-width: inherit;
height: 100%;
background-color: green;
}
.top-bar .text-manager p {
margin: 0;
padding: 0
}
.side-bar {
position: fixed;
width: 20%;
height: 100%;
background-color: #2E3E4E;
}