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

Question

As almost everyone on the web I am having difficulties getting my sidebar to 100% page fill. 作为网络上的几乎每个人，我都难以使侧栏达到100％的页面填充率。

I have a header under which I want to put a sidebar and content: 我有一个标题，要在其下放置一个侧边栏和内容：

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

I want the sidebar to be 100% height, but the only way I seemed to be able to get it to work is to make the sidebar "position:fixed". 我希望边栏为100％的高度，但是我似乎能够使其正常工作的唯一方法是将边栏设置为“ position：fixed”。 Because I want the website to be responsive, fixed is not the solution for that. 因为我希望网站具有响应性，所以解决该问题的方法不是固定的。

JSfiddle of current site 当前网站的JSfiddle

Short version: 简洁版本：

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

CSS: 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) （简化的jsfiddle）

The problem that I am experiencing is that the sidebar is 100% height, but because it is set to relative, the sidebar is added to the header of 131px height, thus the page has a height of 100% + 131 px. 我遇到的问题是，边栏的高度为100％，但是由于将其设置为相对高度，因此将边栏添加到131px高度的标题中，因此页面的高度为100％+ 131 px。 And that is NOT what I want. 那不是我想要的。

Any way to fix this without creating fixed divs? 有什么办法解决此问题而不创建固定的div？

Answer 1

Try calculating the height of your aside div like so in CSS: 试着计算你的高度aside DIV像这样的CSS：

height: calc(100vh - 131px);

Where vh represents the full height of your screen, from which you substract the height of your header, which is 131px . 其中vh代表屏幕的整个高度，从中减去标题的高度131px 。 I think that you will get what you want and if you must you can adjust the numbers to get a 100% accurate measurement. 我认为您会得到想要的东西，如果必须，您可以调整数字以获得100％准确的测量。 Keep in mind adding margin/padding in the future to your header can mess things up. 请记住，将来在页眉中添加边距/填充会弄乱事情。 I recommend using Sass/Scss to keep track of your height with a variable like so: 我建议使用Sass / Scss通过类似这样的变量来跟踪您的身高：

$header-height: 131px;

Then using it on your styling like so: 然后像这样在样式上使用它：

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

I hope this helps! 我希望这会有所帮助！

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

问题描述

1 个解决方案

解决方案1
1 2015-10-30 15:00:12

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

问题描述

1 个解决方案

解决方案1 1 2015-10-30 15:00:12

解决方案1
1 2015-10-30 15:00:12