Ensure that the div stays anchored to the bottom of the page while maintaining its

Question

Ensure that the div stays anchored to the bottom of the page while maintaining its

Although I know this question has probably been asked and answered before, I couldn't find any useful solutions to my specific problem...

I'm attempting to position a chat box div at the bottom of a page without being fixed, while still maintaining responsiveness.

In the provided example Here, the chat box is currently aligned next to another div - I would prefer to have some space between them and have the chat box open upwards instead of downwards...

The following images offer a clearer explanation:

Desired layout :

https://i.sstatic.net/3vTIJ.png

Desired layout when chat window is open:

https://i.sstatic.net/tpVOD.png

Current layout :

https://i.sstatic.net/lkw95.png

html css

Answer 1

Answer №1

Could this be the solution you have been searching for? Take a look at this, it might just be the Solution to your code.

I have made some enhancements to your .faq_chat class with some additional styling.

.faq_chat{
    padding: 30px 30px 30px 30px;
    width: 66.66666667%;
    background-color: #d2f1f0 ;
    z-index: 99;
    position: fixed;//my style
    right: 0;//my style
    bottom: 0;//my style
}

Check out this Fiddle

Answer 2

Could this be the solution you have been searching for? Take a look at this, it might just be the Solution to your code.

I have made some enhancements to your .faq_chat class with some additional styling.

.faq_chat{
    padding: 30px 30px 30px 30px;
    width: 66.66666667%;
    background-color: #d2f1f0 ;
    z-index: 99;
    position: fixed;//my style
    right: 0;//my style
    bottom: 0;//my style
}

Check out this Fiddle

Answer 3

Answer №2

#container{
    position: absolute;
    bottom: 0px;
    width: 80%;
}

Answer 4

#container{
    position: absolute;
    bottom: 0px;
    width: 80%;
}

Answer 5

Answer №3

The reason for this issue is due to the css implementation

.faq_cont_left {
    background-color: gray;
    float: left;
    width: 33.3333333%;
    height: 800px;
}

In the above css, the height given is 800px which is significantly higher than the following block css

.faq_cont_right {
    float: right;
    padding: 0;
    width: 66.66666667%;
    height: 200px;
    background-color: blue;
}

The height in this css is set to 200px. To resolve this, you can consider the following options:

Decrease the height of .faq_cont_left to 200px
or increase the height of .faq_cont_right to 800px

I hope this solution helps address your concerns.

Answer 6

The reason for this issue is due to the css implementation

.faq_cont_left {
    background-color: gray;
    float: left;
    width: 33.3333333%;
    height: 800px;
}

In the above css, the height given is 800px which is significantly higher than the following block css

.faq_cont_right {
    float: right;
    padding: 0;
    width: 66.66666667%;
    height: 200px;
    background-color: blue;
}

The height in this css is set to 200px. To resolve this, you can consider the following options:

Decrease the height of .faq_cont_left to 200px
or increase the height of .faq_cont_right to 800px

I hope this solution helps address your concerns.

Answer 7

Answer №4

Discover the power of flex for creating dynamic layouts.

To learn more about Flex, check out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

html, body {
  min-height:100%;
  height:100%;
}

body {
  display:flex;
  flex-direction:column;
  margin:6px;
  background:red;
}

.my-app { /** Alternatively, use "body" for your app container **/
  height:100%;
  display:flex;
  flex-direction:column;
  background:#f5f5f5;
}

.header {
  background:lightgreen;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}

.somecontent {
  background:tomato;
  padding:20px 0;
  margin:10px 0;
  color:#fff;
}

.chat {
  background:lightblue;
  margin:auto 0 5px 0;
  padding:10px;
}

<div class="my-app">
  <div class="header">
    My app name
  </div>
  <div class="somecontent">
    Some content...
  </div>
  <div class="chat">
    My beautiful chat
  </div>
</div>

Answer 8

Discover the power of flex for creating dynamic layouts.

To learn more about Flex, check out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

html, body {
  min-height:100%;
  height:100%;
}

body {
  display:flex;
  flex-direction:column;
  margin:6px;
  background:red;
}

.my-app { /** Alternatively, use "body" for your app container **/
  height:100%;
  display:flex;
  flex-direction:column;
  background:#f5f5f5;
}

.header {
  background:lightgreen;
  height:80px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
}

.somecontent {
  background:tomato;
  padding:20px 0;
  margin:10px 0;
  color:#fff;
}

.chat {
  background:lightblue;
  margin:auto 0 5px 0;
  padding:10px;
}

<div class="my-app">
  <div class="header">
    My app name
  </div>
  <div class="somecontent">
    Some content...
  </div>
  <div class="chat">
    My beautiful chat
  </div>
</div>

Answer 9

Answer №5

The reason for this issue is related to the positioning of the element. To resolve it, you should set a fixed position for your div at the bottom.

position:fixed

I have made the necessary updates to your code example, please review it.

Answer 10

The reason for this issue is related to the positioning of the element. To resolve it, you should set a fixed position for your div at the bottom.

position:fixed

I have made the necessary updates to your code example, please review it.

Ensure that the div stays anchored to the bottom of the page while maintaining its

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Using a single AJAX function to write on various tags

Exploring the differences between the meta viewport and font size

Is it possible to utilize the ternary operator to handle classnames when working with CSS modules?

Minimize the empty space at the top of the website

Swapping out DIVs with jQuery

My CSS seems to be causing an issue and preventing the function from running correctly. Now I just need to

The carousel's slides don't behave properly when swiping or using the slider controls (next/prev)

The current layout of the div is hindering the ability to switch from vertical scrolling to horizontal scrolling

The onclick event seems to be malfunctioning on the website

Is there a way to disable a JavaScript hover effect when the mouse moves away?

Struggling to float <aside> to the left of <article> for proper alignment?

Detecting coordinates (x, y) on a canvas

Using Bootstrap 4 causes text to wrap buttons onto a separate line

Tips for maintaining an active link using CSS

The issue arises when attempting to use Bootstrap date and time components simultaneously

jQuery toggle buttons to show or hide on radio button selection

Can Jquery be utilized to signal a language change?

How can I use JavaScript to show a div upon clicking an input element?

Generating HTML table rows dynamically in Angular based on the number of items stored in a $scope variable

Utilize Pseudo Elements for Designing a Unique Background Overlay