html - div occupying all the space of a parent -
i have grid (i'm using semantic-ui), left column has fixed width (e.g. 768px
) , right column. want content in right column occupy height (e.g. 768px
) available. stacks , top. see demo: https://jsfiddle.net/evdymapm/1/
in right column have 3 elements:
<div class="ui horizontal divider"> test </div> <div> <div id="about" class="nano"> <div class="nano-content"> <p> 12:34:56: <test> test test <p> 12:34:56: <test> test test <p> 12:34:56: <test> test test <p> 12:34:56: <test> test test </div> </div> </div> <div class="ui divider"></div> <div class="ui action input"> <input type="text" placeholder=""> <button class="ui button">send</button> </div>
first 1 divider, second 1 scrollable area , third 1 divider input. want second element
<div> <div id="about" class="nano"> <div class="nano-content"> <p> 12:34:56: <test> test test <p> 12:34:56: <test> test test <p> 12:34:56: <test> test test <p> 12:34:56: <test> test test </div> </div> </div>
to occupy available space, first element @ top of column, second occupy space (e.g. 90%) , third 1 @ bottom of column.
is possible? how can that?
thanks in advance.
Comments
Post a Comment