Question

基本上我用PHP回应一些东西，内容超出了窗口，但没有任何滚动条。我尝试使用overflow: scroll;，但它无法正常工作。

以下是完整的网站代码：

<?php 
    session_start();
    if(!isset($_SESSION['commented']))
        unset($_SESSION['secretid']);

    unset($_SESSION['commented']);
 ?>
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Confession | Pokaż sekret</title>
    <link rel="stylesheet" href="css/style.css" />
    <link href='https://fonts.googleapis.com/css?family=Oxygen&subset=latin,latin-ext' rel='stylesheet' type='text/css' />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <script type="text/javascript">
        $(window).load(function() {
            $("body").removeClass("preload");
        });
    </script>
</head>
<body>
    <div id="wrapper">
        <h3>Losowy sekret:</h3>
        <?php 
            include_once("db.php");

            $connection = @new mysqli($host, $user, $pass, $name);

            $query = "SELECT * FROM secrets";
            $result = @$connection->query($query);
            $rows = $result->num_rows;

            if ($rows == 0)
                echo '<div id="view">Brak sekretów w bazie danych!</div><br />';
            else
            {
                /* Get the lowest id */
                $query = "SELECT id FROM secrets ORDER BY id ASC LIMIT 1";
                $result = @$connection->query($query);
                $data = $result->fetch_assoc();
                $min = $data['id'];

                /* Get the highest id */
                $query = "SELECT id FROM secrets ORDER BY id DESC LIMIT 1";
                $result = @$connection->query($query);
                $data = $result->fetch_assoc();
                $max = $data['id'];

                /* Select a random row */
                if (!isset($_SESSION['secretid']))
                {
                    $_SESSION['secretid'] = RAND($min, $max);

                    if ($rows > 1)
                        while ($_SESSION['secretid'] == $_SESSION['lastid'])
                            $_SESSION['secretid'] = RAND($min, $max);

                    $_SESSION['lastid'] = $_SESSION['secretid'];
                }

                $rand = $_SESSION['secretid'];
                $query = "SELECT * FROM secrets WHERE id = '$rand' LIMIT 1";
                $result = @$connection->query($query);
                $data = $result->fetch_assoc();

                echo '<div id="view">'.$data['secret'].'</div>';
                echo '<h3>Komentarze:</h3>';

                $query = "SELECT * FROM comments WHERE secret = '$rand'";
                $result = @$connection->query($query);
                $rows = $result->num_rows;

                if ($rows == 0)
                    echo '<div id="view">Brak komentarzy do wyświetlenia</div>';
                else
                {
                    for ($i = 0; $i < $rows; $i++)
                    { 
                        $data = $result->fetch_assoc();

                        for ($j = 0; $j < 74; $j++)
                        { 
                            echo '-';
                        }
                        echo '<br /><div id="view">'.$data['comment'].'</div>';     
                    }

                    for ($i = 0; $i < 74; $i++)
                    { 
                        echo '-';
                    }
                }

                echo "<h3>Napisz komentarz<br />(max 100 znaków):</h3>
                <form style='display: inline;' id='shareform' method='post' action='comment.php'>
                    <textarea name='comment' style='resize: none;' cols='41' rows='5' maxlength='100'></textarea><br />
                    <a href='javascript:{}' onclick='document.getElementById(\"shareform\").submit(); return false;'>Skomentuj</a>
                </form><br /><br />";
            }

            $connection->close();
         ?>

        <a href="view_secret.php">Następny sekret</a>
        <a href="index.php">Powrót</a>
    </div>
</body>
</html>

如果我手动编写所有内容，滚动条会像平常一样显示。哦，这是它实际看起来的截图：

@edit：CSS

body {
    background: url("../img/crossed_stripes.png");
    font-family: "Oxygen", verdana;
    font-size: 20px;
    color: #FFFFFF;
    font-weight: bold;
}

.preload * {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

#wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: 500px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.secret {
    width: 100%;
}

#view {
    color: #FF5555;
}

a, a:visited {
    color: #FFFFFF;
    -webkit-transition: color 0.5s;
    -moz-transition: color 0.5s;
    -ms-transition: color 0.5s;
    -o-transition: color 0.5s;
    text-decoration: none;
    margin: 10px;
    border-bottom: 2px dotted;
}

a:hover {
    color: #777777;
    -webkit-transition: color 0.5s;
    -moz-transition: color 0.5s;
    -ms-transition: color 0.5s;
    -o-transition: color 0.5s;
}

textarea {
    background-color: #222222;
    font-family: "Oxygen", verdana;
    font-size: 22px;
    color: #999999;
    font-weight: bold;
    text-align: justify;
}

textarea:focus {
    outline: none !important;
    border: 1px solid #FFFFFF;
}

h3 {
    font-size: 27px;
}

Answer 1

这里的问题是你在固定块元素中有块元素（即#view divs ）。因此top div的相对left和#wrapper样式会强制这些块元素相对定位。这不会让你的div在div中本身或跨越页面滚动渲染。

相反，您应该考虑将wrapper div定位为固定的top说20px，并且页面应该按照您的预期行事。不幸的是，在页面上相对于其自身高度垂直居中div在CSS中并不理想。这就是为什么像Bootstrap这样的前端框架在javascript中使用Affix方法的原因。我不认为这是你真正想要的。我认为你试图在页面上垂直和水平居中div，但div没有固定的大小，所以当你动态扩展div时，这对你来说并不是很好。。只需设置一个固定的上边距，而不是完全避免这个问题，并且不要太担心垂直居中。

div中没有使用相对边距滚动

1 个答案:

div中没有​​使用相对边距滚动

1 个答案:

div中没有使用相对边距滚动