Question

我正在处理显示用户帖子的页面。我想将该页面中的所有内容保留在窗口内，以使查看者不必向下滚动。

现在，页面包含帖子，评论和评论回复。帖子将保留在页面的左侧，而评论和回复将保留在页面的右侧。

到目前为止，所有内容都位于页面的正确一侧，并且我的内容适合该窗口，直到帖子获得评论和答复为止。当帖子中有评论时，即使我的评论存储在页面的右侧，帖子的左侧也会留出额外的空间。

我想知道是否有人可以看一下我的代码，并解释为什么当右侧有注释时，为什么在帖子下方添加了额外的空间。

如果您还有其他问题，我将很乐意回答。

我的代码

<div class="homeBody">
        <?php
            getPost($conn);
        ?>
</div> ...
function getPost($conn) { ...

                        if (mysqli_num_rows($commentresult)==0) {
                            echo '';
                        }
                        else {
                            $commenterid = $commentrow['userid'];
                            $commentersql = "SELECT * FROM users WHERE userid = '$commenterid'";
                            $commenterresult = mysqli_query($conn, $commentersql);
                            while ($commenterrow = mysqli_fetch_assoc($commenterresult)) {

                                echo    '<div class="PostCommentSet"> <div class="PostComments">';

                                    if ($commenterrow['profileimg'] == 1) {
                                        $filename = "profilepics/profile".$commenterid."*";
                                        $fileinfo = glob($filename);
                                        $fileext = explode(".", $fileinfo[0]);
                                        $fileactualext = $fileext[1];
                                        echo "<div class='CommentProfilePicture'><img src='profilepics/profile".$commenterid.".".$fileactualext."?".mt_rand()."'></div>";
                                    }
                                    else {
                                        echo "<div class='CommentProfilePicture'><img src='profilepics/noUser.png'></div>";
                                    }

                                echo    "<div class='CommentUserName'>".$commenterrow['userName']."</div>";
                                echo    "<div class='CommenterComment'>".$commentrow['comment']."</div> </div>";
                            }

                            $currentcommentid = $commentrow['commentid'];
                            $replysql = "SELECT * FROM posts WHERE hostid = '$hostid' AND postid = '$postid' AND commentid = '$currentcommentid' AND replyid > 0";
                            $replyresult = mysqli_query($conn, $replysql);
                            while ($replyrow = mysqli_fetch_assoc($replyresult)) {
                                if (mysqli_num_rows($replyresult)==0) {
                                    echo '';
                                }
                                else {
                                    echo '
                                            <div class="PostReplies">
                                                <div class="ReplierReply">'.$replyrow['reply'].'</div>
                                            </div>
                                        </div>
                                    ';
                                }
                            }
                        }
                    }
                }
            }
        }   
    }

我的CSS

.homeBody {
        margin: 60px 0px 37px 0px;
        width: 100%;
        height: calc(100vh - 97px);
        background-color: #777;

    }
.PostBox {
        width: 65%;
        height: calc(100vh - 97px);
        background-color: #555;
        color: white;
        position: relative;
    }
    .PostImg {
        width: 60%;
        height: 70vh;
        object-fit: contain;
    }
    .PostCommentSet {
        position: absolute;
        right: 10px;
        top: 60px;
        width: 30%;
    }
    .PostComments {
        background-color: #555;
        padding: 10px;
        border-radius: 4px;
        color: white;
    }
    .PostReplies {
        background-color: #555;
        padding: 10px;
        color: white;
        right: 0px;
        border-radius: 4px;
    }

    /* Comments */

        .CommentUserName {
            position: relative;
            left: 40px;
            top: -25px;
            font-size: 20px;
            font-weight: 550;
        }
        .CommentProfilePicture {
            width: 30px;
            height: 30px;
            margin: 0px;
        }
        .CommentProfilePicture img {
            width: 30px;
            height: 30px;
            object-fit: cover;
            top: 1px;
            left: 1px;
            border-radius: 5px;
        }
        .CommenterComment {
            position: relative;
            left: 40px;
            top: -8px;
        }
        .ReplierReply {

        }

Answer 1

您没有为实际评论和回复div标签设置任何宽度或高度

为什么我的评论使页面向下移动？

1 个答案: