Question

我有很多共享相同CSS文件的HTML页面。所有HTML页面都有包含不同内容的侧边栏。但侧边栏对所有人都具有相同的属性。

#sidebar {
    min-width: 200px;
    position: fixed;
    width: 15%;
    display: inline-block;
    height: 100%;
    overflow: auto;
    margin: 0px 0px 5px 5px;
    vertical-align: middle;
    top: 0;
    right: 15px;
    padding: 0px 5px 5px 5px;
    background-color: white;
}

在div的侧边栏中包含长内容的HTML页面应滚动，这就是我设置height:100%;的原因。

问题是内容较短的网页也填满了div的空白空白区域。

有没有办法不使用常见的CSS文件填充某些页面（height:auto;）的完整div？

父html没有height属性。

更新

我在html页面中使用twig模板。我有一个父页面base.html，它扩展到其他页面。

侧边栏的div位于base.html，因此我无法为一个文件提供单独的类。

抱歉现在更新。

Answer 1

在css中，这是通过覆盖样式来完成的：

#sidebar {
  height: auto;
}

此样式应仅添加到您希望此高度属性与默认值100％不同的页面。因此，最终结果是#sidebar默认高度为100％，而在某些页面上它被覆盖为自动。

Answer 2

听起来您需要在CSS文件中添加额外的类，例如#sidebar.auto-height{ height:auto; }然后在您要应用的网页上，HTML元素应如下所示：<div id="sidebar" class="auto-height"></div>

Answer 3

您可以为该特定页面添加样式吗？无论是身体还是侧边栏。

<body class="limitheight">

然后：.limitheight #sidebar {height: auto;}

否则，您可以在该特定页面上的<style>#sidebar {height: auto;}</style>中进行此操作。

如果你使用CMS，页面都有一个带有num-ID的类，找到它并用你的页面的id替换.limitheight！ ;）

是否可以在一个.css文件中设置高度100％，但不应填写特定页面的div

3 个答案: