@SHentai

Как сделать чтобы блок не сползал?

Здравствуйте.

Уже много времени не как не могу допереть, как предотвратить сползание элементов блоки при уменьшение размера странице.
image.gifimage.png вот он сползает, а не должен.
Как видно на гифке, это происходи когда и кнопки смешаются. Как это поправить?
Мне нужно чтобы независимо от того как едут кнопки выше, блок бы не сползал за приделы class body, но думаю по гифке Вам понятно что там не так.

Ссылка на пример: https://codepen.io/Jebati/pen/vWyVKZ

Буду благодарен за любую помощь, спасибо.
  • Вопрос задан
  • 461 просмотр
Решения вопроса 1
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
SHentai,
Я поняла, что не так.

Варианты решения:

1. уменьшайте кнопки (например, заменяйте на значки при разных media), чтобы они всегда умещались в одну строчку
2. задавайте сразу двойную высоту строки с кнопками
3. используйте flex
4. иcпользуйте media queries при разной ширине экрана задавайте разную высоту блокам.

И комбо этих вариантов.

С флексами https://jsfiddle.net/pag705Ln/
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@dsemagin
вместо этого
html {
			overflow: hidden;
		}
		.body{
			margin: 10px;
			padding: 10px;
			background-color: #fff;
			box-shadow: 5px 5px #CCCCCC;
			width: auto;
		  height: calc(100vh - 40px);
		  border: 1px solid #f00;
		  bottom: 40px;
		}


вот это
.body{
		  margin: 10px;
		  padding: 10px;
		  background-color: #fff;
		  box-shadow: 5px 5px #CCCCCC;
		  width: auto;
		  height: calc(100vh - 40px);
		  border: 1px solid #f00;
		  bottom: 40px;
                  overflow: hidden;
		}
Ответ написан
butteff
@butteff
Раз в тысячу лет заправляю свитер в носки
Я просто в .body убрал Ваше значение height с calc и добавил 100vh
И все заработало.

.body{
			margin: 10px;
			padding: 10px;
			background-color: #fff;
			box-shadow: 5px 5px #CCCCCC;
			width: auto;
		  height: 100vh;
		  border: 1px solid #f00;
		  bottom: 40px;
		}
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы