1

Estou fazendo um site de reserva de atividades ao ar livre e estou com um problema no CSS.

No meu documento aparece sempre uma parte em branco abaixo da imagem, não percebo porquê. No dev tools do Chrome não aparece nada significativo, não consigo descobrir este problema.

E outra coisa: nos comentários, gostaria que quando alguém fizer um comentário, para não prejudicar o layout da página, gostaria que a área de comentários tivesse um scroll, como faço isso?

Segue o código abaixo:

HTML:

<?php
//inclui a BD
include('ligar_bd.php');

session_start();

 $no_session ="";

//id da atividade onde agarra atraves do URL
  $id_activity = $_GET['id'];
  // quero para mostrar toda a informação da atividade para depois estar predefenida no formulario
  //para puder mudar
  $sql = $db->prepare(" SELECT * FROM `Activity` where idActivity = :id ");

  $sql->bindParam(':id', $id_activity);

  $sql->execute();

  $row = $sql->fetchAll(PDO::FETCH_ASSOC);

      if(isset($_POST['commentary'])){

        if(isset($_SESSION['user'])){

          $id_activity = $_GET['id'];


          $user_id = $_SESSION['user']['idUser'];


          $comment = $_POST['comment'];


          $date = date('y-m-d');

            $comment = htmlspecialchars($comment, ENT_QUOTES, 'UTF-8');

            $sql = $db->prepare(" INSERT INTO `Comment` (`idActivity`,`idUser`, `comment`,`date`)
            VALUES (:idActivity,:idUser,:comment,:date)");

            //bind dos parametros, isto para evitar mysql injection
            $sql->bindParam(':idActivity', $id_activity);
            $sql->bindParam(':idUser', $user_id);
            $sql->bindParam(':comment', $comment);
            $sql->bindParam(':date', $date);

            //Executa a query que predefenimos
            $sql->execute();

            $count = $sql->rowCount();

            if ($count > 0){

            $success = "Comment done";

            }else {

             $error_comment = "error on inserting comment";

             var_dump($error_comment);

            }

        }else{

            $no_session = "To make a comment you need to be logged in first";

        }

    }


?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">

        <link rel="stylesheet" type="text/css" href="css/normalize.css">
        <link rel="stylesheet" type="text/css" href="css/Grid.css">
        <link rel="stylesheet" type="text/css" href="css/activity.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,300i,400" rel="stylesheet">
        <title>Adventure</title> 
    </head>



    <body>

        <!-----------HEADER-------------------->
        <header>
            <nav>
            <div class="row">   
                <ul class="main-title">
                <li><h2><?php echo $row[0]['title'];?></h2></li>
                </ul>
            </div> 
            </nav>
        </header>






        <!-------------SECTION LIST-------------->


        <section class="section-post" id="post">


            <div class="row">
                <div class="col span-1-of-2">
                <div class="post-img">
                        <img src="img/hero.jpg">
                    </div>
            </div>

                <div class="col span-1-of-2">


                    <!-- Open The Modal -->
                    <?php
                        echo
                        '
                         <a href="checkout.php?Activity&id='.$row[0]['idActivity'].'"><button class="btn-reservation">Make Reservation</button></a>
                        ';
                    ?>


                    <div class="description">
                        <p><?php echo $row[0]['description'] ?></p></p>
                    </div>

                    <div class="social">
                        <h3>Share with your friends</h3>
                    <ul class="social-icons">
                        <li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
                        <li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
                        <li><a href="" class="social-icon"> <i class="fa fa-rss"></i></a></li>
                        <li><a href="" class="social-icon"> <i class="fa fa-linkedin"></i></a></li>
                        <li><a href="" class="social-icon"> <i class="fa fa-google-plus"></i></a></li>
                    </ul>
                    </div>    



                    <!----COMMENTS-->
                    <ul class="comment-section">


                    <?php 

                      //query para listar as atividades
                      $sql = $db->prepare(" SELECT * FROM `Comment` where `idActivity` = :idActivity ");

                      $sql->bindParam(':idActivity', $id_activity);

                      $sql->execute();

                      $row = $sql->fetchAll(PDO::FETCH_ASSOC);

                      //para cada atividade uso o foreach para 
                      foreach( $row as $value){

                       $id_user = $value['idUser'];

                         $sql = $db->prepare(" SELECT username FROM `user` where `idUser` = :id ");

                         $sql->bindParam(':id', $id_user);

                         $sql->execute();

                         $dados = $sql->fetchAll(PDO::FETCH_ASSOC);


                        echo
                        '


                        <li class="comment user-comment">

                        <div class="info">
                        <a href="#">'.$dados[0]['username'].'</a>
                        <span>'.$value['date'].'</span>
                        </div>

                        <a class="avatar" href="#">
                        <img src="img/avatar_author.jpg" width="35" alt="Profile Avatar" title="Cavaco Silva" />
                        </a>

                        <p>'.$value['comment'].'</p>

                        </li>

                        ';
                      }
                        ?>


                        <li class="write-new">

                            <form  method="POST">

                                <textarea placeholder="Write your comment here" name="comment"></textarea>

                                <div>
                                    <input class="btn-submit" type="submit" name="commentary" value="submit">
                                </div>
                                <?php echo $no_session ?>
                            </form>

                        </li>

                    </ul>

                </div> 
                    </div>

        </section>



        <!---SECTION 8 FOOTER--->
    <footer>


        </footer>

    </body>


</html>

CSS:

* ---------------------------------------------- */
/* BASIC SETUP */
/* ---------------------------------------------- */

/* Isto deve fazer-se sempre para remover qualquer margem, padding, etc */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
}


/* SCROLLBAR */

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #27ae60; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #219251; 
}



/* Selecinar cor, fontes e tamanhos padrão para todo o documento html */
html,
body {
    background-color: #fff;
    color: #555;
    font-family: "Lato";
    font-size: 20px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden; /*isto esconde tudo o que va para alem do eixo x*/
}







/* ---------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ---------------------------------------------- */


.row {
    max-width: 1140px;
    margin: 0 auto;
}


/*Espaço em branco em todas as seccoes*/
section {
    padding: 80px 0;
}


/*-----HEADLINE/TITULOS-----*/


h1, h2, h3 {
    font-weight: 300;
    text-transform: uppercase;
}

h1 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff;
    font-size: 240%;
    word-spacing: 4px;
    letter-spacing: 1px;
}

h2 {
    font-size: 180%;
    word-spacing: 2px;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

h3 {
    font-size: 110%;
    font-weight: 400;
    margin-bottom: 15px;
}






/*-----LINKS-----*/

a:link,
a:visited {
    color: #00BFFF;
    text-decoration: none;
    padding-bottom: 1px;
    -webkit-transition: border-bottom 0.2s, border 0.2s, color 0.2s;
    transition:  border 0.2s, color 0.2s;
}

a:hover,
a:active {
    color: #555;
    border-bottom: 1px solid transparent;
}


/* ----------------------------------------------------------------------------------------------------- */





/* ---------------------------------------------- */
/* HEADER */
/* ---------------------------------------------- */

/* 100vh = 100% viewport */
header {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(64, 110, 142, 0.70)), to(rgba(0, 0, 0, 0.70))), url(img/tumblr_ng88k4nD8U1tv1qiho1_1280.gif);
    background-image: linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)), url(img/tumblr_ng88k4nD8U1tv1qiho1_1280.gif);
    background-size: cover;
    background-position: center;
    height: 27vh;
    background-attachment: fixed;
}




/*-----post----*/
.main-title {
    float: left;
    margin-top: 55px;
    list-style-type: none;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.157);
}

.main-title li h2 {
    display: inline;
    margin: 40px;
    padding: 8px 0;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    list-style: none;
    font-size: 220%;
    font-weight: 300;
    letter-spacing: 2px;
}





/* ---------------------------------------------- */
/* LIST */
/* ---------------------------------------------- */


.post-img {
    margin: -16.3% 0 0 -20%;;
}

.post-img img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.description {
    border-bottom: 1px solid #ccc;
    padding-bottom: 2px;
}


.description p {
    font-size: 80%;
    text-align: justify;
    line-height: 25px;
    letter-spacing: 1px;
    word-spacing: 1px;
}





.btn-reservation {
    width: 100%;
    height: 50px;
    float: right;
    border: 0;
    margin-top: -13%;
    font-size: 100%;
    font-weight: none;
    color: #fff;
    cursor: pointer;
    background-color: #27ae60;
    transition: background-color 0.2s;
    }

.btn-reservation:hover {
    background-color: #219251;
    }







    /* COMMENTS */

    .comment-section{
        margin-top: 10%;
        list-style: none;
        width: 100%;
    }

    .comment{
        width: 100%;
        display: flex;
        margin-bottom: 45px;
        flex-wrap: wrap;
    }

    .comment.user-comment{
        color:  #808080;
    }

    .comment.author-comment{
        color:  #60686d;
        justify-content: flex-end;
    }


    .comment .info{
        width: 17%;
    }

    .comment.user-comment .info{
        text-align: left;
    }

    .comment.author-comment .info{
        order: 3;
    }


    .comment .info a{   /* User name */
        display: block;
        text-decoration: none;
        color: #656c71;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding: 10px 0 3px 0;
    }

    .comment .info span{    /* Time */
        font-size: 11px;
        color:  #9ca7af;
    }



    .comment .avatar{
        width: 8%;
    }

    .comment.user-comment .avatar{
        padding: 10px 18px 0 3px;
    }

    .comment.author-comment .avatar{
        order: 2;
        padding: 10px 3px 0 18px;
    }

    .comment .avatar img{
        display: block;
    }

    .comment.user-comment .avatar img{
        float: right;
    }





    /* comment */

    .comment p{
        width: 100%;
        line-height: 1.5;
        padding: 18px 22px;
        width: 50%;
        position: relative;
        word-wrap: break-word;
    }

    .comment.user-comment p{
        background-color:  #f3f3f3;
    }

    .comment.author-comment p{
        background-color:  #e2f8ff;
        order: 1;
    }

    .user-comment p:after{
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        background-color: #ffffff;
        border: 2px solid #f3f3f3;
        left: -8px;
        top: 18px;
    }

    .author-comment p:after{
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        background-color: #ffffff;
        border: 2px solid #e2f8ff;
        right: -8px;
        top: 18px;
    }




    /* Comment form */

    .write-new{
        width: 93%;
    }

    .write-new textarea{
        color:  #444;
        font: inherit;

        outline: 0;
        border: 1px solid #cecece;
        background-color:  #fefefe;
        overflow: auto;
        width:100%;
        min-height: 80px;
        padding: 15px 20px;
    }

    .write-new img{
        margin-top: 15px;
    }




    @media (max-width: 800px){

        .comment p{
            width: 100%;
        }

        .comment.user-comment .info{
            order: 3;
            text-align: left;
        }

        .comment.user-comment .avatar{
            order: 2;
        }

        .comment.user-comment p{
            order: 1;
        }


        .comment.author-comment{
            justify-content: flex-start;
        }


        .comment-section{
            margin-top: 10px;
        }

        .comment .info{
            width: auto;
        }

        .comment .info a{
            padding-top: 15px;
        }

        .comment.user-comment .avatar,
        .comment.author-comment .avatar{
            padding: 15px 10px 0 18px;
            width: auto;
        }

        .comment.user-comment p:after,
        .comment.author-comment p:after{
            width: 12px;
            height: 12px;
            top: initial;
            left: 28px;
        }

        .write-new{
            width: 100%;
        }
    }


    input {
        padding: 0;
        border: none;
        font: inherit;
        color: inherit;
        cursor: pointer;
      }





/* modal */


.modal-body {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: #219251;
    opacity: 0;
}

.modal-body:target {
    opacity: 1;
}




.btn-submit {
    height: 40px;
    width: 40%;
    font-family: "lato";
    font-weight: 300;
    margin-left: 68.5%;
    margin-top: 10px;
    font-size: 100%;
    text-transform: capitalize;
    cursor: pointer;
    float: left;
    color: #fff;
    background-color: #27ae60;
    transition: background-color 0.2s;
}


.btn-submit:hover {
    background-color: #219251;

}






/* Icons */ 

.social {
    margin-top: 5%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 2px;
}

ul {
    padding:0;
    list-style: none;
}
.social-icon {
    color: #fff;
}
ul.social-icons {
    margin-top: 10px;
}
.social-icons li {
    vertical-align: top;
    display: inline;
    height: 100px;
}
.social-icons a {
    color: #fff;
    text-decoration: none;
}
.fa-facebook {
    padding:20px 24px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    color: #fff;
    background-color: #27ae60;
}
.fa-facebook:hover {
    background-color: #219251;
    color: #fff;
}
.fa-twitter {
    padding:20px 24px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    color: #fff;
    background-color: #27ae60;
    transition: .5s;
}
.fa-twitter:hover {
    background-color: #219251;
    color: #fff;
}
.fa-rss {
    padding:20px 24px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    color: #fff;
    background-color: #27ae60;
    transition: .5s;
}
.fa-rss:hover {
    background-color: #219251;
    color: #fff;
}

.fa-linkedin {
    padding:20px 24px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    color: #fff;
    background-color: #27ae60;
    transition: .5s;
}
.fa-linkedin:hover {
    background-color: #219251;
    color: #fff;
}
.fa-google-plus {
    padding:20px 20px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    color: #fff;
    background-color: #27ae60;
    transition: .5s;
}
.fa-google-plus:hover {
    background-color: #219251;
    color: #fff;
}



/* ---------------------------------------------- */
/* FOOTER */
/* ---------------------------------------------- */

footer {
   background-color: #333;
    padding:30px; 
    font-size: 80%;

Isto é o que aparece, este espaço em branco, a imagem tem 100vh. E gostaria de saber como faço a zona de comentários com scroll, porque quando tentei, bugou um pouco.

inserir a descrição da imagem aqui

5
  • Vc tem um link pra gente acessar o site ou ele está apenas rodando ai localmente?
    – hugocsl
    Commented 10/11/2018 às 18:49
  • ele está rodando localmente mesmo... Commented 10/11/2018 às 19:17
  • E vc quer que a imagem vá até a parte mais escura logo abaixo?
    – hugocsl
    Commented 10/11/2018 às 19:35
  • Esse margin -16.3% na imagem é para ela fica sobre o conteúdo anterior?
    – Sam
    Commented 10/11/2018 às 19:53
  • é sim para ficar sobre o conteudo anterior. Sim @hugocsl quero que a imagem vá até À parte escura embaixo. Commented 10/11/2018 às 20:11

2 Respostas 2

2

O que está gerando esse espaço em branco é a propriedade padding nas section:

/*Espaço em branco em todas as seccoes*/
section {
    padding: 80px 0;
}

O que você pode fazer é remover esse padding apenas na section do post com :not(classe da section), caso as outras precisem mesmo desse padding:

section:not(.section-post) {
    padding: 80px 0;
}

É preciso ajustar também a altura da .row que guarda as divs da imagem e dos comentários, reduzindo a altura pelo margin negativo da imagem:

<div class="row" style="height: calc(100vh - 16.3%)">

E no .col dos comentários reduzir também a altura em 90px:

<div class="col span-1-of-2" style="height: calc(100vh - 90px);">

Para fazer a zona de comentários com scroll automático, ajuste a altura height (também reduzindo para se ajustar na .row) e coloque também overflow na classe .comment-section:

.comment-section{
  margin-top: 10%;
  list-style: none;
  width: 100%;
  overflow: hidden auto;
  height: calc(100% - 250px);
}

No final irá ficar assim como neste exemplo (coloquei um fundo vermelho na coluna dos comentários para ilustrar). Execute em tela cheia:

* ---------------------------------------------- */
/* BASIC SETUP */
/* ---------------------------------------------- */

/* Isto deve fazer-se sempre para remover qualquer margem, padding, etc */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
}


/* SCROLLBAR */

/* width */
::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #27ae60; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #219251; 
}



/* Selecinar cor, fontes e tamanhos padrão para todo o documento html */
html,
body {
    background-color: #fff;
    color: #555;
    font-family: "Lato";
    font-size: 20px;
    text-rendering: optimizeLegibility;
    overflow-x: hidden; /*isto esconde tudo o que va para alem do eixo x*/
}







/* ---------------------------------------------- */
/* REUSABLE COMPONENTS */
/* ---------------------------------------------- */


.row {
    max-width: 1140px;
    margin: 0 auto;
}


/*Espaço em branco em todas as seccoes*/
section:not(.section-post) {
    padding: 80px 0;
}


/*-----HEADLINE/TITULOS-----*/


h1, h2, h3 {
    font-weight: 300;
    text-transform: uppercase;
}

h1 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #fff;
    font-size: 240%;
    word-spacing: 4px;
    letter-spacing: 1px;
}

h2 {
    font-size: 180%;
    word-spacing: 2px;
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: 1px;
}

h3 {
    font-size: 110%;
    font-weight: 400;
    margin-bottom: 15px;
}






/*-----LINKS-----*/

a:link,
a:visited {
    color: #00BFFF;
    text-decoration: none;
    padding-bottom: 1px;
    -webkit-transition: border-bottom 0.2s, border 0.2s, color 0.2s;
    transition:  border 0.2s, color 0.2s;
}

a:hover,
a:active {
    color: #555;
    border-bottom: 1px solid transparent;
}


/* ----------------------------------------------------------------------------------------------------- */





/* ---------------------------------------------- */
/* HEADER */
/* ---------------------------------------------- */

/* 100vh = 100% viewport */
header {
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(64, 110, 142, 0.70)), to(rgba(0, 0, 0, 0.70))), url(img/tumblr_ng88k4nD8U1tv1qiho1_1280.gif);
    background-image: linear-gradient(rgba(0, 0, 0, 0.70), rgba(0, 0, 0, 0.70)), url(img/tumblr_ng88k4nD8U1tv1qiho1_1280.gif);
    background-size: cover;
    background-position: center;
    height: 27vh;
    background-attachment: fixed;
}




/*-----post----*/
.main-title {
    float: left;
    margin-top: 55px;
    list-style-type: none;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.157);
}

.main-title li h2 {
    display: inline;
    margin: 40px;
    padding: 8px 0;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    list-style: none;
    font-size: 220%;
    font-weight: 300;
    letter-spacing: 2px;
}





/* ---------------------------------------------- */
/* LIST */
/* ---------------------------------------------- */


.post-img {
    margin: -16.3% 0 0 -20%;;
}

.post-img img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
}

.description {
    border-bottom: 1px solid #ccc;
    padding-bottom: 2px;
}


.description p {
    font-size: 80%;
    text-align: justify;
    line-height: 25px;
    letter-spacing: 1px;
    word-spacing: 1px;
}





.btn-reservation {
    width: 100%;
    height: 50px;
    float: right;
    border: 0;
    margin-top: -13%;
    font-size: 100%;
    font-weight: none;
    color: #fff;
    cursor: pointer;
    background-color: #27ae60;
    transition: background-color 0.2s;
    }

.btn-reservation:hover {
    background-color: #219251;
    }







    /* COMMENTS */

.comment-section{
  margin-top: 10%;
  list-style: none;
  width: 100%;
  overflow: hidden auto;
  height: calc(100% - 250px);
}

    .comment{
        width: 100%;
        display: flex;
        margin-bottom: 45px;
        flex-wrap: wrap;
    }

    .comment.user-comment{
        color:  #808080;
    }

    .comment.author-comment{
        color:  #60686d;
        justify-content: flex-end;
    }


    .comment .info{
        width: 17%;
    }

    .comment.user-comment .info{
        text-align: left;
    }

    .comment.author-comment .info{
        order: 3;
    }


    .comment .info a{   /* User name */
        display: block;
        text-decoration: none;
        color: #656c71;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        padding: 10px 0 3px 0;
    }

    .comment .info span{    /* Time */
        font-size: 11px;
        color:  #9ca7af;
    }



    .comment .avatar{
        width: 8%;
    }

    .comment.user-comment .avatar{
        padding: 10px 18px 0 3px;
    }

    .comment.author-comment .avatar{
        order: 2;
        padding: 10px 3px 0 18px;
    }

    .comment .avatar img{
        display: block;
    }

    .comment.user-comment .avatar img{
        float: right;
    }





    /* comment */

    .comment p{
        width: 100%;
        line-height: 1.5;
        padding: 18px 22px;
        width: 50%;
        position: relative;
        word-wrap: break-word;
    }

    .comment.user-comment p{
        background-color:  #f3f3f3;
    }

    .comment.author-comment p{
        background-color:  #e2f8ff;
        order: 1;
    }

    .user-comment p:after{
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        background-color: #ffffff;
        border: 2px solid #f3f3f3;
        left: -8px;
        top: 18px;
    }

    .author-comment p:after{
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        background-color: #ffffff;
        border: 2px solid #e2f8ff;
        right: -8px;
        top: 18px;
    }




    /* Comment form */

    .write-new{
        width: 93%;
    }

    .write-new textarea{
        color:  #444;
        font: inherit;

        outline: 0;
        border: 1px solid #cecece;
        background-color:  #fefefe;
        overflow: auto;
        width:100%;
        min-height: 80px;
        padding: 15px 20px;
    }

    .write-new img{
        margin-top: 15px;
    }




    @media (max-width: 800px){

        .comment p{
            width: 100%;
        }

        .comment.user-comment .info{
            order: 3;
            text-align: left;
        }

        .comment.user-comment .avatar{
            order: 2;
        }

        .comment.user-comment p{
            order: 1;
        }


        .comment.author-comment{
            justify-content: flex-start;
        }


        .comment-section{
            margin-top: 10px;
        }

        .comment .info{
            width: auto;
        }

        .comment .info a{
            padding-top: 15px;
        }

        .comment.user-comment .avatar,
        .comment.author-comment .avatar{
            padding: 15px 10px 0 18px;
            width: auto;
        }

        .comment.user-comment p:after,
        .comment.author-comment p:after{
            width: 12px;
            height: 12px;
            top: initial;
            left: 28px;
        }

        .write-new{
            width: 100%;
        }
    }


    input {
        padding: 0;
        border: none;
        font: inherit;
        color: inherit;
        cursor: pointer;
      }





/* modal */


.modal-body {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: #219251;
    opacity: 0;
}

.modal-body:target {
    opacity: 1;
}




.btn-submit {
    height: 40px;
    width: 40%;
    font-family: "lato";
    font-weight: 300;
    margin-left: 68.5%;
    margin-top: 10px;
    font-size: 100%;
    text-transform: capitalize;
    cursor: pointer;
    float: left;
    color: #fff;
    background-color: #27ae60;
    transition: background-color 0.2s;
}


.btn-submit:hover {
    background-color: #219251;

}






/* Icons */ 

.social {
    margin-top: 5%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 2px;
}

ul {
    padding:0;
    list-style: none;
}
.social-icon {
    color: #fff;
}
ul.social-icons {
    margin-top: 10px;
}
.social-icons li {
    vertical-align: top;
    display: inline;
    height: 100px;
}
.social-icons a {
    color: #fff;
    text-decoration: none;
}
.fa-facebook {
    padding:20px 24px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    color: #fff;
    background-color: #27ae60;
}
.fa-facebook:hover {
    background-color: #219251;
    color: #fff;
}
.fa-twitter {
    padding:20px 24px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    color: #fff;
    background-color: #27ae60;
    transition: .5s;
}
.fa-twitter:hover {
    background-color: #219251;
    color: #fff;
}
.fa-rss {
    padding:20px 24px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    color: #fff;
    background-color: #27ae60;
    transition: .5s;
}
.fa-rss:hover {
    background-color: #219251;
    color: #fff;
}

.fa-linkedin {
    padding:20px 24px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    color: #fff;
    background-color: #27ae60;
    transition: .5s;
}
.fa-linkedin:hover {
    background-color: #219251;
    color: #fff;
}
.fa-google-plus {
    padding:20px 20px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    color: #fff;
    background-color: #27ae60;
    transition: .5s;
}
.fa-google-plus:hover {
    background-color: #219251;
    color: #fff;
}



/* ---------------------------------------------- */
/* FOOTER */
/* ---------------------------------------------- */

