CODEWITHSUNDEEP
htmlcss
Carlson
Carlson

Reputation: 213

HTML CSS: Fixed Element, Adjust height to TOP

I have a DIV in fixed position on bottom of page.

Problem: if Elements in this Div Box are Wrapped (responsive), the div box is growing its height to bottom, so Im not able to see the other elements.

Hence, I try to adjust the height of the div Element according to "TOP".

  EG: [+++++++++++++++++++++++++++]     <- WideScreen  [Elements]
        ----------------------------------

Problem:  [+++++++++            //Small Screen: Wrapping [Elements]
         ---------------      <- Window ends here
          +++++++++           <- not visible anymore
          +++++++++      ]    
    
    How its should be:
         [+++++++++
          +++++++++
          +++++++++  ]
         ----------------     //Div adjust height to TOP

How isit possible?

Edit:

    <div class="row d-inline-flex" id="bT_dragSystem" style="position: fixed;width: 100vw;z-index: 1;margin: 0;margin-top: calc(100vh - 245px);background: rgba(51,0,255,0.17);padding: 5px;padding-left: 10px;margin-left: -10px;">
        <div class="col" id="bT_dragSection" style="padding: 0;">
            <ul class="d-flex justify-content-center align-items-center align-self-center flex-wrap" id="drag_formElements" style="padding: 0;height: 100%;">
               <li> Elements

Thanks alot!

Upvotes: 0

Views: 1878

Answers (2)

Johannes
Johannes

Reputation: 67799

Don't use margin-top: calc(100vh - 245px); (erase it), but only bottom: 0 for a footer-type fixed element like this. You can use height: 245px if you want (apparently that's the height you wanted), but you don't have to. If not, the height will depend on the contents and padding settings of the element.

Upvotes: 1

Carlson
Carlson

Reputation: 213

Sorry, already found my answer :D

position: fixed; overflow: hidden; bottom: 0;

Upvotes: 0

Related Questions