Гибкое направление: столбец; работает по-разному в Chrome и Firefox
body {
margin: 0;
padding: 0;
}
.bigContainer {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(0, 255, 60);
}
.smallContainer {
display: flex;
flex-direction: column;
position: absolute;
width: 25%;
height: 100%;
background-color: rgb(255, 255, 255);
align-items: center;
right: 0;
}
.profile {
display: flex;
flex-direction: column;
align-items: center;
height: 45%;
}
.meow {
font-size: larger;
font-weight: bolder;
padding: 10px 10px 0 10px;
}
.bio {
/* margin-top: 2px; */
font-weight: 700;
/* margin-bottom: 2px; */
}
.foto {
height: 100%;
border-radius: 50%;
background-color: aqua;
}
.details {
width: 85%;
text-align: justify;
}<div class = "bigContainer">
<div class = "smallContainer">
<div class = "profile">
<img src = "https://robohash.org/test" class = "foto" />
<span class = "meow">Meow Meow Meow</span>
<p class = "bio">Meow Meow Meow Meow Meow Meow</p>
</div>
<div class = "details">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam,
doloremque aperiam itaque officia error expedita cupiditate
excepturi laboriosam labore veniam sit, minima ullam porro repellat
ducimus possimus obcaecati tenetur voluptatem.
</p>
</div>
</div>
</div>когда я открываю это в Firefox, все кажется нормально, работает нормально, но открывая это в Chrome или в Opera GX, div деталей перекрывается с div профиля, размер изображения отличается от размера Firefox. Я попытался установить верхний предел поля, чтобы разделить их, но в Firefox это выглядит странно со слишком большим пространством посередине. Я делаю что-то не так или это нужно обрабатывать по-разному в разных браузерах?
Ответы 1
Удаление position: absolute заставляет его работать правильно, а также, чтобы показать содержимое справа, я добавил justify-content: end в родительский контейнер.
Вот как это выглядит сейчас:
body {
margin: 0;
padding: 0;
height: 100vh;
background: red;
}
.bigContainer {
display: flex;
justify-content: end;
align-items: center;
width: 100%;
height: 100%;
background-color: rgb(0, 255, 60);
}
.smallContainer {
flex-direction: column;
width: 25%;
height: 100%;
background-color: rgb(255, 255, 255);
align-items: center;
right: 0;
overflow-y: scroll;
}
.profile {
display: flex;
flex-direction: column;
align-items: center;
}
.meow {
font-size: larger;
font-weight: bolder;
padding: 10px;
}
.bio {
font-weight: 700;
}
.foto {
width: 100px;
border-radius: 50%;
background-color: aqua;
}
.details {
width: 85%;
text-align: justify;
}<div class = "bigContainer">
<div class = "smallContainer">
<div class = "profile">
<img src = "https://robohash.org/test" class = "foto" alt = "Profile Picture">
<span class = "meow">Meow Meow Meow</span>
<p class = "bio">Meow Meow Meow Meow Meow Meow</p>
</div>
<div class = "details">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam, doloremque aperiam itaque officia error expedita cupiditate exceptuofficialriosam labore veniam sit, minima ullam porro repellat ducimus possimus obcaecati tenetur voluptatem.
</p>
</div>
</div>
</div>Спасибо, это сработало, но почему в Chrome он ведет себя по-другому при использовании Absolute. Если вы можете, пожалуйста, объясните мне это
Существует множество причин, почему абсолютная позиция действует таким образом по отношению к. браузер. И Chrome, и Firefox имеют разные свойства и компоненты стиля. Вы также можете заметить небольшую разницу в ширине полосы прокрутки, которая также может иметь значение.
это работает, но высота большого контейнера не равна полной высоте, когда установка высоты на 100% ничего не дает, а установка на 100vh дает ту же проблему
попробуйте добавить height: 100%; к body.
я сделал, это тоже не сработало
Я отредактировал свой ответ, проверьте, сработало ли это
детальный блок находится внизу
Я подозреваю, что виновата ширина
.smallContainer...