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

【问题标题】：No scroll in div using relative margins没有使用相对边距在 div 中滚动
【发布时间】：2015-11-09 07:12:19
【问题描述】：

基本上我是在用 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;
}

【问题讨论】：

您的样式表中有什么？我假设你有一些 overflow:hidden 那里
不。我编辑了问题，以便您查看。
多个元素具有相同的 ID。这不是有效的 HTML。为此使用类，
哦，好的。没修好，还是没有滚动条。
这个问题与PHP完全无关。这严格来说是一个 CSS 样式问题。因此，我编辑了问题的标签和标题，以向其他查看问题的人澄清。请尝试将您的问题简化为可重现的SSCCE，只关注使用实际示例数据产生问题的 html/css 代码，而不是包括与此问题无关的所有无用 PHP 垃圾。通过这种方式，您会从精通 CSS 的人那里得到更多有用的答案。

标签： html css scroll

【解决方案1】：

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

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

【讨论】：