position: static или relative) работает только если у их родителя фиксированная высота.height: 400px.main-container {
display: flex;
flex-direction: column; /* направление по вертикали (row — по горизонтали) */
margin: 0 auto; /* блок располагается по центру (по горизонтали) */
width: 100%;
max-width: 1600px; /* Максимальная ширина */
min-height: 100vh; /* минимальная высота - высота экрана */
}
.main-container > *{
width: 100% /* иногда у потомков блоках с display: flex, ширина не 100%, поэтому на всяк стоит её выставить вручную */
}
.header {
flex-grow: 1 /* Если flex-direction: column, то элемент растянется на всю свободную высоту; если flex-direction: row — ширину*/
}
.main {
flex-grow: 1 /* Если flex-direction: column, то элемент растянется на всю свободную высоту; если flex-direction: row — ширину*/
}gap: 10px 20px;
const rotateFunc = () => {
let block = document.querySelector('.block')
document.documentElement.style.setProperty("--rotate", "1080deg");
block.style['animation-play-state'] = 'paused'
setTimeout(() => {
block.style['animation-play-state'] = ''
}, 0)
}var myAudio = myAudioHoverBlock[i].querySelector('audio')opacity: 0;
pointer-events: none;
transition: all 0.6s ease;opacity: 1;
pointer-events: auto.container {
max-width: 700px;
margin: 0 auto;
}
.header__video {
position: relative;
border: 1px solid transparent;
transition: all 0.6s ease 0s;
cursor: pointer;
border-radius: 5px;
.header__video_img {
border-radius: 5px;
}
&::before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background-color: #fff;
opacity: 0.9;
border-radius: 5px;
}
&::after {
content: '';
position: absolute;
background-color: red;
z-index: 3;
top: 0;
left: 0;
bottom: 0;
opacity: 0;
pointer-events: none;
transition: all 0.6s ease;
right: 0;
background: url('https://i.postimg.cc/4N82j19c/icon-play.png') center / auto no-repeat;
}
&:hover {
border: 1px solid #000;
&::after {
opacity: 1;
pointer-events: auto
}
}
}</body>, в данном случае.
<body> в wrapper и задать ему нужные стили:<head>
<style>
.wrapper{
min-width: 320px;
overflow: hidden;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrapper">
<!-- всякие штучки -->
</div>
</body><span> поставьте пробел.<div class="block"><span>1</span> <span>2</span> <span>3</span></div>*, *::before, *::after{
box-sizing: border-box;
outline: none;
}select{
border: 2px solid transparent
}
select:focus{
border-color: red
}