Блог

Главная - Вопросы по программированию - Как сделать так, чтобы верхний div достиг нижнего div для каждого устройства

Как сделать так, чтобы верхний div достиг нижнего div для каждого устройства

#html #css

#HTML #css

Вопрос:

Я пытаюсь исправить CSS моего кода, чтобы верхний div всегда достигал вершины оранжевой строки. Оранжевая линия фиксируется внизу для каждого устройства

CSS div, содержащий оранжевую строку:

 .orangeDiv {
  position: fixed;
  bottom: 0px;
  //height: 25vh;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;

Css выделенного div:

 .highlighted {
  position: absolute;
  bottom: 170px;
  top: 0;
  overflow: hidden;
  min-height: 90px;
  //overflow-y: auto;
  -webkit-overflow-scrolling: touch;

РЕДАКТИРОВАТЬ: я могу изменить css на что угодно, не обязательно абсолютное положение

Ответ №1:

почему для этого нужно использовать абсолютное позиционирование? Я бы предпочел использовать position:relative; и float для достижения этой цели.

Комментарии:

1. Да, я открыт для любых предложений, но оранжевая линия тоже должна быть внизу страницы

Ответ №2:

Если вы присвоите высоте orangeDiv и нижней части выделенного одинаковое значение, вы, вероятно, будете постоянно их касаться

Комментарии:

1. Например, если я установлю их оба равными 70px, тогда оранжевая линия станет выше нижней части страницы…

Ответ №3:

мое решение будет выглядеть примерно так: (возможно, вам потребуется соответствующим образом изменить значения высоты)

 .orangeDiv {
  position:fixed;
  bottom:0px;
  left:0px; 
  height:5vh;
  width:100%;
  background-size:cover;
  background-repeat:no-repeat;
}

.highlighted {
  position:absolute;
  height:95vh; 
  width:80%; 
  left:0px; 
  top:0px; 
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

Комментарии:

1. Привет, я попробовал ваш путь с первой высотой 22, а второй — 78. Теперь он касается оранжевой строки, но под оранжевой строкой есть текст, поэтому он должен был быть внизу страницы. Прямо сейчас, для некоторых устройств он парит в воздухе (добавлено изображение, о котором идет речь), а для некоторых устройств слова обрезаются.

2. вот почему я спросил, нужно ли вам использовать абсолютное / фиксированное позиционирование -> если div всегда должен находиться в нижней части устройства, вы должны использовать фиксированное. Смотрите мой обновленный ответ.

3. Итак, проблема, с которой я сталкиваюсь, заключается в том, что, поскольку в моем случае фиксирована высота 25vh и 75vh для каждого, в некоторых случаях текст обрезается внизу, а в некоторых случаях нет

4. можете ли вы опубликовать полный HTML и css, включая текст, пожалуйста

5. К сожалению, я не могу, но если я установлю высоту в 0 пикселей; тогда я смогу добиться своего результата, когда текст никогда не будет обрезан. однако даже тогда выделенный div не всегда достигает панели. Есть ли способ заставить его достичь этого, когда height = 0px?

Метки: