Question

我正在制作一个网页，作为我在学校演讲的产品。现在，这不是我第一次遇到这个问题，但我的滚动条似乎从顶部和侧面略微削减。最重要的是，滚动条只有HALF可见。

（请注意，顶部的黑色任务栏应该从左到右一直填充，并且应该正好在顶部。）

<head>

    <style type="text/css">

        html, body {
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: #cccccc;
            overflow-x: hidden;
        }

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: #333;
            position: relative;
            left: -0.5%;
            top: -8px;
            width: 100.9%;
        }

        li {
            float: left;
        }

        li a {
            display: block;
            color: white;
            text-align: center;
            padding: 20px 25px;
            text-decoration: none;
        }

        li a:hover:not(.active) {
            background-color: #111;
        }

        .active {
            background-color: #111;
        }
        textarea {
            resize: none;
            position: fixed;
            left: 35%;
            top: 1%;
            width: 30%;
            font-size: 160%;
            height: 35px;
            padding: 3px;
        }
        p {
            font-size:20px;
            font-family: arial;
            position: absolute;
        }

        .underline {
            border-bottom: 0.5px solid black;
            display: inline-block;
            line-height: 0.85;
        }

    </style>

    <script type="text/javascript">

        function clearContents(element) {
        element.value = '';
    }

    </script>

</head>

<body>

    <ul>
        <li><a class="active" href="home.html" style="font-family: arial;">Ready2Job</a></li>
    </ul>


    <img src="http://res.cloudinary.com/urbandictionary/image/upload/a_exif,c_fit,h_200,w_200/v1396913907/vtimxrajzbuard4hsj78.jpg" style="position: absolute; left: 400px; top: 50px; z-index: -1; width: 60%;"> <!-- Grey Box -->

    <textarea placeholder="Search for jobs"></textarea>

    <img src="Billeder\home_noprofilepic.jpg" style="position: fixed; width: 70px; height: 70px;">

    <p style="position: absolute; left: 80px; top: 41px;">Welcome, <i><span class="underline">Mikkel Mørkegaard</i></span><i>!</i></p>

    <img src="Billeder\home_stars.jpg" style="position: fixed; width:180px; left: 50px; top: 75px;">

    <a href="home.html"><p style="position: fixed; font-size: 10px; left:5px; top:125px;">(Edit profile)</p></a>


    <img src="Billeder\home_fordlogo.jpg" style="position: absolute; border: 1px solid black; width: 80px; height: 80px; left: 430px; top: 80px;">

    <img src="Billeder\home_fordlogo.jpg" style="position: absolute; border: 1px solid black; width: 80px; height: 80px; left: 430px; top: 1000px;">



</body>

Answer 1

您可能只需要重置身体标记中的边距。

所以尝试改变：

html, body {
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: #cccccc;
            overflow-x: hidden;
        }

要：

html, body {
            position: fixed;
            width: 100%;
            height: 100%;
            background-color: #cccccc;
            overflow-x: hidden;
            margin: 0px;
        }

Answer 2

从CSS中删除

html, body {
    **overflow-x: hidden;**
}

溢出-x部分。这可以解决您提到的问题。如果这有帮助，请告诉我。

滚动条可以向下和向右切割整个页面

2 个答案: