DIV容器(位置:固定)如何获得它的高度和宽度？(使用%表示单位)
DIV容器(位置:固定)如何获得它的高度和宽度？(使用%表示单位)
提问于 2018-06-11 02:39:50
我想知道如何才能获得一个具有Position: fit的DIV容器的子容器，以适合父容器。我正在尝试让div "text-manager“完全适合它的父级"top-bar”。
谢谢!
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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-06-11 02:58:41
似乎有一个user agent style sheet被应用于p标记，它的margin被设置为1em。下面的代码可以工作，另外避免给fixed position元素指定固定的宽度和高度，让它们根据内容调整宽度和高度
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>
Stack Overflow用户
发布于 2018-06-11 02:55:04
在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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50786933
复制相关文章
相似问题