Question

几乎每个人都在网络上，我很难让我的侧边栏100％填充页面。

我有一个标题，我想在其中添加侧边栏和内容：

---------------------------
-       header            -
---------------------------
-  s    -        c        -
-  i    -        o        -
-  d    -        n        -
-  e    -        t        -
-  b    -        e        -
-  a    -        n        -
-  r    -        t        -
---------------------------

我希望侧边栏的高度为100％，但我似乎能够让它工作的唯一方法是使侧边栏“位置：固定”。因为我希望网站具有响应能力，所以修复不是解决方案。

JSfiddle当前网站

简短版本：

<body>   
    <header>  
       <div id="headerBgRight"></div>
    </header>       
    <aside class="left-panel">
       <!-- Left panel listing here -->
    </aside>
    <div class="main-content">
    </div>
</body>

CSS：

html, body {
   height:100%;
}

header {
   position:absolute;
   background-image:image.png
   width:100%
   position:relative;
   height:131px;
}

aside {
   height:100%;
   background-color:rgb(27,135,200);
   position: relative;
   float:left;
   width:100px;
}

main-content {
   position:relative;
}

(Simplified jsfiddle)

我遇到的问题是侧边栏是100％高度，但由于它设置为相对，侧边栏被添加到131px高度的标题，因此页面的高度为100％+ 131像素。这不是我想要的。

如果没有创建固定的div，可以解决这个问题吗？

Answer 1

尝试在CSS中计算aside div的高度：

height: calc(100vh - 131px);

vh表示屏幕的完整高度，您可以从中减去标题的高度131px。我认为你会得到你想要的东西，如果你必须你可以调整数字，以获得100％准确的测量。请记住，将来添加保证金/填充到您的标题可能会搞砸。我建议使用Sass / Scss跟踪你的身高，如下所示：

$header-height: 131px;

然后在你的造型上使用它：

height: calc(100vh - $header-height);

我希望this有所帮助！

100％高度 - 带标题的相对div

1 个答案: