jquery - How to make parent div's height scale to its children? -


i want make message box centered vertically x, if more content added message box. tried wrapping message , x in div called tips , setting message div top: -50% did not seem work. css or jquery thing? tried adding overflow: hidden no luck.

css

body{     background: gray; }  /*    tips   */ .tooltips{     width: 600px;     margin: auto; }  .tip-icon{     position: absolute;     right: 0px;     height: 40px;     width: 40px; }  .tips{     position: relative; }  /*    message    */ .tip-message{     position: absolute;     background: #fff;     padding: 10px 40px;     top: -50%;     width: 400px;  }  .arrow-right {     position: absolute;     top: 50%;     margin-top: -20px;     right: -50px;     width: 0;      height: 0;      border-top: 20px solid transparent;     border-bottom: 20px solid transparent;      border-left: 50px solid #fff; } 

https://jsfiddle.net/z7ou07rl/

i solved jquery

var toolheight = $('.tip-message').height();  $('.tip-icon').css('top', (toolheight/2)-1); 

https://jsfiddle.net/z7ou07rl/2/


Comments

Popular posts from this blog

javascript - gulp-nodemon - nodejs restart after file change - Error: listen EADDRINUSE events.js:85 -

Fatal Python error: Py_Initialize: unable to load the file system codec. ImportError: No module named 'encodings' -

javascript - oscilloscope of speaker input stops rendering after a few seconds -