Margin between 2 elements, one of which has "position: fixed;"

Question

Here is the JSFiddle to better understand my problem. When either one of the 2 lists separated by the yellow divider becomes long the vertical scroll bar of the browser appears, which is fine. However, when you scroll down to the very bottom the text Example_2.1 will not be seen, because it's hidden by the ATTENTION! box, which has a position: fixed; value.

.divider {
  border-bottom: 2px solid #fec303;
  margin-top: 15px;
  margin-bottom: 25px;
}

.meanings_and_examples {
  display: flex;
  flex-direction: column;
}

ol.circle {
  list-style-type: none;
}

li {
  line-height: 1.6;
}

ol.circle>li {
  counter-increment: item;
  margin-bottom: 2px;
  margin-left: 2.5em;
}

ol.circle>li::before {
  margin-right: 1em;
  margin-left: -2.7em;
  content: counter(item);
  background: #1f2c60;
  border-radius: 100%;
  color: white;
  width: 1.7em;
  text-align: center;
  display: inline-block;
}

ul {
  list-style-type: none;
  padding-bottom: 10px;
  padding-left: 2.5em;
}

.meaning {
  font-family: Tahoma, Geneva, sans-serif;
  width: auto;
  text-align: left;
  color: #1f2c60;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
  font-size: 3vw;
  font-weight: 700;
}

.example {
  width: auto;
  text-align: left;
  font-style: italic;
  font-weight: 400;
}

.example_translated {
  width: auto;
  text-align: left;
  color: #5d78e5;
}

.comment_box {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: fixed;
  bottom: 0;
  text-align: left;
  background: #fff8e5;
}

.comment_title {
  font-family: Verdana, Geneva, sans-serif;
  color: rgba(231, 237, 22, 0.58);
  margin-top: 8px;
  margin-left: 10px;
  text-shadow: 0 0 0.5em #f92504, 0 0 0.5em #f92504, 0 0 0.5em #f92504;
  font-size: 3vw;
  font-weight: 700;
}

.comment_text {
  width: auto;
  font-family: Tahoma, Geneva, sans-serif;
  color: #1f2c60;
  margin: 15px 10px 20px;
  text-shadow: none;
  font-size: 2vw;
  font-weight: 400;
}


  
    Text_1
    
      
        Example_1.1
      
    
    Text_2
    
      
        Example_2.1
        Example_2.2
      
    
  





  
    Text_1
    
      
        Example_1.1
      
    
    Text_2
    
      
        Example_2.1
      
    
  



  ATTENTION!
  
  Comment: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...

How do i set a margin above the ATTENTION! box so that the last line of the list is always seen? It's essential that parameters of the list itself (like intervals between lines or paragraphs) stay the same as they are now.

Thank you!

user_1172189 · Answer

Here's the way you can do it with JS. What this does is gets the height of the comment-box and then sets the margin on the last meaning div.

// Need to set an id on the comment-box. Now we select it.
let comment_box = document.getElementById('comment-box');
// Get the comment_box calculated height
let comment_box_height = comment_box.clientHeight;
// Gather all of the .meaning divs.
let meaning_array = document.querySelectorAll('.meaning');
// get the last meaning div from the node list.
let last = [].slice.call(meaning_array).pop();
// set the margin on the last meaning div.
last.style.marginBottom = comment_box_height + 'px';

.divider {
  border-bottom: 2px solid #fec303;
  margin-top: 15px;
  margin-bottom: 25px;
}

.meanings_and_examples {
  display: flex;
  flex-direction: column;
}

ol.circle {
  list-style-type: none;
}

li {
  line-height: 1.6;
}

ol.circle>li {
  counter-increment: item;
  margin-bottom: 2px;
  margin-left: 2.5em;
}

ol.circle>li::before {
  margin-right: 1em;
  margin-left: -2.7em;
  content: counter(item);
  background: #1f2c60;
  border-radius: 100%;
  color: white;
  width: 1.7em;
  text-align: center;
  display: inline-block;
}

