html - efficient and responsive way of text alignment bottom -

-

i trying position"the answer thee" text bottom of page, works.

the problem arises when resize screen "big text" , "answer text" falls out of alignment "big text" element full height (depending on text amount). "answer text" not set height responsive height depending on size of content area "big text"

link fiddel here

html

<head>   <link href="https://get.gridsetapp.com/35679/" rel="stylesheet" /> </head>  <li class="aside-open-close active">   <a class="aside-opener" href="#">q1. question here.</a>   <div class="slide">     <div class="columns">        <div class="d1-d3">         <p>one</p>         <p>two</p>         <p>three</p>         <p class="answer-box">three - answer three</p>       </div>        <div class="d4-d6 grey-border">         <p>big text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text           herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig           text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig           text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig           text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig           text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig           text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig text herebig           text herebig text herebig text herebig text herebig text here</p>       </div>      </div>   </div> </li>

css

.aside-opener {   font-size: 16px !important;   font-weight: 600 !important; }  .answer-box {   display: flex;   align-items: flex-end;   /* width: 100%; */   height: 290px; }  .grey-border {   border: 1px solid rgba(68, 68, 68, .54);   margin-top: 15px; }  .grey-border p {   padding: 0 10px 0 10px;   font-size: 16px;   font-weight: 600;   line-height: 19px; }

the image bellow correct, got set height, need height responsive or 100%

enter image description here

you need nested flexbox columns.

nested child 'sectionsinside yourlineeds flex-container withflex-direction:column`.

the .columns section given display:flex (each child flex:1) children queal height.

once have achieved can push final paragraph (answer text) bottom of column margin-top:auto.

* {    margin: 0;    padding: 0;  }  li {    display: flex;    flex-direction: column;  }  .slide {    flex: 1;    display: flex;    flex-direction: column;  }  .columns {    flex: 1;    display: flex;  }  .d1-d3 {    flex: 1;    display: flex;    flex-direction: column;  }  .aside-opener {    font-size: 16px !important;    font-weight: 600 !important;    background: lightgrey;  }  .answer-box {    margin-top: auto;    text-align: right;  }  .grey-border {    border: 1px solid rgba(68, 68, 68, .54);    flex: 1;  }  .grey-border p {    padding: 0 10px 0 10px;    font-size: 16px;    font-weight: 600;    line-height: 19px;  }
<ul>    <li class="aside-open-close active">      <a class="aside-opener" href="#">q1. question here.</a>      <div class="slide">        <div class="columns">            <div class="d1-d3">            <p>one</p>            <p>two</p>            <p>three</p>            <p class="answer-box">three - answer three</p>          </div>            <div class="d4-d6 grey-border">            <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. aspernatur labore qui tenetur officia, hic illum fugit deleniti</p>          </div>          </div>      </div>    </li>  </ul>

jsfiddle demo


Comments

Post a Comment

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

-
i trying work entity inside request method of spring boot application. entity in project , pom.xml has dependencies it. why error message?: org.hibernate.unknownentitytypeexception: unable locate persister: com.ric.bill.model.bs.par package com.ric.web; import java.util.concurrent.atomic.atomiclong; import javax.persistence.entitymanager; import javax.persistence.persistencecontext; import net.sf.ehcache.cachemanager; import net.sf.ehcache.management.cache; import net.sf.ehcache.management.cachestatistics; import org.hibernate.stat.statistics; import org.springframework.beans.factory.annotation.autowired; import org.springframework.boot.autoconfigure.domain.entityscan; import org.springframework.cache.annotation.enablecaching; import org.springframework.transaction.annotation.enabletransactionmanagement; import org.springframework.transaction.annotation.propagation; import org.springframework.transaction.annotation.transactional; import org.springframework.web.bind.annotati
Read more

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

-
i implementing go program uses bufio.scanner , bufio.writer have packaged code follows package main import ( "fmt" "player/command" "strings" ) func main() { //enter code here. read input stdin. print output stdout commands.scanner.scan() { //scan new line , send comand variable check command exist or not input := strings.split(strings.trim(commands.scanner.text(), " "), " ") command := input[0] if command == "" { fmt.printf("$ %s:", commands.pwd) continue } if !commands.commands[command] { commands.throwerror("cannot recognize input.") } else { commands.execute(command, input[1:], nil) } fmt.printf("$ %s:", commands.pwd) } } i using init.go file in main package follows package main import ( "flag" "player/sourc
Read more

c - double free or corruption (fasttop) -

-
this code reads null terminated string file (file containing null terminated strings & should provide index wanted string). error: *** error in `./main': double free or corruption (fasttop): 0x090a4a80 *** aborted code: char *tmp_realloc=null; char *sstring=null; int i=1; /*set file pointer point string*/ fseek(fh,index,seek_set); sstring=(char*)malloc(sizeof(char)); if(sstring == null) return null; tmp_realloc=sstring; while( (*(sstring+i-1)=(char)fgetc((file*)fh)) != 0x0 ) { /*reallocate more memory*/ tmp_realloc=(char*)realloc((char*)sstring,++i); /*if not same address copy old new & set old point new*/ if(tmp_realloc != sstring){ strcpy((char*)tmp_realloc,(char*)sstring); free(sstring); sstring=tmp_realloc; } } could tell me pointer causing issue (& reason) ? remove part /*if not same address copy old new & set old point new*/ if(tmp_realloc != sstring){ strc
Read more