jquery - Overflow property in CSS - 


.course_strip{      background-color: rgba(0,0,0,0.65);      height: 44px;      color:#f1f1f1;      line-height: 44px;      vertical-align: middle;      text-transform: uppercase;      font-size: 18px;      letter-spacing: 1px;      font-family: 'segoe ui';  }  .course_strip p{      padding: 0 10px;  }  .course_strip p:hover{      background-color: #000;  }  .course_strip p:active{      background-color: #4caf50;  }    .course_strip .glyphicon{      line-height: 44px;      top: 0px;  }  .course_strip_left p{      float: left;  }  .course_strip_right p{      float: right;  }  .left_container{      width: 20%;      height: 100%;      background-color: #f1f1f1;      padding-top: 20px;      padding-left: 16px;      font-family: 'segoe ui', tahoma, verdana, sans-serif;      font-size: 15px;  }  .left_container h2{      margin-top: -4px;      font-size: 21px;      font-weight: 500;  }  .left_container p{      margin-top: 40px;      padding-left: 1px;      font-weight: 500;  }
<html>  <head>      <title>tutorial</title>      <link rel="stylesheet" href="w3.css">      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">        <!-- jquery library -->      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>        <!-- latest compiled javascript -->      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  </head>  <body>      <div class="course_strip">          <div class="course_strip_left">              <p class="glyphicon glyphicon-home"></p>              <p>html</p>              <p>css</p>              <p>javascript</p>              <p>sql</p>          </div>          <div class="course_strip_right">              <p class="glyphicon glyphicon-search"></p>              <p class="glyphicon glyphicon-globe"></p>              <p>examples</p>              <p>references</p>          </div>      </div>      <div class="left_container">          <h2>html5 tutorial</h2>          <p>html home</p>          <p>html introduction</p>          <p>html editors</p>          <p>html basic</p>          <p>html elements</p>          <p>html attributes</p>          <p>html headings</p>          <p>html paragraphs</p>          <p>html styles</p>          <p>html formatting</p>          <p>html quotations</p>          <p>html comments</p>      </div>      <div class="right_container">      </div>  </body>  </html>

till here, fine me,

but if add, overflow-y: scroll .left_container class in css, left container shifts down bit, introducing strip of white background, not desired. unable find out why adding overflow property left_container shifting down. can please tell me why so? how can resolve it? thanks.

i don't know why, in specific example, adding overflow-y value other inerhit makes .left_container detach margin, know has block-level , visual formatting model.
applying overflow makes behave float:left would. if ever come across explain behavior, i'll here , update.

as far solutions go, easiest way achieve want wrap .left_container , .right_container in custom wrapper (i named .layout-wrapper below) , add existing css:

.layout-wrapper {   padding-left: 20%;   min-height: calc(100vh - 44px); } .layout-wrapper .left_container {   position: absolute;   left: 0;   width: 20%;   height: calc(100% - 44px);   overflow-y: auto; }

notes:

  • you obtain same behavior position:fixed.
  • the same behavior can achieved flexbox , gives large array of options alignment , ordering. opted "classic" block level solution since has better support , else in example using same type of positioning.
  • i changed overflow-y:scroll auto that's matter of preference. can use scroll if prefer see bar.

here is, applied example:

.course_strip{      background-color: rgba(0,0,0,0.65);      height: 44px;      color:#f1f1f1;      line-height: 44px;      vertical-align: middle;      text-transform: uppercase;      font-size: 18px;      letter-spacing: 1px;      font-family: 'segoe ui';  }  .course_strip p{      padding: 0 10px;  }  .course_strip p:hover{      background-color: #000;  }  .course_strip p:active{      background-color: #4caf50;  }    .course_strip .glyphicon{      line-height: 44px;      top: 0px;  }  .course_strip_left p{      float: left;  }  .course_strip_right p{      float: right;  }  .left_container{      width: 20%;      height: 100%;      background-color: #f1f1f1;      padding-top: 20px;      padding-left: 16px;      font-family: 'segoe ui', tahoma, verdana, sans-serif;      font-size: 15px;  }  .left_container h2{      margin-top: -4px;      font-size: 21px;      font-weight: 500;  }  .left_container p{      margin-top: 40px;      padding-left: 1px;      font-weight: 500;  }      .layout-wrapper {    padding-left: 20%;    min-height: calc(100vh - 44px);  }  .layout-wrapper .left_container {    position: absolute;    left: 0;    width: 20%;    height: calc(100% - 44px);    overflow-y: auto;  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>        <div class="course_strip">          <div class="course_strip_left">              <p class="glyphicon glyphicon-home"></p>              <p>html</p>              <p>css</p>              <p>javascript</p>              <p>sql</p>          </div>          <div class="course_strip_right">              <p class="glyphicon glyphicon-search"></p>              <p class="glyphicon glyphicon-globe"></p>              <p>examples</p>              <p>references</p>          </div>      </div>      <div class="layout-wrapper">        <div class="left_container">          <h2>html5 tutorial</h2>          <p>html home</p>          <p>html introduction</p>          <p>html editors</p>          <p>html basic</p>          <p>html elements</p>          <p>html attributes</p>          <p>html headings</p>          <p>html paragraphs</p>          <p>html styles</p>          <p>html formatting</p>          <p>html quotations</p>          <p>html comments</p>        </div>        <div class="right_container">        </div>      </div>


Comments

Post a Comment

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

i running os ububtu 16.04. ultimate goal able run php script cron job every minute. here php script located @ /var/www/html/tests/test/index.php : <?php $directorypath = $_server['document_root']."/tests/test/data/"; echo "directorypath: $directorypath<br><br>";//check $imagefilepathsarray = glob($directorypath . "*.{png,gif}", glob_brace); echo "<br><br>imagefilepathsarray: "; print_r($imagefilepathsarray);//check ?> when open php script in browser visiting url my-ip-address/tests/test/index.php , get: directorypath: /var/www/html/tests/test/data/ imagefilepathsarray:array( [0] => /var/www/html/tests/test/data/pic.png [1] => /var/www/html/tests/test/data/pic.gif ) before writing cron job in crontab file, need check if can run anywhere using terminal . opened ubuntu terminal @ /home/ location, , executed in terminal: sudo php /var/www/html/tests/test/index.php i got following out...
Read more

php - How can i create a user dashboard -

today have questions you, want create user dashboard site, include (obviously), users data, example -email -username -and others stuff how can information, , print them in html page? if can, how can these information via php sessions? shuld use session? example, if user login, , start new session ( session_start() ), how can data print in dashboard? should use php "project"? in advice, have day , thank time!
Read more

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -

i have jquery mobile page fixed full-screen toolbar, data-tap-toggle enabled. straight under toolbar have positioned banner should slide upwards when toolbar hiding , slide downward when toolbar showing. jquery mobile toggles toolbar applying , removing ui-fixed-hidden class - sadly, can't find in documentation of toolbar widget toggle , hide or show event that. how can detect when toolbar toggled, reposition banner? .banner { position: fixed; background-color: darkseagreen; top: 46px; min-height: 48px; width: 100%; text-align: center; line-height: 48px; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1....
Read more