footer {
   background-color: #333;
    padding:30px; 
    font-size: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<!-----------HEADER-------------------->
        <header>
            <nav>
            <div class="row">   
                <ul class="main-title">
                <li><h2><?php echo $row[0]['title'];?></h2></li>
                </ul>
            </div> 
            </nav>
        </header>






        <!-------------SECTION LIST-------------->


        <section class="section-post" id="post">


            <div class="row" style="height: calc(100vh - 16.3%)">
                <div class="col span-1-of-2">
                <div class="post-img">
                        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg">
                    </div>
            </div>

                <div class="col span-1-of-2" style="height: calc(100vh - 90px); background: red;">


                    <!-- Open The Modal -->
                         <a href="checkout.php?Activity&id='.$row[0]['idActivity'].'"><button class="btn-reservation">Make Reservation</button></a>


                    <div class="description">
                        <p><?php echo $row[0]['description'] ?></p></p>
                    </div>

                    <div class="social">
                        <h3>Share with your friends</h3>
                    <ul class="social-icons">
                        <li><a href="" class="social-icon"> <i class="fa fa-facebook"></i></a></li>
                        <li><a href="" class="social-icon"> <i class="fa fa-twitter"></i></a></li>
                        <li><a href="" class="social-icon"> <i class="fa fa-rss"></i></a></li>
                        <li><a href="" class="social-icon"> <i class="fa fa-linkedin"></i></a></li>
                        <li><a href="" class="social-icon"> <i class="fa fa-google-plus"></i></a></li>
                    </ul>
                    </div>    



                    <!----COMMENTS-->
                    <ul class="comment-section">


                        <li class="comment user-comment">

                        <div class="info">
                        <a href="#">Usuário</a>
                        <span>10/11/2018</span>
                        </div>

                        <a class="avatar" href="#">
                        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" width="35" alt="Profile Avatar" title="Cavaco Silva" />
                        </a>

                        <p>comentário</p>

                        </li>
                        <li class="comment user-comment">

                        <div class="info">
                        <a href="#">Usuário</a>
                        <span>10/11/2018</span>
                        </div>

                        <a class="avatar" href="#">
                        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" width="35" alt="Profile Avatar" title="Cavaco Silva" />
                        </a>

                        <p>comentário</p>

                        </li>
                        <li class="comment user-comment">

                        <div class="info">
                        <a href="#">Usuário</a>
                        <span>10/11/2018</span>
                        </div>

                        <a class="avatar" href="#">
                        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" width="35" alt="Profile Avatar" title="Cavaco Silva" />
                        </a>

                        <p>comentário</p>

                        </li>
                        <li class="comment user-comment">

                        <div class="info">
                        <a href="#">Usuário</a>
                        <span>10/11/2018</span>
                        </div>

                        <a class="avatar" href="#">
                        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" width="35" alt="Profile Avatar" title="Cavaco Silva" />
                        </a>

                        <p>comentário</p>

                        </li>
                        <li class="comment user-comment">

                        <div class="info">
                        <a href="#">Usuário</a>
                        <span>10/11/2018</span>
                        </div>

                        <a class="avatar" href="#">
                        <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" width="35" alt="Profile Avatar" title="Cavaco Silva" />
                        </a>

                        <p>comentário</p>

                        </li>

                        <li class="write-new">

                            <form  method="POST">

                                <textarea placeholder="Write your comment here" name="comment"></textarea>

                                <div>
                                    <input class="btn-submit" type="submit" name="commentary" value="submit">
                                </div>
                                <?php echo $no_session ?>
                            </form>

                        </li>

                    </ul>

                </div> 
                    </div>

        </section>



        <!---SECTION 8 FOOTER--->
    <footer>


        </footer>

2
  • Excelente, muito obrigado, deu certo. Mas, quando a descrição da atividade é um pouco maior, a secção de comentários sai fora da página, como apresenta a imagem: imgur.com/a/KCiGowf Commented 10/11/2018 às 21:07
  • Pois é. Creio que esse ajuste deve ser feito via JS, já que o CSS não tem como calcular de forma dinâmica a altura a ser reduzida no calc.
    – Sam
    Commented 10/11/2018 às 21:13
1

use na div da imagem o comando e na imagem o comando height: 100%

Estava com o mesmo problema no meu Web-site a um tempo, resolvi aplicando esse comando.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .