多虧了
* {
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header,
footer {
background-color: #cffac7;
height: 50px;
}
#parent {
background-color: red;
position: relative;
flex: 1;
}
#aspectRatio {
background-color: #0bf;
position: absolute;
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
max-width: 100%;
max-height: 100%;
aspect-ratio: 3 / 5;
}<header>HEADER</header>
<main id="parent">
<section id="aspectRatio">Aspect 3/5</section>
</main>
<footer>FOOTER</footer>uj5u.com熱心網友回復：
有一種方法可以通過將元素設定為position:fixed.
我能夠做到這一點，盡管沒有使用 flexbox 樣式，但盡管如此：
<body>
<header/>
<main/>
<footer/>
</body>
------------------------
header {
position: fixed;
z-index: 1;
height: 50px;
}
main {
position: fixed;
top: 50px;
height: calc(100% - 100px); <-- total height of header/footer
}
footer {
position: fixed;
z-index: 1;
top: calc(100% - 50px);
height: 50px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/425209.html
上一篇：如何使用JavaScript動態更改CSS媒體查詢樣式？
下一篇：Css網格區域未按預期系結區域