边栏不会填充100%高度:(

时间:2014-03-24 03:46:12

标签: html css twitter-bootstrap

所以我提前道歉 - 我确实在搜索这个,看起来很简单,我尝试了我发现的东西,但它没有用。

我正在修改一个Bootstrap页面 - 无论我尝试什么,我的侧边栏都不会填充100%的页面。

在旁注上,我正在使用IE10,看起来还不错 - 然后我在Firefox中打开了页面......表格和我的徽章图像一起挤压了><

我将页面和CSS上传到我拥有的虚拟域 - http://blacksunresearch.com/

我会粘贴代码,但我不确定我哪里出错><

PS:如果有帮助,我会通过重新创建此页面进行练习 - http://landing.trugreen.com/growth29

7 个答案:

答案 0 :(得分:1)

边栏不会填补" 100%"因为你没有定义100%是什么,换句话说,需要在父元素上定义一个高度,以便高度:100%工作。其他明智的100%只是div中的数据。

答案 1 :(得分:0)

您的侧边栏需要高度 100%(以及所有家长)!

在你的第二个网站上你使用了一个技巧:侧边栏没有100%的高度,你只使用了一个帮手。

答案 2 :(得分:0)

好的,让我们从CSS开始吧。由于http://blacksunresearch.com/处的列没有父高度属性,因此此div的高度自动设置为auto。如果此页面的内容不会改变,您可以在您希望的高度进行硬编码。

现在您正试图模仿http://landing.trugreen.com/growth29的网站。他们通过在填充的div下放置另一个div来实现这种效果。

答案 3 :(得分:0)

您可以为容器行设置一个类,如下所示

.row.anyclass{
    display:flex;
}

但我不确定浏览器的兼容性,抱歉我使用的是linux =)

进一步阅读display:flex http://css-tricks.com/snippets/css/a-guide-to-flexbox/

答案 4 :(得分:0)

为您的包含行position:relative。然后将此css添加到侧边栏(.kigside):

position: absolute;
top: 0;
right: 0;
bottom: 0;

绝对位置强制它离开流,但只要列具有设定宽度(它们具有),布局将保持不变。 right : 0属性将其置于应该去的位置。 top:0bottom:0属性强制它填充容器的高度,即使它没有设置的高度(它没有)。

答案 5 :(得分:0)

我知道你只提到CSS。但是如果你对另一种方法感兴趣,你总是可以使用javascript和jquery - 我在源代码的底部注意到 - 动态设置侧边栏的高度。

以下是我用作解决问题的方法:

$('.kigside') .height($('.kigmain') .height());

此行使用包含所有段落的主div的高度作为侧边栏自身高度的参考。

答案 6 :(得分:0)

我发现在元素上添加 sumOfNumbers :: Int -> Int sumOfNumbers n | n == 0 = 0 | otherwise = n + sumOfNumbers(n -1) 的样式对我有用。