Javascript 如何计算实际内宽/内高？

我正在用bootstrap编写一个响应迅速的网站，我只需要一个屏幕实际大小的元素

每当我执行“高度/宽度：100%”时，浏览器会给我一个滚动条，因为它将我的视口计算为屏幕的完整大小（即不包括工具栏/其他浏览器选项卡/底部的Windows任务栏）。如何计算不包括这些的尺寸？从其他答案来看，这就是innerWidth（）和innerHeight（）不应该做的事情？但这对我不起作用。。。（见下文）

我正在构建的站点上没有太多内容（基本上只是一个视频转盘），我不希望用户必须全屏显示（我将在视频下面有一些其他功能），他们也不必滚动

我的全屏尺寸是1920x940，这是我运行时返回的：

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

（和$（窗口）给出了相同的尺寸。）

以下是问题的屏幕截图：

这是我的密码：

<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

文件中使用

VH

和

VW

单元将是最佳做法

例如，您可以执行以下操作：

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

---

如果我正确理解您的问题，我认为在

CSS

文件中使用

VH

和

VW

单元将是最佳做法

例如，您可以执行以下操作：

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

---

为什么不在css中使用VH和VW？为什么不在css中使用VH和VW？嗨，安迪，不幸的是，这就是问题所在。将100vh和100vw放在html和body（或my modal）上，协调为1920像素乘以940像素（如果包含工具栏/任务栏等，这是全屏大小，因此有一个滚动条。如果我点击F11并全屏显示，它非常适合。是什么导致你的滚动条显示？视频下有什么？视频下没有任何内容…！必须有一些东西才能显示滚动条？嗨，安迪，我用html更新了这个问题还有css。我还能提供什么帮助吗？嗨，安迪，不幸的是，这就是问题所在。把100vh和100vw放在html和正文（或我的模式）上，协调为1920像素乘以940像素（如果包含工具栏/任务栏等，这是全屏大小，因此有一个滚动条。如果我点击F11并全屏显示，它非常适合。是什么导致你的滚动条显示？视频下有什么？视频下没有任何内容…！必须有一些东西才能显示滚动条？嗨，安迪，我用html更新了这个问题还有css，还有什么我可以提供的吗？