Блог

Главная - Вопросы по программированию - Прокрутка не включена

Прокрутка не включена

#html #css #web

#HTML #css #веб

Вопрос:

Я не знаю, почему, но моя страница не включает прокрутку, хотя она уже заполнила всю страницу. почему это происходит? вот весь мой HTML-код, чтобы вы могли лучше понять мою проблему.

 <html>
    <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />
        <title>Guitar Corner</title>    
        <link href="C:/Users/Jhan Jericho/Desktop/bootstrap/css/bootstrap.css" rel="stylesheet" />

         <script src="C:/Users/Jhan Jericho/Desktop/bootstrap/css/bootstrap.css"></script>
         <script src="C:/Users/Jhan Jericho/Desktop/bootstrap/jquery-1.7.1.intellisense.js"></script>
         <script src="C:/Users/Jhan Jericho/Desktop/bootstrap/js/bootstrap.js"></script>
        <style>
        .heading1
        {
            font-family: Bebas Neue;
            color: black;
            text-align: right;
            -webkit-filter: drop-shadow(5px 5px 5px #222)
        }
        .heading2
        {
            font-family: Bebas Neue;
            color: black;
            text-align: left;
            -webkit-filter: drop-shadow(5px 5px 5px #222)
        }
        h1 
        {
            font-size:300%
        }
        .contents
        {
            background: black;
            color: black;
            margin-bottom: 100px;
            margin-right: 150px;
            margin-left: 50px;
            -webkit-filter: drop-shadow(5px 5px 5px #222)
        }
        </style>
    </head>
        <body>
            <div class="container">
                <div class="col-md-4">
                    <div class="heading1">
                        <br />
                        <br />
                            <big>
                            <big>
                                <h1>You can hear it?</h1>
                            </big>
                            </big>
                    </div>
                </div>
                <div class="col-md-4">
                    <center>
                        <img src="gc.png" style="-webkit-filter: drop-shadow(5px 5px 5px #222);"/>
                    </center>
                </div>
                <div class="col-md-4">
                    <div class="heading2">
                        <br />
                        <br />
                            <big>
                            <big>
                                <h1>Then you can sing it!</h1>
                            </big>
                            </big>
                    </div>
                </div>
                <div class="contents">
                        <div class="col-md-8">
                        <br />
                            amp;nbsp;

                            <h2> Rock in your own way! </h2>
                            <center>
                                <img src="rockstar.jpg" class="img-rounded" width="500px" height="300px" />
                            <center>
                            <p> amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp; Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut 
                            laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper 
                            suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate
                            velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim 
                            qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
                        </div>
                        <div class="col-md-4">
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </div>
                    </div>      
            </div>
        </body>
</html>

пожалуйста, помогите мне в этом. Спасибо!

Комментарии:

1. lol Я обнаружил в своем bootstap.css, что мое переполнение скрыто. кстати, спасибо за всю помощь!

Ответ №1:

в CSS .contents добавить overflow-y:auto or scroll

Надеюсь, это может помочь.

Комментарии:

1. в какой div вы хотите поместить прокрутку? class=»col-md-4″ автоматически отрегулирует высоту в зависимости от содержимого.

2. кстати, спасибо, нашел что-то в моем bootsrap.css, что мое переполнение скрыто.