我的网页上有一个标题,它根据视口(viewport)(例如 15vh)更改高度,最小高度为 50 像素。
我想在此页眉中制作一个彩色方 block ,无论用户的视口(viewport)如何,它始终正好是页眉高度的 50%。彩色框中将没有内容。它仅用于样式目的。我知道我不能使用 height: 15%;因为容器中没有内容,因此不会显示任何内容。我无法根据视口(viewport)单位定义框,因为标题并不总是视口(viewport)高度的 15%(由于最小高度分配)。
有什么方法可以用 CSS 实现吗?
这是我的设置:
html,
body {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
.header {
position: relative;
background-color: grey;
border-bottom: 1px solid #CCC;
min-height: 50px;
}
.responsivecontainer {
float: left;
max-width: 20vw;
min-height: 50px;
display: flex;
}
.logo {
margin: auto 0;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.box {
float: left;
height: 50%;
background-color: black;
}
.clearfix {
display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}
.clearfix {
display: block;
}
/* End hide from IE-mac */
/* @end */
<div class="header clearfix">
<div class="responsivecontainer">
<div class="logo">
<img src="http://www.bluebean.ca/logo1.jpg">
</div>
</div>
<div class="box">
<img src="http://www.bluebean.ca/grey.jpg">
</div>
</div>
最佳答案
您可以使用绝对定位来做到这一点。像这样:
html,
body {
padding: 0;
margin: 0;
}
img {
max-width: 100%;
height: auto;
}
.header {
position: relative;
background-color: grey;
border-bottom: 1px solid #CCC;
min-height: 50px;
position: relative;
}
.responsivecontainer {
float: left;
max-width: 20vw;
min-height: 50px;
display: flex;
}
.logo {
margin: auto 0;
z-index:10;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.box {
position:absolute;
top:0;
left:0;
height: 50%;
background-color: black;
width: 100%;
}
<div class="header clearfix">
<div class="box"></div>
<div class="responsivecontainer">
<div class="logo">
<img src="http://www.bluebean.ca/logo1.jpg">
</div>
</div>
</div>
您还需要将 z-index
值设置为大于 box 的值,以使 box 保持在 header 中的元素下方。
关于javascript - CSS - 相对于父容器大小的空彩色容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42596008/