css - Make HTML Element Expand To Fit Content -


i'm writing web app, predominantly in angularjs using css's flexbox of layout, if matters. i've been going crazy on last few hours trying solve problem i'm stuck on.

the problem i'm running follows: there 2 side side divs on page. leftmost div menu must height of document's content or browser window (whichever greater). rightmost div 1 content gets appended dynamically. when program starts, rightmost div less height of browser window (because not have content) application progresses, content gets added such longer browser window.

a jsfiddle shows problem can found by clicking here.

the html structure of fiddle fixed (containers can added should not removed) tremendous simplification of complex application has same basic structure. additionally, set css heights 100% solely because of reading answer, not because know required make work (i want menu start out full screen minimal content, however).

the black div represents menu , yellow div represents 1 holds content. when "click me add content" button clicked, 100 lines of content appended content div makes longer window. desired effect both yellow , black divs expand such yellow div big needs to hold content , black div same height yellow div. instead, happens (as can see) neither black nor yellow divs expand when content added , content flows outside of bounds of yellow div.

i've researched problem best of ability on stackoverflow , elsewhere , no presented solutions appear work type of dynamic content (although may be, , problably am, missing something). such answers this one , this one recommend using min-height property on elements when tried it, black , yellow divs started small (size of content, not full browser height) did expand correctly. basically, when try other people's solutions, appears can either have divs start out small (less full screen) , grow correctly or start out correctly (full screen, though initial content smaller) , don't grow not both (i divs start out correctly , grow fit content). additionally, answers such this one suggest combinations of min-height , height achieve 1 effect or other, not both looking for.

i appreciate can , thank time.

edit:

truncated version, in rush.

i'd ability make 2 side side divs start out full height of browser window when there no content in them. then, when enough content added 1 of divs make larger browser, both divs expand fit available content. jsfiddle available @ this link. problem fiddle yellow , black divs don't expand fit new content when add new content button pushed.

using flexbox came structure seems meet initial criteria.

i added demo in codepen extra-tall 'extender' div can see effect when lot of content added.

* {    margin: 0;    padding: 0;    box-sizing: border-box;  }  html,  body {    min-height: 100%;  }  .wrapper {    display: flex;    flex-direction: column;    border: 1px solid red;    min-height: 100vh;  }  main {    flex-grow: 1;    border: 1px solid red;    height: 100%;    display: flex;  }  .left {    width: 200px;    background: lightblue;    flex: none;  }  .right {    flex-grow: 1;    background: salmon;  }
<div class="wrapper">    <main>      <div class="col left">        <h3>fixed left</h3>      </div>      <div class="col right">        <h3>flexible right</h3>      </div>    </main>  </div>


-

Comments

Post a Comment

Popular posts from this blog

OpenCV OpenCL: Convert Mat to Bitmap in JNI Layer for Android -

there several posts converting mat bitmap using utils.mattobitmap() function. i'm assuming function can called in java layer after importing utils class. i want transfer data memory address pointed uint32_t* bmpcontent; in code below. jniexport void jnicall java_com_nod_nodcv_nodcvactivity_runfilter( jnienv *env, jclass clazz, jobject outbmp, jbytearray indata, jint width, jint height, jint choice, jint filter) { int outsz = width*height; int insz = outsz + outsz/2; androidbitmapinfo bmpinfo; if (androidbitmap_getinfo(env, outbmp, &bmpinfo) < 0) { throwjavaexception(env,"gaussianblur","error retrieving bitmap meta data"); return; } if (bmpinfo.format != android_bitmap_format_rgba_8888) { throwjavaexception(env,"gaussianblur","expecting rgba_8888 format"); return; } uint32_t* bmpcontent; if (androidbitmap_lockpixels(env, outbmp,(void**)&bmpcontent)...
Read more

android - org.xmlpull.v1.XmlPullParserException: expected: START_TAG {http://schemas.xmlsoap.org/soap/envelope/}Envelope -

i trying hit soap api in application login purpose , getting above mentioned error , can 1 tell me going wrong , first time soap apis. here code hit soap :- vector<object> args = new vector<object>(); hashtable<string, object> hashtable = new hashtable<string, object>(); hashtable.put("email", "mss.siddhart28@gmail.com"); hashtable.put("password", "siddharth"); args.add(hashtable); soapserializationenvelope envelope = new soapserializationenvelope( soapenvelope.ver11); envelope.dotnet = true; envelope.xsd = soapserializationenvelope.xsd; envelope.enc = soapserializationenvelope.enc; (new marshalhashtable()).register(envelope); httptransportse androidhttptransport = new httptransportse( "http://tempuri.org/", 15000); androidhttptransport.debug = true; string result = ""; try { soapobject request = new soapobject("http:...
Read more

python - How to remove the Xframe Options header in django? -

i have made page has iframe . inside iframe want show multiple different links article facebook, or news, or youtube video or other possible url. but, due xframe header, unable so. referred following link: https://docs.djangoproject.com/en/1.8/ref/clickjacking/ , django xframeoptionsmiddleware (x-frame-options) - allow iframe client ip but didn't help. my settings.py file's middleware_classes is: middleware_classes = ( 'django.contrib.sessions.middleware.sessionmiddleware', 'django.middleware.common.commonmiddleware', 'django.middleware.csrf.csrfviewmiddleware', 'django.contrib.auth.middleware.authenticationmiddleware', 'django.contrib.auth.middleware.sessionauthenticationmiddleware', 'django.contrib.messages.middleware.messagemiddleware', 'django.middleware.clickjacking.xframeoptionsmiddleware', ) from http://django-secure.readthedocs.org/en/latest/middleware.html , found using ...
Read more