CODEWITHSUNDEEP
htmlcsscss-position
pepote
pepote

Reputation: 313

How to position a fixed div under another fixed div?

I am trying to set a fixed div div(menu) directly under another fixed div (header) and the positioning should also work with different screen sizes. I call the "menu" div through JQuery with toggle and it appears under the "header" div. I can do this setting a fixed top value greater than the height of the "header" div but if I do not want the header to have a fixed PX value how do I do this? Any suggestions?

html:

<div id="header">
 <div id="menu">
 </div>
</div>

css:

#header{
  position:fixed
  height:15%;
  width:100%;
  background-color:blue;
}

#dropdown{
  display:none;
  position:fixed;
  top:?
}

Upvotes: 1

Views: 7761

Answers (1)

jenson-button-event
jenson-button-event

Reputation: 18961

Have a wrapper that is fixed, and just have the other 2 divs flow traditionally.

#header-container {
  position:fixed
  height:15%;
  width:100%;
  background-color:blue;
}    
#header, #dropdown {
  width:100%;
}

<div id="header-container">
    <div id="header">
    </div>
    <div id="dropdown">
    </div>
</div>

Upvotes: 2

Related Questions