Как остановить движение кнопки после появления больших элементов

Question

Я сделал простой генератор котировок, и моя кнопка перемещается вверх и вниз в зависимости от длины цитаты. Как мне это остановить?

Fiddle

  .btn {
  font-size: 2.5rem;
  text-transform: uppercase;
  color: #3949AB;
  background-color: #fff;
  font-family: 'Oswald', sans-serif;
  padding: .5rem 1rem;
  cursor: pointer;
  border-width: .15em;
  &:hover {
    background-color: #3949AB;
    color: #fff;
    border-style: inset;
  }
}

Когда я поместил свой код в скрипку, я также понял, что фоновое изображение не полностью заполняет фон на более сложных маленьких размеры после нажатия кнопки. Как это возможно? У меня есть окно просмотра до 100.

Answer 1

Вот что я имею в виду:

var quotes = [
  "A man who stands for nothing will fall for anything.", "We are nonviolent with people who are nonviolent with us.", "Don\’t be in a hurry to condemn because he doesn\’t do what you do or think as you think or as fast. There was a time when you didn\’t know what you know today.", "My alma mater was books, a good library… I could spend the rest of my life reading, just satisfying my curiosity", "There is no better than adversity. Every defeat, every heartbreak, every loss, contains its own seed, its own lesson on how to improve your performance next time.", "A race of people is like an individual man; until it uses its own talent, takes pride in its own history, expresses its own culture, affirms its own selfhood, it can never fulfill itself.", "I for one believe that if you give people a thorough understanding of what confronts them and the basic causes that produce it, they’ll create their own program, and when the people create a program, you get action.", "Without education, you’re not going anywhere in this world.", "You don’t have to be a man to fight for freedom. All you have to do is to be an intelligent human being.", "I feel like a man who has been asleep somewhat and under someone else’s control. I feel that what I’m thinking and saying is now for myself. Before it was for and by the guidance of Elijah Muhammad. Now I think with my own mind, sir!"
];

function newQuote() {
  var randomNumber = Math.floor(Math.random() * (quotes.length));
  document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
}

.nav-items {
  display: inline-block;
  list-style: none;
}

.nav-link {
  text-decoration: none;
}

body {
  background-image: radial-gradient(#c9df8a, #f0f7da);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

.btn {
  font-size: 2.5rem;
  text-transform: uppercase;
  color: #3949AB;
  background-color: #fff;
  font-family: 'Oswald', sans-serif;
  padding: .5rem 1rem;
  cursor: pointer;
  border-width: .15em;
  &:hover {
    background-color: #3949AB;
    color: #fff;
    border-style: inset;
  }
}

h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 7rem;
  font-weight: 700;
  color: #3949AB;
  letter-spacing: .2rem;
  text-align: center;
}

img {
  width: 50%;
}

.container {
  margin: auto;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#quoteDisplay {
  font-size: 2rem;
  color: #5C6BC0;
  font-weight: bold;
  text-align: center;
  margin: 1em 0;
  height: 100px;
}

Answer 2

Где бы у вас ни появлялись ваши кавычки, просто оберните их внутри div, и вы можете установить поле кнопки в направлении контейнера кавычек вместо самих кавычек.

Например:

<div class="wrapper">
 <h1>The quote goes here</h1>
</div>
<button></button>

Таким образом, вы можете установить высоту на css для «обертки» и на полях для «кнопки», это должно помочь.

Answer 3

Вы можете просто добавить фиксированную высоту к контейнеру:

#quoteDisplay {
  font-size: 2rem;
  color: #5C6BC0;
  font-weight: bold;
  text-align: center;
  margin: 1em 0;
  height: 90px;
}

Вот рабочий фрагмент:

var quotes = [
  "A man who stands for nothing will fall for anything.", "We are nonviolent with people who are nonviolent with us.", "Don\’t be in a hurry to condemn because he doesn\’t do what you do or think as you think or as fast. There was a time when you didn\’t know what you know today.", "My alma mater was books, a good library… I could spend the rest of my life reading, just satisfying my curiosity", "There is no better than adversity. Every defeat, every heartbreak, every loss, contains its own seed, its own lesson on how to improve your performance next time.", "A race of people is like an individual man; until it uses its own talent, takes pride in its own history, expresses its own culture, affirms its own selfhood, it can never fulfill itself.", "I for one believe that if you give people a thorough understanding of what confronts them and the basic causes that produce it, they’ll create their own program, and when the people create a program, you get action.", "Without education, you’re not going anywhere in this world.", "You don’t have to be a man to fight for freedom. All you have to do is to be an intelligent human being.", "I feel like a man who has been asleep somewhat and under someone else’s control. I feel that what I’m thinking and saying is now for myself. Before it was for and by the guidance of Elijah Muhammad. Now I think with my own mind, sir!"
];
function newQuote(){
var randomNumber = Math.floor(Math.random()*(quotes.length));
document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 10px;
}

.nav-items {
  display: inline-block;
  list-style: none;
}

.nav-link {
  text-decoration: none;
}

body {
  background-image: radial-gradient(#c9df8a, #f0f7da);
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
}

.btn {
  font-size: 2.5rem;
  text-transform: uppercase;
  color: #3949AB;
  background-color: #fff;
  font-family: 'Oswald', sans-serif;
  padding: .5rem 1rem;
  cursor: pointer;
  border-width: .15em;
  &:hover {
    background-color: #3949AB;
    color: #fff;
    border-style: inset;
  }
}

h1 {
  font-family: 'Oswald', sans-serif;
  font-size: 7rem;
  font-weight: 700;
  color: #3949AB;
  letter-spacing: .2rem;
  text-align: center;
}

img {
  width: 50%;
}

.container {
  margin: auto;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#quoteDisplay {
  font-size: 2rem;
  color: #5C6BC0;
  font-weight: bold;
  text-align: center;
  margin: 1em 0;
  height: 90px;
}