Position of DIV relative to another with dynamic content

Question

Position of DIV relative to another with dynamic content

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

I have two divs on my page, one class="rodape" and another class="content" .

The first is the footer of the page, and adjusts its position relative to bottom of the fixed contents of the page without problems.

However, the second div loads dynamic content (by checking Javascript , displayed at the end of the question). If the content is equal to or less than the fixed content, no problem. But if it is larger, the div ropadé does not move accordingly.

Hereistheexcerptofcssforeachelement:

.rodape{background-color:#013852;height:380px;width:100%;margin-top:30px;position:absolute;}.content{display:none;float:right;margin-right:5%;width:35%;margin-top:2px;padding-left:5%;padding-bottom:20px;border-left:#CCCsolid1px;}

Thedivcontentisinitiallydisplay:none,becauseitdependsonthevideofinishingactionontheside(theleftsideofthescreenhasaplayer)tobedisplayed:

<script>varmyVideo=document.getElementById("myVideo"); 
    function endFunction() {
        myVideo.width = 495;
        myVideo.height = 324;
        document.getElementById('content').style.display = "inline-block";
    }
    function playFunction() {
        myVideo.width = 720;
        myVideo.height = 445;
        document.getElementById('content').style.display = "none";
    }
</script>

And the table that is displayed is not exactly dynamic (it is inserted in HTML initially), but its display depends on a PHP query, something like this:

<?php
    switch($r['tipo_resposta']){
        case '1': //exibe a tabela
        break;

        case '2': //exibe um input text
        break;

        default:
    }
?>

php javascript html css div

asked by anonymous 08.01.2016 / 16:00

2 answers

0

I think if you used flexbox it would be better in this case, it would look like something of type:

HTML

<div class="main">
    <div class="content">content</div>
    <div class="rodape">rodape</div>
</div>

CSS

*{margin:0;padding:0;} /*reset básico*/
.main{
    display:flex;
    flex-direction:column;
    width:100%;
    height:100%; /*ou o tanto que você quiser*/
}
.content, .rodape{
    display:flex;
    align-items:center;
    justify-content:center;
    background:red;
}
.content{
    flex-grow:1;
    background:green;
}

12.01.2016 / 12:54

PDO - Problem with FetchAll how to configure the eclipse IDE to fully read a laravel project 5

score 2 · Accepted Answer

Attempts to change .rodape to:

.rodape {
   background-color: #013852;
   height: 380px;
   width: 100%;
   margin-top: 30px;
   position: static;
   bottom: 0;
}

Edited

I was not satisfied with .content being as float , do the following, put any div between div content and div footer, where div is applied style:

.clear { 
    clear: both
}

Theoretically, with this change, your div fault% will always be immediately below the div content, having to do something different if you want it to always be at the bottom of the page.