ul {
  list-style-type: none;
  padding-bottom: 10px;
  padding-left: 2.5em;
}

.meaning {
  font-family: Tahoma, Geneva, sans-serif;
  width: auto;
  text-align: left;
  color: #1f2c60;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
  font-size: 3vw;
  font-weight: 700;
}

.example {
  width: auto;
  text-align: left;
  font-style: italic;
  font-weight: 400;
}

.example_translated {
  width: auto;
  text-align: left;
  color: #5d78e5;
}

.comment_box {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: fixed;
  bottom: 0;
  text-align: left;
  background: #fff8e5;
}

.comment_title {
  font-family: Verdana, Geneva, sans-serif;
  color: rgba(231, 237, 22, 0.58);
  margin-top: 8px;
  margin-left: 10px;
  text-shadow: 0 0 0.5em #f92504, 0 0 0.5em #f92504, 0 0 0.5em #f92504;
  font-size: 3vw;
  font-weight: 700;
}

.comment_text {
  width: auto;
  font-family: Tahoma, Geneva, sans-serif;
  color: #1f2c60;
  margin: 15px 10px 20px;
  text-shadow: none;
  font-size: 2vw;
  font-weight: 400;
}


  
    Text_1
    
      
        Example_1.1
      
    
    Text_2
    
      
        Example_2.1
        Example_2.2
      
    
  





  
    Text_1
    
      
        Example_1.1
      
    
    Text_2
    
      
        Example_2.1
      
    
  



  ATTENTION!
  
  Comment: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...

The other way, as suggested is just set a static margin to the last meaning div. To do that, you'll have to wrap them in a container so you can use the pseudo :last-child selector e.g.:

.meaning:last-child {
    margin-bottom: 120px /* or whatever height you decide */
}

user_2912141 · Answer

You can wrap your HTML code in a div and give it a margin-bottom like below:

.divider {
  border-bottom: 2px solid #fec303;
  margin-top: 15px;
  margin-bottom: 25px;
}

.meanings_and_examples {
  display: flex;
  flex-direction: column;
}

ol.circle {
  list-style-type: none;
}

li {
  line-height: 1.6;
}

ol.circle > li {
  counter-increment: item;
  margin-bottom: 2px;
  margin-left: 2.5em;
 }

ol.circle > li::before {
  margin-right: 1em;
  margin-left: -2.7em;
  content: counter(item);
  background: #1f2c60;
  border-radius: 100%;
  color: white;
  width: 1.7em;
  text-align: center;
  display: inline-block;
 }

ul {
  list-style-type: none;
  padding-bottom: 10px;
  padding-left: 2.5em;
}

.meaning {
  font-family: Tahoma, Geneva, sans-serif;
  width: auto;
  text-align: left;
  color: #1f2c60;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
  font-size: 3vw;
  font-weight: 700;
}

.example {
  width: auto;
  text-align: left;
  font-style: italic;
  font-weight: 400;
}

.example_translated {
  width: auto;
  text-align: left;
  color: #5d78e5;
}

.comment_box {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: fixed;
  bottom: 0;
  text-align: left;
  background: #fff8e5;
}

.comment_title {
  font-family: Verdana, Geneva, sans-serif;
  color: rgba(231, 237, 22, 0.58);
  margin-top: 8px;
  margin-left: 10px;
  text-shadow: 0 0 0.5em #f92504, 0 0 0.5em #f92504, 0 0 0.5em #f92504;
  font-size: 3vw;
  font-weight: 700;
}

.comment_text {
  width: auto;
  font-family: Tahoma, Geneva, sans-serif;
  color: #1f2c60;
  margin: 15px 10px 20px;
  text-shadow: none;
  font-size: 2vw;
  font-weight: 400;
}




  Text_1

   
      Example_1.1     
   

  Text_2

   
      Example_2.1     
      Example_2.2     
   








  Text_1

   
      Example_1.1     
   

  Text_2

   
      Example_2.1     
   





ATTENTION!

Comment: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...

Margin between 2 elements, one of which has "position: fixed;"

2 Answers