使用 Bootstrap 在 Angular 网站上工作并遇到一个小问题。
HTML
<div class="container-fluid">
<div class="row">
<div class="content">
random text
</div>
</div>
</div>
CSS:
.content {
width: 100vw;
height: 100vh;
}
我希望 .content
div 占据整个屏幕大小,仅此而已。但是我上面已经有一个标题元素(固定大小 60 像素),因此使用 100vh 会使其略大于整个屏幕大小(屏幕大小 + 标题)。
如何格式化我的 css,使 .content
div 的高度始终与屏幕大小一致?
最佳答案
您可以使用 CSS calc()
函数从
高度如下,减去
header height
,即 60px
>.content
The calc() CSS function lets you perform calculations when specifying CSS property values.
.content {
width: 100vw;
height: calc(100vh - 60px); /*Add this*/
}
body {
margin: 0;
}
header {
background: red;
height: 60px; /* Take this value and mius below using calc()*/
color: #fff;
}
.content {
width: 100vw;
height: calc(100vh - 60px); /*Add this*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>Header</header>
<div class="container-fluid">
<div class="row">
<div class="content">
random text
</div>
</div>
</div>
关于html - div的响应高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47988098/