我有一个 svg 和两个 div,我正在尝试使其成为 2 个 div 和 svg 在您进入网站时占据整个屏幕,但使用 svg 使其变大,因为 css 没有考虑svg 有没有办法让 css 占 svg 占用的空间
我试图设置标题容器的最大高度
我也尝试过调整 2 个 div 的 vh,但在更小或更大的屏幕上,它们会变成不同的尺寸并且不起作用
* {
margin: 0%;
padding: 0%;
}
body {
height: 100000px;
}
.header-container {
width: 100%;
background-color: #3C8DAD;
max-height: 100vh;
}
.header-top {
width: 100%;
height: 50vh;
}
svg {
vertical-align: top;
}
.header-bottom {
width: 100%;
height: 50vh;
background-color: #F5A962;
}
.header-content {
align-items: center;
width: 45%;
height: 300px;
border: 2px red solid;
position: absolute;
left: 25%;
top: 50%;
}
.name {
font-family: 'Titillium Web',sans-serif;
font-size: 40px;
color: white;
}
.job {
font-family: 'Noto Serif',serif;
font-size: 66px;
font-weight: 800;
color: white;
margin-top: 3%;
margin-left: 4%;
}
<div class="header-container">
<div class="header-top">
<div class="header-content">
<div class="name">Andrew Saenger</div>
<div class="job">Front-End Web Developer</div>
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
<path fill="#F5A962" fill-opacity="1" d="M0,160L48,160C96,160,192,288,138.7C384,117,480,75,576,85.3C672,96,768,864,160C960,1056,1152,80C1248,64,1344,1392,112L1440,128L1440,320L1392,320C1344,320,1248,320C1056,960,320C768,672,320C480,384,320C192,48,320L0,320Z"></path>
</svg>
<div class="header-bottom"></div>
</div>