Position of DIV relative to another with dynamic content

Asked

Viewed 1,059 times

2

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

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

However, the second div loads dynamic content (via a check in Javascript, displayed at the end of the question). If the content is of equal height or less than the fixed content, no problem. But, if it is larger, the div ropadé does not move according.

Como fica em conteúdos extensos...

Follows excerpt from css for each element:

.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:#CCC solid 1px;
}

To div content is initially display: none, because it depends on the action of the video ending beside (left side of the screen has a player) to be displayed:

<script>
    var myVideo = 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 the HTML initially), but its display depends on a query PHP, sort of 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

  • why are you using the position Absolute in the footer?

  • @haykou had put Absolute to other pages. In this particular case, I tried to change to relative position, but it made no difference, the problem persisted...

  • if you can put html and css in the example it would be easier, taking position Absolute, and putting a display inline block, with height and width to div . content would increase the size as content.

  • I will add some other information to the question... I saw here that there are more things that are certainly influencing behavior...

2 answers

2


Tries to change the .rodape for:

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

Edited

He hadn’t taken my call .content be as float, Tell you what, put one div any between the div of content and the div footer, where in div the style is applied:

.clear { 
    clear: both
}

Theoretically, with this amendment, its div 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.

  • With this change, the content of DIV content passed forward from the DIV footer, but the position remained the same...

  • @Atoyansk I edited the post with some information that can help you.

0

I believe that if you used the flexbox it would be better in that case, it would look something like:

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;
}

Browser other questions tagged php javascript html css div

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