html - Fullscreen and auto-height on second element -

-

i'm trying implement image box in html5/css3 showing image , description underneath in fullscreen lightbox. problem have description @ bottom of screen have dynamic height (i.e. don't want description cut) , image take remaining space, constrained max-width , max-height of 100% of remaining space.

my problem bit similar "dynamic-height sticky-footer" problem, except whole content should have 100% height, no more, no less.

i've tried solve problem "table-row technique" because of dynamic height: see http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/ explanation. can't make work. either large image makes table grow out of bounds or can't force description "take" height before image. see fiddle here: https://jsfiddle.net/sprat/ho463toa/

.content {   display: table;   width: 100%;   table-layout: fixed; /* not work with, not work without either */ }  .image-area {   display: table-row;   height: 1px; }  .description-area {   display: table-row;   height: auto; }

so need help. i'm looking pure css solution if it's possible. maybe that's can done flexbox i'm little bit concerned browser support. ideas?

i suggest use flexbox layout. prefixes supports ie10+.

it uses background image instead of inline image.

jsfiddle example

html, body { height: 100%; }  body { margin: 0; }  img {    max-width: 100%;    max-height: 100%;  }  p {    margin: 0;  }  .fullscreen {    position: fixed;    left: 20px; right: 20px; top: 20px; bottom: 20px;  }  .content {    display: flex;    flex-direction: column;    width: 100%;    height: 100%;  }  .image-area {    flex: 1;    position: relative;  }  .image-area:after {    content: "";    display: block;    background: url('//dummyimage.com/1000') center / cover;    position: absolute;    left: 0; right: 0; top: 0; bottom: 0;  }  .description-area {    background: lightblue;  }
<div class="fullscreen">    <div class="content">      <div class="image-area">        <!-- <img src="http://img0.mxstatic.com/wallpapers/f424924e12f269c3dfd65e5be8cda9ba_large.jpeg"> -->      </div>      <div class="description-area">        <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. donec congue et ante id sodales. etiam mollis neque nisi, id maximus tellus condimentum a. duis condimentum erat quis ligula maximus mollis. morbi congue, nunc sit amet suscipit consectetur,          enim tortor lobortis felis, eget aliquam sem tortor quis augue. duis ac viverra urna, non scelerisque leo. nam vel dolor risus. duis feugiat vulputate neque id fermentum. aenean rhoncus libero ipsum, commodo vulputate dui commodo a. maecenas sit          amet pulvinar orci. proin dapibus dui vel justo vulputate, aliquam dui rhoncus. phasellus lacinia venenatis leo, vel facilisis lorem. cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. integer erat ipsum, pharetra          ac tempor et, viverra et nibh.</p>      </div>    </div>  </div>

useful links:


Comments

Post a Comment

Popular posts from this blog

Hatching array of circles in AutoCAD using c# -

-
i beginner in autocad plugins .i have created array of circle using following code. now, have hatch circles in array .how that??how hatch circles @ once? moreover, how can return hatch method , use hatch objects.sorry language.thanks in advance. [assembly: commandclass(typeof(beamsection.class1))] namespace beamsection { public class class1 { //class1 obj = new class1(); [commandmethod("beamatsupport")] public void addlightweightpolyline() { // current document , database document acdoc = application.documentmanager.mdiactivedocument; database accurdb = acdoc.database; promptpointresult ppr = acdoc.editor.getpoint("\nselect starting point "); var ucs = acdoc.editor.currentusercoordinatesystem; point3d startingpt = ppr.value.transformby(ucs); list<double> radius = new list<double>(); radius.add(0.5);
Read more

ios - UITEXTFIELD InputView Uipicker not working in swift -

-
hello trying pop uipickerview view programmatically when user clicks on textfield. have tried doesn't doing anything. isn't working. nothing happening when click textfield class userprofiletableviewcontroller: uitableviewcontroller,uitextfielddelegate,uipickerviewdelegate,uipickerviewdatasource { var itempicker: uipickerview! = uipickerview() @iboutlet weak var gendertxtfield: uitextfield! var gender = ["male","female"] override func viewdidload() { super.viewdidload() gendertxtfield.delegate = self itempicker!.delegate = self itempicker!.datasource = self itempicker!.backgroundcolor = uicolor.blackcolor() self.gendertxtfield.inputview = itempicker } func numberofcomponentsinpickerview(pickerview: uipickerview) -> int{ return 1 } // returns # of rows in each component.. func pickerview(pickerview: uipickerview, numberofrowsincomponent component:
Read more

Python Pig Latin Translator -

-
so have been working on @ codecademy.com while trying learn python. don't know if blind , can't see why won't work or what. here's code won't let me use. function print variable if had typed in , print "empty" if didn't type anything. print "welcome english pig latin translator!" original = raw_input("what's name?") if len(original) > 0 print original else print "empty" if len(original) > 0 else the above lines contains syntax errors. try: if len(original) > 0: else: note added colons, ( : ).
Read more