CODEWITHSUNDEEP
javascripthtmlcssbuttoncss-position
alan smith
alan smith

Reputation: 127

How to position button depending on what content is on the page

I'm having troubles positioning a button on a page with css. I want the button to be fixed at a certain position but when there is a lot of content on the page I want the button to move down.

Firstly I want the button at the bottom of the page when there isn't much content such as the code below which does this:

#Button
{
  position: fixed;
  height:90px;
  width:220px;
  left:16%;
  top:70%;
  border:none;
  background:none;
}

Then when there is lots of content I want the button to move down such as the code below:

#Button
{
  position: absolute;
  height:90px;
  width:220px;
  left:16%;
  padding-top:10%;
  padding-bottom: 13%;
  border:none;
  background:none;
}

Can anyone help? I've looked online but cant make sense of it.

Upvotes: 1

Views: 2338

Answers (3)

sajalsuraj
sajalsuraj

Reputation: 992

use position:relative for the element which you have defined before this button.

Upvotes: 1

Arman Ozak
Arman Ozak

Reputation: 2344

If you define a wrapper block element (a <div> for example) around all your content and put the <button> directly under that element, it is possible to reach the desired result with CSS only.

HTML:

<div id="wrapper">
    <!-- other content goes here -->
    <button id="button">Sample</button>
</div>

CSS:

#wrapper {
    position: relative;
    min-height: 100vh;
}

#button {
    position: absolute;
    bottom: 0;
}

However, I have to warn you about the fact that legacy browsers do not support the vh unit and some others show buggy behavior. Take a look at here before you implement it in your project.

Upvotes: 2

Everton Lenger
Everton Lenger

Reputation: 1446

I don't know your structure, but I'll try to help you.

Let's use the following markup:

<div class="parent">
    <p class="texto">Your text goes here!</p>
    <input type="button" value="OK" />
</div>

To solve your problem, I'd simply use a min-height in the content.

.parent .texto {
  min-height: 100px;
}

In this way, the button will always be in the same position if there isn't much content. And it'll follow the height if there are lots of content.

Snippet:

.parent {
  width: 200px;
  padding: 5px;
  border: 1px solid black;
  float: left;
  margin: 5px;
}
.parent .texto {
  min-height: 100px;
}
<div class="parent">
  <p class="texto">
    Small text!
  </p>
  <input type="button" value="OK" />
</div>

<div class="parent">
  <p class="texto">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi urna, rhoncus vitae hendrerit ut, hendrerit a turpis. Phasellus sed rhoncus augue, eget vehicula neque. Vivamus lobortis, velit vitae maximus porttitor, erat nulla scelerisque est, nec
    sagittis diam diam id nisl. Maecenas dictum lacinia dignissim. Duis eget ligula fermentum, vulputate dui sed, vestibulum ipsum. Duis non consectetur dolor. Nunc urna eros, tincidunt id nisl id, dapibus imperdiet orci. Mauris posuere convallis ullamcorper.
  </p>
  <input type="button" value="OK" />
</div>

Hope it helps!

Upvotes: 2

Related Questions