Блог

Главная - Вопросы по программированию - Размещение кнопки в левом нижнем углу div независимо от p

Размещение кнопки в левом нижнем углу div независимо от p

#html #css

#HTML #css

Вопрос:

Я пытаюсь поместить кнопку в левом нижнем углу содержащего div, независимо от того, как изменяется текст над ней, но все, что я пробовал, либо не работает, либо помещает кнопку относительно ЭКРАНА, а не DIV.

 #becomememberform {
  position: relative;
  bottom: 0;
  left: 0;
}

#pagelanding_calltoaction {
  width: calc(100% - 500px);
  height: 100%;
  padding: 20px;
  float: left;
  position: relative;
} 
 <div id="pagelanding_calltoaction">
  <h1>Title</h1>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum massa id nisi consequat vulputate sit amet et dui.
  </p>
  <form method="get" action="/kontakt" id="becomememberform">
    <button id="becomemember" type="submit" style="width:80%; padding:20px;"><h2>Bliv medlem</h2></button>
  </form>
</div>

Как мне заставить кнопку постоянно находиться в левом нижнем углу #pagelanding_calltoaction вместо экрана? Извиняюсь, если об этом спрашивали раньше, каждый другой ответ, который я нашел, пытается поместить его относительно экрана, а не содержащего div.

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

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

Ответ №1:

Вот код для установки положения кнопки в левом нижнем углу div. Вам нужно установить относительную оболочку формы, а форму — в абсолютное положение.

 #becomememberform {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
}

#pagelanding_calltoaction {
  width:calc(100% - 500px);
  height:100%;
  padding:20px 20px 200px;
  float:left;
  position:relative;
}

вот ссылка на codepen для проверки: https://codepen.io/atitmistry89/pen/MWEKved

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

1. Идеально! Это сработало! Большое вам спасибо

Ответ №2:

Это то, что вы ищете?

 #becomememberform {
  position: fixed;
  bottom: 0;
  left: 0;
}

#pagelanding_calltoaction {
  width: calc(100% - 500px);
  height: 100%;
  padding: 20px;
  float: left;
  position: relative;
} 
 <div id="pagelanding_calltoaction">
  <h1>Title</h1>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris bibendum massa id nisi consequat vulputate sit amet et dui.
  </p>
  <form method="get" action="/kontakt" id="becomememberform">
    <button id="becomemember" type="submit" style="width:80%; padding:20px;"><h2>Bliv medlem</h2></button>
  </form>
</div>

Ответ №3:

 #pagelanding_calltoaction {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

Попробуйте добавить этот стиль вместо вашего, единственное редактирование — изменить положение с относительного на абсолютное и добавить ширину 100%.

Метки: