Question

我的网页中心标题，内容和页脚div，每个都有900px的宽度。

（我可以提供的关于标题，内容和页脚的唯一其他可能相关的信息是标题具有固定的定位，内容相对定位且页脚是绝对定位的。但是，我不确定这些信息是否会与解决方案相关。）

我正在使用以下CSS媒体查询：

/* If screen width is less than or equal to 900px (e.g.: tablet, mobile) ... */
@media only screen and (max-width: 900px) {
    /* Scale header, content and footer width */
    #header, #content, #footer { width: 100%; }
}

当页面宽度小于其默认宽度时，开始使用页面缩小这些div。我希望缩小比例在所有浏览器中无缝，但是，我遇到了一个问题，因为webkit浏览器计算页面宽度中的y和x滚动条宽度。这使得滚动条覆盖特定宽度的div，并使缩小发生得晚。

我想要一个JQuery解决方案来分别在webkit浏览器中从CSS主体宽度和高度计算和减去y滚动条宽度和x滚动条高度，以考虑webkit浏览器如何在宽度和高度上包含滚动条。该页面，以便我的CSS媒体查询重新缩放页面正文以适合所有浏览器的查看区域。

我对其他解决方案不感兴趣，例如让滚动条始终存在以使缩小始终在webkit浏览器中工作相同。

Answer 1

我建议使用JavaScript检测您的HTML正文在水平和垂直方向上是否大于窗口。如果它们超出窗口，则会有一个滚动条。然后，您可以在主体上添加填充以适应此目的。

我相信滚动条的宽度约为15px，但这应该很容易找到。

---
runtime: shiny
output: ioslides_presentation
---

## John

```{r, echo=FALSE}
library(scatterD3)
```

```{r, echo = FALSE}
             selectInput("Living", "Choose Life", 
                         choices = c("Life", "Death"))
```



```{r echo = FALSE, width = "80%", height = "400px"}
renderPlot({
    mtcars$names <- rownames(mtcars)
    plot(mpg~wt, data = mtcars)
  }, outputArgs = list(width = "80%",height="400px"))

```

您可以使用上面的代码来检测这两个值。将这些放置在监听器中以进行窗口调整大小将确保在需要时重新评估所有参数。

更新：

// Check if body height is higher than window height :)
if ($("body").height() > $(window).height()) {
    alert("Vertical Scrollbar! D:");
}

// Check if body width is higher than window width :)
if ($("body").width() > $(window).width()) {
    alert("Horizontal Scrollbar! D:<");
}

希望这会有所帮助：）

EXTRA：

如果每个浏览器的滚动条尺寸不同，您只需使用浏览器适当的尺寸制作一个CSS类，并通过调用来应用它：

$(window).resize(function(){
    // Check if body height is higher than window height :)
    if ($("body").height() > $(window).height()) {
        $('body').css('padding-bottom', '15px');
    } else {
        $('body').css('padding-bottom', '0');
    }

    // Check if body width is higher than window width :)
    if ($("body").width() > $(window).width()) {
        $('body').css('padding-right', '15px');
    } else {
        $('body').css('padding-right', '0');
    }
}

和

$('body').addClass('<CLASSNAME>');

而不是设置和取消身体上的填充。

在webkit浏览器中分别从主体宽度和高度中减去y滚动条宽度和x滚动条高度

1 个答案: