Блог

Я пишу адаптивный веб-сайт с помощью bootstrap, и мне просто нужен элемент, который соответствует фактическому размеру экрана.

Всякий раз, когда я делаю height / width: 100%, браузер выдает мне полосу прокрутки, потому что она обрабатывает мой видовой экран как полный размер экрана (т.е. Исключая панель инструментов / другие вкладки браузера / панель задач Windows внизу). Как мне вычислить размеры, исключая эти? Из других ответов, это то, что innerWidth() и innerHeight() не должны делать? Но у меня это не работает … (см. Ниже)

На сайте, который я создаю, не так много (в основном, просто карусель видео), и я не хочу, чтобы пользователю приходилось переходить на полноэкранный режим (у меня будет пара других функций под видео), и им также не нужно прокручивать.

Мой полноэкранный размер равен 1920×940, и это то, что возвращается при запуске:

 $(document).ready(function() {
    alert("Inner Height: "   $(document).innerHeight());
    alert("Inner Width: "   $(document).innerWidth());
}
  

(И $ (window) дали те же размеры.)

Вот скриншот проблемы:

Вот мой код:

 <div id="videoModal">
    <div class="modal-dialog" role="listbox">
        <!--<div class="modal-header">-->
        <!--</div>-->
        <div class="modal-body">
            <div id="carousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->


                <!-- Wrapper for slides -->
                <div class="carousel-inner">
                    <div class="item" ng-class="{active: !$index}" ng-repeat="video in videos">
                        <video id="{{video.videoId}}" controls>
                                <source src="{{video.webmUrl}}" type="video/webm"/>
                                <source src="{{video.mp4Url}}" type="video/mp4"/>
                                <!--<source src="{{video.ogvUrl}}" type="video/ogg"/>-->
                            </video>
                            <a class="left carousel-control" href="#carousel" role="button" data-slide="prev">
                                <span class="icon-prev" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="right carousel-control" href="#carousel" role="button" data-slide="next">
                                <span class="icon-next" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  

И мой css:

 #videoModal {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
    }
  

Любая помощь будет оценена, очевидно, что здесь мне не хватает чего-то фундаментального …! Заранее спасибо.

Если я правильно понял ваш вопрос, я думаю, что использование VH VW единиц и в вашем CSS файле было бы лучшей практикой.

Например, вы можете делать такие вещи:

 .element {
    width: 100vw;
    height: 100vh;
    background: red;
}