Question

我正在创建一个WordPress二十五个孩子主题，将其左侧边栏移到右侧。

My child theme侧边栏的高度不等于窗口的高度，如original theme。

这是我的sidebar CSS：

.sidebar {
float: right;
margin-right: 0px;
max-width: 413px;
position: relative !important;
width: 29.4118%;
background: #fff;
box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
}

我已尝试过height:100%;和height:auto;，但仍无效。

如何解决此问题？

Answer 1

您可以使用css3 viewport-percentages。

例如，设置高度等于：height：100vh;，将使div等于视口高度的100％。

您可以在此处详细了解：

Make div 100% height of browser window

或者看看我在这里放在一起的小提琴。 fiddle

请注意旧版浏览器不支持CSS3 vh，因此您最好使用jQuery或javascript完成此操作。

Answer 2

如果您想要修复它（总是在那里，就像在原始主题中那样），那么您可以使用position: fixed，top: 0和适当的左/右设置将其设置为bottom: 0设置（或宽度）。

如果您希望它保持在顶部并且不会粘贴到视口，那么您可以将其放在position: absolute中，并带有top: 0，bottom: 0和正确的左/右等等

Answer 3

jQuery是你最好的选择。

$(window).scroll(function() {
    var windowHeight = $(window).height();
    $(".sidebar").css("height", windowHeight);
});

如果浏览器尺寸发生变化，滚动功能将调整侧边栏的大小。

Answer 4

我遇到了同样的问题。在查看http://materializecss.com/collections.html上使用的样式后，我使用的解决方案 - 侧面导航类似于我试图制作的内容 - 我发现这对我有用：

height: calc(100% + 2em);

嗯..更准确地说，这对我有用：

height: ~"calc(100% + 2em)";

^我使用LESS，如果没有逃脱，我的结果将达到102％。

如何使侧边栏高度等于窗户的高度？

4 个答案: