Detect screen size and scroll the responsive element

Question

Detect screen size and scroll the responsive element

Asked 9 years, 6 months ago

Viewed 954 times

0

Detecção do tamanho da tela e aplicar scroll

I want to make an application with the following settings, a screen (responsive),with a list of titles for video classroom on the right, and you need to have scroll,whenever I put the scroll in this element, it doesn’t look like it would, because Height 100% doesn’t get the resolution.

    <!DOCTYPE html>
    <html lang="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"/>
                                        <h1 class="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"/>
                                        <h1 class="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;}

2

It will facilitate help if you put the html code of your page in your question.

– Eduardo Silva

2015/06/17 at 17:27
Put in a little code, and how would you like it to stay?

– lazyFox

2015/06/17 at 17:32
Friends, I am summarizing the code, as soon as it clears up, I put it here.

– Arnaldo

2015/06/17 at 17:37

1 answer

Browser other questions tagged javascript jquery rolling

You are not signed in. Login or sign up in order to post.

by Rafael Lacerda • **444** points · Answer 1 · 2015-06-17T19:04:53+00:00

0

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

Do a test by adding the example below in your css.

.content {
   height: 85%;
}

aside {
 overflow:auto;
}

After making this change the scroll worked, but the footer does not follow the resolution. @Rafael Lacerda

– Arnaldo

2015/06/17 at 19:19
I do not know if it would be possible to do according to the proposal, the video is already adaptive, now the elements are not.

– Arnaldo

2015/06/17 at 19:23
@Arnaldo, this I would have to analyze your code better, run it to see, because just looking at the structure I can’t tell you. I’m kind of on a clock right now, so as soon as I get back I see.

– Rafael Lacerda

2015/06/17 at 19:51