Detect screen size and apply scroll on responsive element

Question

Detect screen size and apply scroll on responsive element

Navigation

#1 by (0 votes)

0

Iwanttomakeanapplicationwiththefollowingdefinitions,ascreen(responsive),withalistoftitlesforvideolessonontheright,andyoumusthavescroll,wheneverIscrolltheelement,100%doesnottaketheresolution.

<!DOCTYPEhtml><htmllang="pt-BR">
        <head>
            <title>play de video</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">                
            <link href="assets/css/reset.css" rel="stylesheet" type="text/css"/>
            <link href="assets/css/style.css" rel="stylesheet" type="text/css"/>
            < src="assets/js/jquery.js"></>
            <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" type="text/css"/>
        </head>
        <body>   
        <div class="content">
                <header class="main_header">
                    <a href="#"><img itemprop="logo" class="logo" src="assets/images/logo_ead.png" title="Identidade visual" alt="Identidade visual"></a>
                </header>
                <article class="article_left f_left">
                    <section class="content_section f_left">
                        <header class="header_article">
                            <h1 class="title_curso bolder">Curso: Administração.
                                <img class="img_icons" src="assets/images/play_title.png" alt="Imagens de play" title="Imagens de play">
                            </h1>
                            <p class="title_aula bold titleResponse">01 - Iniciando curso de Administração.</p>
                        </header>
                        <section class="content_section_video">
                            <style>.embed-container 
                                { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
                                .embed-container iframe, .embed-container object, .embed-container embed 
                                { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
                            </style>
                            <div class='embed-container video-placeholder-player'>
                                <iframe src="https://www.youtube.com/embed/zRvLr7W41Po"frameborder="0" allowfullscreen></iframe>
                            </div>
                        </section>
                        <progress class="progress_bar">

                        </progress>
                    </section>
                </article>
                <aside class="aside_block f_right">

            <!-- Nesses elementos na qual quero o scroll -->

                    <nav>
                        <ul>
                            <li>
                                <a class="video-thumbnail-player" href="https://www.youtube.com/watch?v=_y7rKxqPoyg" >
                                    <div class="left_block">
                                        <img class="thumbnail" title="" alt="" src="http://img.youtube.com/vi/zRvLr7W41Po/3.jpg"/><h1class="fontblack bolder titleRequest">01 - Iniciando curso de Administração</h1>
                                        <h1 class="fontblack bolder">Conceitos de Administração</h1>
                                    </div>
                                </a>
                            </li>
                <li>
                                <a class="video-thumbnail-player" href="https://www.youtube.com/watch?v=_y7rKxqPoyg" >
                                    <div class="left_block">
                                        <img class="thumbnail" title="" alt="" src="http://img.youtube.com/vi/zRvLr7W41Po/3.jpg"/><h1class="fontblack bolder titleRequest">02 - Iniciando curso de Administração</h1>
                                        <h1 class="fontblack bolder">02 - Conceitos de Administração</h1>
                                    </div>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </aside>
            </div>
            <footer class="content_footer f_clear">
                <p>©2015 - TODOS OS DIREITOS RESERVADOS</p>
            </footer>
            < src="assets/js/s.js"></>
        </body>
    </html>




    body{ overflow: hidden;}
    .container{position: relative; top: 0px; min-height: 100%;}
    .main_header{
        width: 100%;
        height: 90px;
        background: #555454;
    }
    .logo{width: 100%; max-width: 120px; margin: 15px 35px;}
    .content h1{margin: 5px 35px;}
    .content p{margin: 0 60px;}
    .content p img{ margin-bottom: 5px;}
    .content_width{width: 70%;}
    .fontlitgh{ font-size: 14px; font: 'Open Sans', sans-serif; font-weight: 300;}
    .title_curso{ font-size:15px; font:'Open Sans', sans-serif; color: #a4a4a4;}
    .title_aula{font-size:18px; font: 'Open Sans', sans-serif;}
    .content_ligth{width: 70%; height:60px; background: #e4e4e4;}
    .content_video{ float: left; height: 100%; }
    .progress_bar{clear: both; width: 100%; height: 5px; background: #c83d00;}

    .asside_block{width: 30%; height:100%; float:right; color: #FFF; background: #343434; margin-top: -83px;}
    .asside_block ul{ background: #343434; float: left; display: block; margin: 2px;}
    .asside_block li{width: 70%; display:block; background: #e4e4e4; float: right; margin: 5px 10px;}
    .asside_block h1{font-size: 14px !important; margin: 3px 10px 5px 0; float: right;}
    //.asside_block li:hover{ cursor: pointer; background: red;}
    .clear{clear: both;}

    /*ICONS*/
    .img_icons{width: 100%; max-width: 25px;}

    /*-- FOOTER -- */
    .final_footer{ width: 100%; height: 60px; background: red;}
    .final_footer p{text-align: center;}

    /*-- ARTICLE -- */
    .article_left{width: 70%; margin: 0 auto; padding: 0;}
    .content_section{width: 100%;}
    .header_article{height:75px; background:#e4e4e4 url(../images/icons-seta.png) no-repeat -5px 43px; border-left:5px solid #c83d00; }
    .header_article h1{margin: 8px 35px 3px; float: left;}
    .header_article p{margin: 0 60px; float: left; clear: both;}
    .header_article img{ margin: 0px 5px 5px 0px; float: left;}

    .content_section_video{ float: left; width:100%; height: 100%; clear: both;}

    /*PROGRESS BAR*/
    .progress_bar{clear: both; width: 100%; height: 10px; float: left; position:relative; bottom: 0px;}
    progress{display:block; -webkit-appearance: none;}
    progress::-webkit-progress-bar { background: #343434; padding: 2px;}
    progress::-moz-progress-bar { background: #343434; padding: 2px;}
    progress::-ms-progress-bar { background: #343434; padding: 2px;}
    progress::-o-progress-bar { background: #343434; padding: 2px;}

    progress::-webkit-progress-value { -webkit-border-radius: 50px; background:#c83d00;}
    progress::-moz-progress-value { -moz-border-radius: 50px; background:#c83d00;}
    progress::-ms-progress-value { -ms-border-radius: 50px; background:#c83d00;}
    progress::-o-progress-value { -o-border-radius: 50px; background:#c83d00;}

    /*-- ASIDE SIDEBAR -- */
    .thumbnail{float: left; width: 90px; height: 60px; margin: 5px;}
    .aside_block{width: 30%; height:100%; float:right; color: #FFF; background: #343434; overflow-y: scroll;}
    .aside_block ul{ background: #343434; float: left; display: block; margin: 2px;}
    .aside_block li{width: 80%; display:block; background: #e4e4e4; float: right; margin: 5px 10px;}
    .aside_block h1{font-size: 14px !important; margin: 3px 10px 5px 0; float: right;}
    .left_block{width: 100%; float: left;}
    .left_block:hover{width: 100%; float: left; border-left:4px solid #c83d00; cursor: pointer;}

    /*-- FOOTER -- */
    .content_footer{width: 100%; height: 60px; background: #dbdbdb; position: relative; bottom: 0px;}
    .content_footer p{text-align: center; font-size: 0.6em;}

    /* -- STYLE VIDEO YOUTUBE*/



/*outro css - reset*/
*{
    margin: 0;
    padding: 0;
    font-family:'Open Sans', sans-serif;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
html,body{height: 100%;}
/* --FONT - TEXT--*/
.fontzero{font-size: 0px !important; margin: 0 !important;}
.fontwriter{color: #D78484 !important;}
.fontblack{color:#000 !important;}
.ligth{font-weight: 300 !important;}
.bolder{font-weight: 400 !important;}
.small{font-weight: 600 !important;}
.bold{font-weight: 700 !important;}
.small-caps{font-variant: small-caps !important;}

/* -- ICONES -- */
.icons_play{background: url(../..//assets/images/play_title.png) no-repeat center left;}

/* -- FLOATS --*/
.f_left{float: left;}
.f_right{float: right;}
.f_clear{clear: both;}

article, section{
    text-align: center;
}
h1{font-size: 1em; font-weight: 300;}
p{font-size: 0.8em; font-weight: 400; margin-bottom: 10px;}
img{max-width: 100%; vertical-align: middle;}
ul{ list-style: none;}

form{float: left; width: 100%; text-align: left;}
label{float: left; width: 100%; margin-bottom: 20px;}
label .text{font-size: 0.8em; text-transform: uppercase; font-weight: 600; margin-bottom: 6px; display: block; color: #fff;}

javascript jquery rolamento

asked by anonymous 17.06.2015 / 19:25

1 answer

Failed to inject dependencies in Spring [Can not set '' field '' to com.sun.proxy. $ Proxy46] django, change the value of a form field when I select items in another field

score 0 · Accepted Answer

The height of your "aside" does not take the entire resolution, as you have not set a height for the div with the "content" class that is its parent. You set the size for it, your height 100% from the aside starts working.

Test by adding the example below in your css.

.content {
   height: 85%;
}

aside {
 overflow:auto;
}