DIV容器(位置：固定)如何获得其高度和宽度？(使用 % 表示单位)

我想知道如何获得带有 Position：固定以适合父容器的 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;
}

<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>

似乎有一个user agent style sheet被应用于p标签，该标签设置了margin1em。下面的代码有效，另外避免给fixed位置元素提供固定的宽度和高度，让它们根据它们的内容调整它们的宽度和高度

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;
}
.top-bar .text-manager p {
margin: 0;
padding: 0
}
.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>

在text-managerdiv 周围添加一个相对位置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>

相关内容

最新更新

热门标签：