css 为什么我的网页宽度不能填满整个屏幕宽度？

我将大部分代码 Package 在具有以下样式的容器中：

.container {
position: relative;
width: 100%;
height: 100vh;
overflow: auto;
padding-left: 0;
padding-right: 0;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}

这是为了使我能够顺利地从一个部分的页面，占用了100vh的高度到另一个。（这就是为什么我有溢出：汽车在我的造型）。但是，当我添加“溢出：自动”，网页停止是我的窗口的全宽（如图所示）。
screenshot of problem
当我删除“溢出：自动”，并将其替换为“溢出：无”，那么宽度是固定的，但我的滚动功能现在更长的作品。
HTML代码：

<body class="container-fluid">
<!-- Main Page -->
<div class="container">

    <div class="section">
        <div class="main row vertical-center">
            <div class="main-image col-md-6">
                <img src="rec/img/placeholder-image.png" alt="client_image">
            </div>
            <div class="main-text align-items-center col-md-6">
                <h2 class="p-3">
                    Name Lastname
                </h2>
                <span class="align-bottom bottom-text-main">
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem corporis nostrum illo? Vero necessitatibus accusamus ullam commodi, consequatur corrupti. Recusandae eligendi eaque possimus minima numquam dignissimos cumque adipisci tempora temporibus.
                </span>
            </div>

            <span id="contact"> 
                <!-- <ul class="contact-icons" style="list-style-type:none;">
                    <li></li><a href="https:/www.facebook.com" class="fa fa-facebook" target="blank"></a></li>
                    <li><a href="https://www.instagram.com" class="fa fa-instagram" target="blank"></a></li>
                    <li><a href="mailto:[email protected]" class="fas fa-envelope" target="blank"></a></li>
                </ul> -->
                <i><a href="https:/www.facebook.com" class="fa fa-facebook" target="blank"></a></i>
                <i><a href="https://www.instagram.com" class="fa fa-instagram" target="blank"></a></i>
                <i><a href="mailto:[email protected]" class="fa fa-envelope" target="blank"></a></i>
            </span>
        </div>
    </div>

    <!-- Information -->
    <div class="section info">
        <div class="information p-4 pb-0" id="information">
            <h1 >More about me.</h1>
            <br>
                <div class="background ml-3">
                    <h5 class = "pb-1">Background</h5>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti facilis, est distinctio esse temporibus sint animi sunt veniam asperiores commodi quo numquam excepturi nemo ab, harum, nam possimus quas veritatis!</p>
                </div>
                <div class="skills ml-3">
                    <h5 class="pb-1">Skills</h5>
                    <ul>
                    <li>Skill</li>
                    <li>Skill</li>
                    <li>Skill</li>
                    <li>Skill</li>
                    <li>Skill</li>
                    </ul>
                </div>
        </div>
    </div>

    <!-- Experience -->
    <div class="section">
        <div class="experience p-3" id="experience">
            <h1 class="pt-3">Work experience</h1>
            <br>
            <div class="xp">
                <div class="workxp p-3 ml-3">
                    <h4 class = "pb-2">Lorem, ipsum.</h4>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, aliquid. Quidem, quae dolorem! Amet ea obcaecati nam quia aliquid, facilis dolorem ab velit optio. Accusamus quidem commodi rerum itaque incidunt?
                </div>
                <div class="workxp p-3 ml-3">
                    <h4 class = "pb-2">Lorem, ipsum.</h4>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus aperiam veritatis eos illo quo necessitatibus omnis illum iure impedit debitis, consectetur voluptatum quisquam, quae temporibus veniam. In minima quos perferendis.
                </div>
                <div class="workxp p-3 ml-3">
                    <h4 class = "pb-2">Lorem, ipsum.</h4>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo officiis alias architecto non iure, quia labore rem. Totam nulla qui exercitationem beatae, ab aperiam! Asperiores soluta nisi repudiandae odit doloribus.
                </div>
            </div>
        </div>
    </div>

    <!-- Additional Inforation -->
    <div class="section">
        <div class="additional-info p-3" id="additional-info">
            <h1>Additional Information</h1>
            <!-- <h1 class="second-line-info">Information</h1> -->

            <div class="additional-info-text text-left">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, pariatur!</p>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium, pariatur at. Fuga error impedit officiis!</p>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolor facilis tempora odit vel cum adipisci, aut ducimus illum ab tenetur quae temporibus non. Velit rerum ipsa quis, sint blanditiis doloremque repellendus aliquid eius amet exercitationem!</p>
                <p>Lorem ipsum dolor sit amet.</p>
                <p>Lorem, ipsum dolor.</p>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <div class="section" id="footer">
        <footer class="page-footer font-small blue pt-4">
            <div class="container-fluid text-center text-md-left">
            <div class="row">
                <div class="col-md-6 mt-md-0 mt-3">
                    <h5 class="text-uppercase">Name Lastname</h5>
                    <p>Cliche Inspiritional Quote Here</p>
                </div>
                <!-- Grid column -->
        
                <hr class="clearfix w-100 d-md-none pb-3">
        
                <!-- Grid column -->
                <div class="col-md-6 mb-md-0 mb-9">
        
                    <!-- Links -->
                    <h5 class="text-uppercase">Contact Links</h5>
            
                    <ul class="list-unstyled">
                        <li>
                            <i><a href="https:/www.facebook.com" class="fa fa-facebook" target="blank"></a> <a href="https:/www.facebook.com" target="blank">Facebook</a></i> 
                            
                        </li>
                        <li>
                            <i><a href="https://www.instagram.com" class="fa fa-instagram" target="blank"></a> <a href="https:/www.intagram.com" target="blank">Instagram</a></i>
                        </li>
                        <li>
                        <i><a href="mailto:[email protected]" class="fa fa-envelope" target="blank"></a> <a href="mailto:example@gmai;.com" target="blank">Email</a></i>
                        </li>
                    </ul>
        
                </div>
                <!-- Grid column -->
        
        
            </div>
            <!-- Grid row -->
        
            </div>
            <!-- Footer Links -->
        
        </footer>
    </div>
    
</div>

下面是CSS文件：

body {
        color: var(--grey);
        width: 100%;
        padding: 0;
        margin: 0;
        min-width: fit-content;
    }  

    .container {
        position: relative;
        width: 100vh;
        height: 100vh;
        overflow: visible;
        padding-left: 0;
        padding-right: 0;
        scroll-behavior: smooth;
        scroll-snap-type: y mandatory;
    }

    .container .section {
        position: relative;
        height: 100%;
        width: 100%;
        scroll-snap-align: start;   
        /* background-blend-mode: multiply; */
    }

    /* .container.section:nth-child(1) {
        background: ;
        background-size: cover;
        background-attachment: fixed;
    } */


    .main {
        background-color: var(--white);
        padding-left: 0%;
        padding-right: 0%;
        margin-top: 0rem;
        margin-bottom: 0rem;
        height: 100vh;
    }

    .main-image {
        padding-top: 0%;
        margin-left: 0%;
        padding-right: 0;
        margin-bottom: 2rem;
        height: 50%;
    }

    .main-image img {
        height: 100%;
        width: 100%;
        margin-left: 0%;
        margin-right: 0%;
    }

    .main-text {
        padding-bottom: 2rem;
        height: 50%;
        /* margin-left: 5%;
        margin-right: 5%; */
    }

    .main-text p {
        vertical-align: middle;
    }


    .information {
        background-color: var(--soft);
        height: 100vh;
        padding-top: 0;
    }

    .experience {
        background-color: var(--white);
        height: 100%;
    }

    .information h1 {
        padding-top: 1rem;
    }


    .background {
        padding-top: 3rem;
    }

    .skills ul {
        list-style-type: none;
    }

    .skills {
        padding-top: 3rem;
    }

    .additional-info {
        background-color: var(--soft);
        height: 100vh;
        padding-top: 1rem;
    }

    .additional-info h1 {
        color: var(--grey);
    }

    .second-line-info {
        margin-left: 5rem;
    }

    .additional-info-text {
        text-align: center;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .additional-info-text p {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    #footer {
        height: 10vh;
    }

    .list-unstyled i {
        font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    }

    @media only screen and (min-width: 600px) {
        html {
            width: 100%;
        }

        body {
            width: 100%;
            padding: 0;
        }

        .main {
            padding-top: 0%;
            width: 100%;
        }

        .vertical-center {
            display: flex;
            align-items: center;
        }

        .main-image {
            height: 100%;
            margin-top: 15%;
        }

        .main-image img {
            border-radius: 50%;
            height: 50%;
            width: 75%;
        }

        .main-text {
            height: 100%;
            margin-top: 20%;
        }

        .main-text h2 {
            margin-bottom: 3rem;
        }

        #contact {
            position: absolute;
            bottom: 2%;
            right: 2%;
        }

        .contact-icons {
            padding: 0;
            font-size: 2em;
            display: table-cell;
        }

        .fa {
            padding-left: 1rem;
            padding-right: 1rem;
            text-align: center;
            text-decoration: none;
            border-radius: 50%;
        }

        .contact a {
            display: inline-block;
            width: 1.2em;
            transition: all .2s ease-in-out;
        }
        
        a:hover {
            text-decoration: none;
        }

        .additional-info {
            text-align: left;
            justify-content: left;
        }

        .additional-info-text p {
            margin-top: 2rem;
        }

        /* BEVAN ONDER */
        /* General */
        body, html
        {
            width: 100%;
            padding: 0;
            margin:0;
        }

        .container{
            width: 100%;
        }

        .container.section{
            width: 100%;
        }
        

        /* Information page(s) */

        .background{
            
            padding-top: 2rem;
        }

        .skills{
        
            padding-top: 2rem;
        }

        .background p{
            width: 50%;
        }
        

    }

有没有可能解决这个问题？

css 为什么我的网页宽度不能填满整个屏幕宽度？

2条答案

相关问题

热门标签

最新问答